I have recently switched from webstorm to vscode and I am struggling to set it up for my needs.
Right now I am wondering if there is any extension/setting that will show only available imports from the imported file.
Here is an example:
import { InternalDataObject } from 'internal-node-module'
import actionTypes from './pay-structure.action-types'
const { GET_JOB_STAMP } = actionTypes
export {
getMissionFees,
}
const getMissionFees = () => ({
type: GET_JOB_STAMP,
promise: InternalDataObject.payStructure.getJobFeeStamp,
})
When I press ctrl + space in the brackets I can see thousands of options, but I would like to see only one: getMissionFees
Thanks in advance!
There is a setting for that:
"editor.snippetSuggestions": "none"
It ontrols whether snippets are shown with other suggestions and how they are sorted. Possible values: top, bottom, inline, none.
Related
I am working on a javaScript / react playground (something like very simple codesandbox.io) and I'm trying to figure out how to transpile the code. I was thinking of using Babel transform but the app itself is built using create-react-app so I do not have access to Babel. My question is, if I do something like the following and install Babel, will it also override how create-rect-app currently transpiles the code for the app?
// transpile.js
const babelOptions = {
presets: [ "react", ["es2015", { "modules": false }]]
}
export default function preprocess(str) {
const { code } = Babel.transform(str, babelOptions);
return code;
}
EDIT:
I've since learned that I can use Babel standalone for exactly this use case! Now it's just to figure out how to configure it. I would still appreciate help but if I find a solution first I will post for others :)
Ok so I have figured this out but it is not straight forward. I will try to add some details here in case anyone else finds it helpful.
I first needed to load Babel standalone and so I used this answer to create a custom hook to load a script:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
console.log(`${url} script loaded`);
return () => {
document.body.removeChild(script);
console.log(`${url} script removed`);
}
}, [url]);
};
export default useScript;
then I used it in my component like this:
import useScript from '../../../hooks/useScript';
useScript("https://unpkg.com/#babel/standalone/babel.min.js");
then I later use the code I wrote in the initial question to transpile my code.
I'm trying to write an extension for VSCode where the editor screen is always centered on the cursor. There are other extensions that add a command to center the screen onto the cursor, but you have to press the command to activate it.
Currently the only way I've found to implement this is to rewrite the cursorUp, cursorDown, enter, pageUp, pageDown -- any command that moves the cursor up and down basically, and then use the "revealLine" command with the cursor line position and with the "at" attribute as "center".
Is there a better way? Reimplementing the default editor commands seems very inefficient.
Here's what I've got currently:
"use strict";
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
let disposable1 = vscode.commands.registerCommand("cursorUp",() => {
centralizar();
vscode.commands.executeCommand("cursorMove", {
to: "up",
});
}
);
let disposable2 = vscode.commands.registerCommand("cursorDown",() => {
centralizar();
vscode.commands.executeCommand("cursorMove", {
to: "down",
});
}
);
context.subscriptions.push(disposable1);
context.subscriptions.push(disposable2);
}
function centralizar() {
let currentLineNumber = vscode.window.activeTextEditor.selection.start.line;
vscode.commands.executeCommand("revealLine", {
lineNumber: currentLineNumber,
at: "center"
});
}
export function deactivate() {}
Perhaps you can utilize the new (v1.38) command editor.cursorSurroundingLines. See scrollOff release notes.
It takes a number, but if you can get the number of visible lines in an editor window, then set editor.cursorSurroundingLines to the appropriate midpoint that may work. It seems you would not have to listen for scroll events. But would have to update the value if the editor window was resized.
The Scrolloff extension implements this functionality when its "alwaysCenter" option is enabled. It works by listening to window.onDidChangeTextEditorSelection, which fires when the cursor moves.
We can use the "split editor" option to make two views into one file.
I'm looking for an option to open the same file in separated tabs like I can do in Sublime Text (open new view of file). Is that possible?
Note: I want to do this without splitting the view, so there should be two tabs for the same file within the same view container.
I couldn't find anything built-in that lets you do this, nor an existing extension in the marketplace. I thought it should be quite trivial to implement a "Duplicate Tab" command yourself in a custom extension, but it turns out VSCode only allows the same resource to be opened once within the same view column.
It's still possible to do this on Windows or macOS, but only by abusing this bug:
Issues with not case/fragment-normalizing file paths (macOS, Windows) #12448
Here's what the code for the extension looks like:
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.commands.registerCommand("duplicateTab", () => {
var activeEditor = vscode.window.activeTextEditor;
if (activeEditor == null) {
return;
}
// HACK!
const sameFileNameButDifferent = activeEditor.document.fileName.toUpperCase();
vscode.workspace.openTextDocument(sameFileNameButDifferent).then(document => {
vscode.window.showTextDocument(document, {preview: false});
});
});
}
In package.json:
"contributes": {
"commands": [
{
"title": "Duplicate Tab",
"command": "duplicateTab"
}
]
},
EDIT: It is Beautify that is adding the new lines. Not sure which rule though.
Is there a way to stop parameter lists and import lists from adding new lines per each list item when formatting code with?
E.g stop this:
function view(state$) {
return state$.map(({weight,height,bmi}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
from becoming this:
function view(state$) {
return state$.map(({
weight,
height,
bmi
}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
When right-clicking and selecting "format document"?
It also does it with imports like so:
import {
makeDOMDriver,
h1,
a
} from '#cycle/dom';
However it is unwanted.
create or edit .jsbeautifyrc file in your root from you vscode project and put in to the file this json property
{
"brace_style": "collapse,preserve-inline"
}
this will also prevent to format all JavaScript object
Include "brace_style": "collapse,preserve-inline" as Yitzchak said inside the .json settings file located here:
C:\Users\***\AppData\Roaming\Code\User\settings.json
2021 Update for Eze_82's answer:
Instead of just "brace_style": "collapse,preserve-inline", you now need to include the following in the settings.json file of VSCode:
"beautify.config": {
"brace_style": "collapse,preserve-inline"
}
The location of the settings.json is still the same.
I am trying to add the Cntl+K and Cntl+J shortcuts to move cells up and down quickly. I viewed the issue on Github here for adding the shortcuts and found what looked to be a workable answer:
"For those (like me) who liked this shortcut, add this to your ~/.ipython/profile_default/static/custom/custom.js:
$([IPython.events]).on("app_initialized.NotebookApp", function () {
IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-k', function (event) {
IPython.notebook.move_cell_up();
return false;
});
IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-j', function (event) {
IPython.notebook.move_cell_down();
return false;
});
});
"
But my users/{my name}/.ipython/profile_default directory did not have a static folder. I tried adding the missing folders and custom.js file, and reopened Anaconda prompt, but this did not add the missing shortcuts.
Another answer had the same issue:
"Use the following:
$ cat ~/.jupyter/custom/custom.js
define(["base/js/namespace"], function(Jupyter){
console.info('Binding Ctrl-J/K to move cell up/down');
Jupyter.keyboard_manager.command_shortcuts.add_shortcut('Ctrl-k','jupyter-notebook:move-cell-up');
Jupyter.keyboard_manager.command_shortcuts.add_shortcut('Ctrl-j','jupyter-notebook:move-cell-down');
});
"
This answer also did not work (adding the missing folder and custom.js file did not work).
As proposed in the official doc (got with the "Help>Notebook" menu action),
you could try first in a live notebook. The browser javascript console helps too.
I tried:
%%javascript
IPython.keyboard_manager.command_shortcuts.add_shortcut('Ctrl-k','jupyter-notebook:move-cell-up');
// replacing IPython with Jupyter should work as well:
Jupyterkeyboard_manager.command_shortcuts.add_shortcut('Ctrl-j','jupyter-notebook:move-cell-down');
It works but, just as when clicking on the corresponding toolbar button, the console warns about deprecation
in favor of IPython.notebook.move_selection_up() .
The string "jupyter-notebook:move-cell-up" refers to the same action.
So I suppose a reasonnable thing to do is to redefine it from scratch:
IPython.keyboard_manager.command_shortcuts.add_shortcut('Ctrl-k', {
help : 'move up selected cells',
help_index : 'jupyter-notebook:move-selection-up',
handler : function (event) {
IPython.notebook.move_selection_up();
return false;
}}
);
IPython.keyboard_manager.command_shortcuts.add_shortcut('Ctrl-j', {
help : 'move down selected cells',
help_index : 'jupyter-notebook:move-selection-down',
handler : function (event) {
IPython.notebook.move_selection_down();
return false;
}}
);
After executing the notbook cell (or the code in your browser console), it should
be active and you can experiment with it.
Once happy, check the path of your jupyter profile with !jupyter --config, and from there
you'd know where to copy your code : <profile>/static/custom/custom.js
so that it would be active in next jupyter sessions.