How to replace a variable in a snippet in Visual Studio Code? - visual-studio-code

I use javascript snippet with keybinding.
I have this code below:
{
"key": "alt+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": " const $TM_CURRENT_WORD = $1"
}
},
If I type box and than press alt+c, I get...
box const box =
But I expected
const box =
How can I achieve that?

Snippets will always insert text wherever the cursor is at the time the snippet is triggered - that is why you are seeing the behaviour you get. If the word was first selected, an insertion would replace that word like normal.
The easiest way is just to select the box text and then alt+c and you will get your result. But with the extra step of selecting.
Here is a macro solution as well.
Using a macro extension like multi-command put this into your settings.json:
"multiCommand.commands": [
{
"command": "multiCommand.insertConst", // whatever name you want to give it
"sequence": [
"cursorWordLeftSelect",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "const $TM_SELECTED_TEXT = $1"
}
}
]
}
]
and some keybinding:
{
"key": "alt+c",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.insertConst" }, // use same name here
"when": "editorTextFocus"
},
or you could just modify your snippet so that you don't first type the variable name. You would trigger the snippet, then type the variable name, tab and then its value like so:
{
"key": "alt+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": " const $1 = $2"
}
},

Related

How can I use shortcut add markdown codeblock to selection text in vscode?

I am working on some documents in words and evernote, need convert the contents to markdown and save to obsidian.
What I usually do is manually add code block :
```python
import xxx
some_content = 'balabala'
more = ....
```
As you know ctrl + # is add comment to every line.
So I wonder if there is any way to
use cursor make selection of text
hit a shortcut to wrap that text with
```language
selected text
```
I have search in google but nothing useful found.
Does this key binding help
{
"key": "ctrl+i 1", // or any other combo
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "```python\n$TM_SELECTED_TEXT\n```\n$0"
}
}
You can add a language selection:
{
"key": "ctrl+i 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "```${1|python,javascript|}\n$TM_SELECTED_TEXT\n```\n$0"
}
}

VS Code Keybinding for Line Break

I would like to add a key binding for inserting a line break in the editor (textInputFocus). Normally the Return key does this (VS Code calls the key Enter). Which command in VS Code can I use?
There is lineBreakInsert but this does not behave exactly the same as Enter normally does - it inserts a line break but keeps the cursor in the same position.
Is this what you are looking for:
{
"key": "ctrl+o",
"command": "type",
"args": {
"text": "\n"
},
"when": "textInputFocus"
}
Currently this is my workaround, but it's not a perfect solution:
I installed multi-command and added this binding (in keybindings.json):
{
"key": "ctrl+o",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"lineBreakInsert",
"cursorDown",
"cursorHome"
]
},
"when": "textInputFocus"
}

VS Code creating custom shortcuts for common methods with line break (e.g. dd($var) or console.log($var))

First, I have a shortcut on VSCode to Wrap a text with the thing I'm typing.
<div>
Hello World
</div>
If I select "World" and use the Emmet: Wrap with Abbreviation shortcut and type span I can make this:
<div>
Hello <span>World</span>
</div>
But here's the thing :
I know we can create custom wrapping that are not the same on each side of the word we selected (source: VS Code : create custom snippet/shortcut)
{
"key": "ctrl+i",
"command": "editor.action.insertSnippet",
"args": {
"snippet": "{something}$TM_SELECTED_TEXT{/some other thing}"
},
"when": "editorTextFocus && editorHasSelection"
}
What I would like is to select my variable, then use the shortcut, and it will print what I need UNDER the selected line, and whitout breaking the current line where I come from.
For this example, I'm selecting the var $user_id, press shortcut, and then boom it will add the second line.
$user_id = User::where('user_name', $user_name)->get()->first()->id;
dd($user_id);
Here's a start:
{
"key": "ctrl+alt+c",
"command": "editor.action.insertSnippet",
"args": {
"snippet": " ==> here we need to find how to line break without spliting the code and then: <==
{console.log(}$TM_SELECTED_TEXT{)}"
},
"when": "editorTextFocus && editorHasSelection"
}
Do you think it is possible ? Maybe the solution is to use Keyboard Macro separately from VSCode ?
I came up with this solution, thanks to #Mark in comments, related to this thread : How can I insert a snippet on a new line with vscode?
Install Multi-command VSCode extension
Open the settings file of the extension (settings.json)
Implement your code (here's mine with console.log() and dd() )
"multiCommand.commands": [
{
"command": "multiCommand.console.log",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "console.log(\"$CLIPBOARD: \", $$CLIPBOARD)\n$0"
}
},
]
},
{
"command": "multiCommand.dd",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "dd($$CLIPBOARD);"
}
},
]
}
Implement the shortcut in your VSCode settings (keybindings.json)
{
"key": "ctrl+1",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.console.log" }
},
{
"key": "ctrl+2",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.dd" }
}
If I'm understanding your question correctly, you can probably just use $0 to show where your cursor will end and use \n to insert a line break.
However, I'm not entirely sure if this works when creating a snippet from the Keyboard Shortcut file, but it works from the snippet file so I'm assuming it'll work here.

How do I disable inserting a new empty line when I press Enter when the cursor is in brackets?

Steps to reproduce:
simple code:
if () {}
cursor is between {}
i press Enter
result:
if () {
}
expected result:
if () {
}
I want a empty line not to be inserted.
It may be that it works by default(adds a empty line), and when Alt+Enter it doesn't add a empty line.
I did not find settings in vscode. I didn't find anything on google.
I tried this:
{
"key": "alt+enter",
"command": "type",
"args": {
"text": "\n"
},
"when": "editorTextFocus"
}
Because Alt+Enter does nothing by default.
However, the onEnterRules function used with the editor.autoIndent option detects the addition of the \n character and adds an extra empty line anyway. :(
I want to use editor.autoIndent. But I want to turn off (do not turn on) using the shortcut Alt+Enter.
Worst option: look for an extension that does exactly the same as editor.autoIndent, but has the ability to create a shortcut Alt+Enter to work the way I want.
You can use the extension multi-command and construct a command that does what you want.
Add this to your settings.json (global or workspace)
"multiCommand.commands": {
"multiCommand.lineBreakNoEmptyline": {
"sequence": [
"lineBreakInsert",
"deleteWordRight",
"cursorRight",
"cursorHome"
]
}
}
Add this to your keybindings.json:
{
"key": "alt+enter",
"command": "multiCommand.lineBreakNoEmptyline",
"when": "editorTextFocus"
}
Or using the keybinding only method
{
"key": "alt+enter",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"lineBreakInsert",
"deleteWordRight",
"cursorRight",
"cursorHome"
]
},
"when": "editorTextFocus"
}
I'll show the info from my comment here so that it is clearer. This keybinding:
{
"key": "alt+enter", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
// "lineBreakInsert",
{
"command": "type",
"args": {
"text": "\n"
}
},
"editor.action.clipboardCutAction"
]
},
}
The type command acts differently than a lineBreakInsert command so it is a little easier to then delete that extra line as the cursor is already there. It is just a small improvement, 2 less commands.
Demo:

How to bind hotkey of 'tab out' extension to "enter" in VS code?

The tabout extension in VS works fine. I just want to rebind it to "enter" as it seems easier & more natural to hit after i m done inputting the data between the quotes.
But it does not have rebind feature in VS code!
I found a thread here. It seems like you can rebind it with:
{ "command": "-tabout" },
{ "key": "enter", "command": "-tabout" }
They do say that this causes some issues in how it actually goes about doing it's task, so "...if you are at the start of a line that begins with a quote, instead of adding a tab space, it brings you into the quote." I imagine this would mean that there would be more issues with using enter instead of tab. Another commenter recommended this configuration to circumvent this issue with TabOut.
{
"key": "shift+'",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": { "snippet": "\"$1\"$0" }
},
{
"key": "`",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": { "snippet": "`$1`$0" }
},
{
"key": "shift+9",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": { "snippet": "($1)$0" }
},
{
"key": "[",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": { "snippet": "[$1]$0" }
},
{
"key": "shift+[",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": { "snippet": "{$1}$0" }
}
I think better than doing any of those is just to remap the right arrow to a key that is more comfortable to be hit from the home row. This can be done without even installing extensions. It can be found here:
"Preferences" -> "Keyboard Shortcuts" -> "cursorRight" -> "^ F" (ctrl+F on Mac).