Is there any way to make certain snippets automatically expand without confirmation? - visual-studio-code

I have certain snippets for which I want to write the prefix, and for the snippet to expand automatically, without me having to press "TAB" or any confirmation key.
An example snippet for which I want to do that for is
"to the power of": {
"prefix": "tothe",
"body": [
"^{$1}$2 $0"
],
"description": "to the power of"
Is there any way I can do that?

Related

VS Code Snippet - Change position of linked tabstops

I am currently switching from IntelliJ to VS Code for a project and want to take some of my custom live templates with me.
VS Code supports "User Snippets", but I can't get them to work like they do in IntelliJ.
I want to achieve the following output:
console.log('variableName', variableName);
Now the thing is, I want my cursor to start right after the , so I get IntelliSense for auto completion of a defined variable. Then that variable name should be placed in the string.
I am right at the start and know that tabstops with the same ID get the same value:
"console.log variable": {
"scope": "javascript,typescript",
"prefix": "cl",
"body": [
"console.log('${1}', ${1});",
"$0"
],
"description": "console.log variable with name"
}
The problem with this is though, that the first tabstop is the start of the snippet and since I am inside a string I don't get IntelliSense for the variable name.
Is there a way to reverse the tabstop order of linked tabstops or anything similar that helps with the problem at hand?
"Print to console": {
"prefix": "clog",
"body": [
"console.log('${1:variable}', ${1:variable});$0"
],
"description": "Log output to console"
}
Works but you have to press Ctrl+Space to get completion items.

Wrap a code block in HTML tags or other arbitrary code

I am not sure what the best way to word this question is. It is possibly why I am on StackOverflow because I cannot find a result on Google. Let me give it a try.
Assume I have the following HTML in my editor:
<li>One</li>
<li>Two</li>
<li>Three</li>
Is there a way to highlight all three of those lines, perhaps (on MacOS) using cmd+L and wrap them conveniently in <ul></ul> tags? Right now my process for doing this includes:
writing out <ul></ul> above the HTML I want to wrap. Hit return for a line break between the two tags I want to embed content between.
select the code block I want to embed between those tags using cmd+L
on MacOS, hit option+Up Arrow Key to move it in between the tags.
This is kind of awkward. Is there a simpler keyboard shortcut to do this, not just for HTML but for any code? It would be great to be able to take code like this:
car.turnLeft()
and simply wrap it in a condition very quickly without following the 3 non-optimal steps above:
if (car.isHeadedWrongDirection()) {
car.turnLeft()
}
The example above is forcefully contrived, but I think it makes the point for what I would like to accomplish in the editor.
The general form for wrapping is to use $TM_SELECTED_TEXT within a snippet. Like
"if wrap": {
"prefix": "*s",
"body": [
"if car.$1()) {",
"\t${TM_SELECTED_TEXT}",
"}"
],
"description": "Wrap selection in if statement"
},
That snippet goes into one of your snippet files, see create a snippet.
Because the snippet trigger, here *s will negate your selection, you will need to trigger the snippet with a keybinding, in keybindings.json:
{
"key": "alt+i", // whatever keybinding you want
"command": "editor.action.insertSnippet",
"args": {
"name": "if wrap" // the name you gave your snippet
},
"when": "editorTextFocus"
},
Now select the text you want to wrap and trigger the keybinding alt+i.
There are other ways to avoid having to select the text first that you want to wrap or to not actually consume the text - if you wanted to add the if wrap below the text for example.

vscode Nest snippet choices and add tab stops to choices

I want to do something like that in my snippets for visual studio code:
"V.G.${1|BLOCK_NR,MASS_MM,MASS_360,I,J,K,R,FEEDRATE,FEEDRATE_SCALE,MERR[${2}]|}"
So after choose the option MERR[] I will see the cursor inside the brackets.
and how i have to manage sub choices like:
"V.G.${1|choice${2|subchoiceA,subchoiceB|},choice, choice......}"
If I choose MERR[] Option I will jump into [Cursor should be here]. How can i handle this?
Here is a workaround to your subchoiceA/B question because you cannot have anything except plain text as choices - no tabstops or subchoices, etc. Your example:
V.G.${1|choice${2|subchoiceA,subchoiceB|},choice, choice......}"
This can be achieved however with 2 snippets:
"choices with subchoices": {
"prefix": "_choices", // whatever prefix you want
"body": [
"V.G.${1|choice1, _subchoices,choice2,choice3|}"
],
"description": "variables in a choice element"
},
"my subchoice list": {
"prefix": "_subchoices", // this prefix must be what you used in the main snippet
// as your subchoice option
"body": [ "${1|subchoiceA,subchoiceB|}" ],
"description": "subChoices"
},
What happens is that when you choose the subchoices option in the main snippet it will see it as the prefix for the second snippet - that is pretty neat. But it will not do so until you trigger that recognition with Ctrl+Space the usual intellisense trigger and then tab to select the second snippet.
It is only one or two extra keystrokes to get subchoices working inside of a parent choice element when otherwise it can't be done at all.
The only issue is that your second prefix - here subchoices cannot be a continuation of another string with no spaces otherwise it won't be recognized as a standalone snippet prefix by vscode. That is why I added the space before subchoices in the main snippet since your example has "V.G.${1....} with no space before the option would be inserted.
Here is a demo:

VSCode - Create shortcut to insert string

I want to create a shortcut to insert a specific string into the editor (I am tired of typing "#---------------------..." every single time when separating code blocks).
How do I implement this correctly in VSCode?
I believe File->Preferences->User Snippets is what you're looking for. The example shown looks like:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
Which I read as being able to do what you want. There seem to be files for specific languages or you can start a 'global' snippets file.

How to do IntelliSense for snippets when some text is selected in VSCode?

I wrote my first snippet which would wrap the selected text in if() { selected text } block.
"if block - snippet": {
"prefix": "if block - snippet",
"body": [
"if( $1 ) {",
"$TM_SELECTED_TEXT",
"}",
"$0"
],
"description": "if block - snippet"
}
When I select the text and hit CTRL+SPACE it shows the intellisense but, when I start searching for my snippet "if block - snippet" instead of searching it clears-out the selected text and start writing the "if blo...." :P
One workaround is to have a dedicated keybinding to trigger snippets but I want it more implicit like in the intellisense suggestions itself. is it possible?
Update: vscode now "remembers the $TM_SELECTED_TEXT even though it appears to disappear as you write your snippet prefix. So your original snippet works as you expect. No need to use $CLIPBOARD.
Previous answer:
It is if you copy the selection to the clipboard first so you can use:
"if block - snippet": {
"prefix": "if block - snippet",
"body": [
"if( $1 ) {",
"$CLIPBOARD",
"}",
"$0"
],
"description": "if block - snippet"
}
Once hitting CTRL+SPACE and intellisense shows, instead of searching the snippet by typing its name, use the UP/DOWN buttons to search it.
On the editor.action.showSnippets key binding, you can also do a when clause of editorHasSelection, and then you can use Ctrl+Space for both functionalities. It's not the nice inline snippet Intellisense, but it's closer to what we want.