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
Related
I have gotten user snippets in VSCode to work for C and C++, but for some reason VSCode is not providing snippet suggestions for .md and .tex files.
Here is a minimal example of tex.json (that doesn't work):
{
"dummy": {
"prefix": "dummy",
"body": [
"some random text for demonstration"
],
"description": "A dummy snippet"
}
}
VSCode provides suggestions in .md and .tex files, just not user snippets. How do I fix this issue or employ some other way to use user snippets for Markdown and Latex?
Update: Snippets are now working in .md files, thanks to the comment by #Mark. I need to type the prefix and press Ctrl + Space. This solution does not, however, work for Latex.
For markdown files try this language-specific setting in your settings.json file:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}
and you shouldn't need to trigger the snippet suggestion with Ctrl+Space anymore.
[For latex files I don't need that setting - if snippets aren't working in your latex files try the same setting but with latex.]
Sometimes "Ctrl+ Space" is a shortcut for switching input methods on Windows, please turn it off, it works for me
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'm trying to wrap bunch of data with following tags.
For an example:
link1
link2
link3
link4
link5
I want each one of them to be wrapped with following tags.
<url>
<loc>link1</loc>
<lastmod>2020-01-16T22:59:45+00:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>link2</loc>
<lastmod>2020-01-16T22:59:45+00:00</lastmod>
<priority>0.80</priority>
</url>
....
I want to know if this is possible to do using Emmet code. Any help would be appreciated.
There are two things you should use from Emmet syntax:
Implicit repeater: mark element with * (without number) to Emmet to repeat element as many as lines you’re wrapping. For example, ul>li*
Output placeholder: tell Emmet where to put content you are wrapping with $#. You can use it in text (li{Put here: $#}) and/or in attributes (li[title=$#]).
So, in the end your wrapping abbreviation will look like this:
url*>loc{$#}+lastmod{2020-01-16T22:59:45+00:00}+priority{0.8}
Note that, for some reason, in VSCode you should use Emmet: Wrap Individual Lines with Abbreviation command to wrap multiple lines while in other editors the default Wrap With Abbreviation should work.
Read more about abbreviation syntax: https://docs.emmet.io/abbreviations/syntax/
In PHPStorm, I'd suggest defining a live template for that:
<url>
<loc>$SELECTION$</loc>
<lastmod>$date$</lastmod>
<priority>0.80</priority>
</url>
where $date$ has date("yyyy-MM-dd'T'HH:mm:ss.SSSZ") used as Expression:
Now enable column selection mode (Edit | Column Selection Mode), select the lines you'd like to surround with tags, choose Code > Surround With Live Template...
Another alternative is to use regular snippets. This is for vscode:
"link snippet": {
"prefix": "link",
"body": [
"<url>"
"<loc>$TM_SELECTED_TEXT</loc>",
"<lastmod>2020-01-16T22:59:45+00:00</lastmod>", // if date is fixed ahead of time
// use below if date is dynamic at creation time
"<lastmod>${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+00:00</lastmod>"
"<priority>0.80</priority>",
"</url>",
""
],
"description": "Wrap link with url, etc."
},
Then, because you will need to chain 3 commands together to make this easy, use a macro extension like multi-command. Pu this into your settings.json:
"multiCommand.commands": [
{
"command": "multiCommand.expandLink",
"sequence": [
"editor.action.insertCursorAtEndOfEachLineSelected",
"cursorHomeSelect",
{
"command": "editor.action.insertSnippet",
"args": {
"name": "link snippet",
}
},
]
}
]
That will trigger the snippet after it selects each of your lines separately. To trigger the macro itself you need a keybinding (in keybindings.json):
{
"key": "shift+alt+l",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.expandLink" },
},
A fair amount of setup, but then it is just the one keybinding to trigger it all. Demo:
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.
So I would like Visual Studio Code (with the aid of Emmet) to be able to transform something like
.wrapper
into this
<div class="wrapper"></div><!-- /.wrapper -->
I believe there are solutions for how to do this in Sublime Text and Webstorm, so it would be great to know if there is one for Visual Studio Code as well.
Thanks!
You know you can just add |c to the end of your .wrapper to get a comment added at the end like:
<div class="wrapper"></div>
<!-- /.wrapper -->
Infortunately, that puts the trailing comment on a newline. If that is unacceptable, see remove line break before comment and see emmet comment filter for modifying the filer for comments in vscode.
And put this into your settings.json:
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
}
I just removed the newline \n from the example comment filter.
Alternatively, it can be done pretty easily with a snippet (in your html.json snippets file):
"emmet with comment": {
"prefix": ".",
"body": [
"<div class='$1'>$2</div><!-- /.$1 -->"
],
"description": "expand with comment"
}
Then type the . and hit tab and type your classname, it will go into both $1's. Tab again to get to the $2 cursor location. [You may have to hit escape if you get suggestions after you type your classname.]
To use the tab completion, change this in your settings:
// When enabled, Emmet abbreviations are expanded when pressing TAB.
"emmet.triggerExpansionOnTab": false,
to true.
To get Emmet to add comments and keep them on the same line as the closing tag, add the following to your user settings file in Visual Studio Code, and then restart VSC.
"emmet.preferences":{
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
},
"emmet.syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
// “html”: “xhtml”
"html" : {
"filters" :"html, c"
}
},