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.
Related
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.
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?
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:
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.
How can I create custom emmet snippet with the highest possible priority to display in vscode?
When I updated html.json to add my own snippet for comment (with autor), I still see default emmet "c" snippet as first in list:
"Comment": {
"prefix": "c",
"body":[
"<!-- atiris: $1 -->$2"
],
"description": "Insert comment into html code"
}
That means I always have to choose the second option first.
Is there any property / settings to prioritize my own snippets?
You can use BetterSnippets vscode extension. It provides way more customization then builtin snippets. For your case you can use smth like this:
"betterSnippets.customSnippets": [
{
"name": "c",
"body": "<!-- atiris: $1 -->$2",
"when": {
"languages": [
"html"
],
},
"sortText": "!1"
},
]
SortText property is what you're looking for. I use !1 to make snippets order more customizable e.g. if I would assing sortText: "!2" to other snippet it will appear under the snippet with !1
You are editing the intellisense snippets with the above code rather than the Emmet snippets.
Regarding your question, the following link may help you prioritize which snippets are shown first: https://github.com/Microsoft/vscode/issues/32346
Regarding adding snippets to Emmet, the following should help:
In the settings.json file you can add the line
"emmet.extensionsPath": "/Users/username/Documents/code snippets"
(changing the path to a folder of your choosing)
Then add in that folder a file named snippets.json
You can use the format outlined in the link below to add snippets.
https://code.visualstudio.com/docs/editor/emmet