Emmet-VSCode custom class attribute abbriviation expansion for CSSmodules - visual-studio-code

With VSCode built in Emmet div.mycssclassname expands to <div className="mycssclassname">
But, because I'm using Webpack with CssModules enabled I need div.mycssclassname to expand to <div className={classes["mycssclassname"]}>
A snippet like the riov8 answer below works for individual tags, which is really nice, but it won't work in a complicated Emmet string expansion
In VSCode the "JavaScript React" syntaxProfile already expands . to className. How can I modify that? where is the syntaxProfile logic?, or can I create a custom Filter to post process the . expansion further ?

Create a normal snippet in html.json
{
"Webpack Class": {
"prefix": [
"wpc"
],
"body": [
"<${1} className={classes["${2}"]}>${3}</${1}>"
],
"description": "Webpack tag with a class"
}
}

Related

VS Code Custom Snippets parameters hints

I am creating my own snippets for my script, and would like to make hints in the parameters.
"GDX Round": {
"prefix": "gdxround",
"body".
"GDX.Round(${1:int}, ${2:round_decimal})"
],
"description": "GDX Round"
},
Something like this:

How do I define a custom snippet using VScode "Surround" extension

I'm using a VScode extension called "Surround"
In the docs for this extension it shows how to define a custom snippet. What I want is really simple. I would like to add the ability to surround selected text with tags, ie <> </> while placing the cursors in the middle where I define what type of tag that is (html, img, button, etc)
The docs show this example:
{
"surround.custom": {
// command name must be unique
"yourCommandName": {
// label must be unique
"label": "Your Snippet Label",
"description": "Your Snippet Description",
"snippet": "burrito { $TM_SELECTED_TEXT }$0", // <-- snippet goes here.
"languageIds": ["html", "javascript", "typescript", "markdown"]
},
// You can add more ...
}
}
I can almost parse it, except I don't know what the placeholders are representing. I assume { $TM_SELECTED_TEXT } is the text I've selected but what is the trailing $0 used for? Also, how can I place 2 cursors in between the opening and closing tags?
Thanks in advance.

Why is VSCode latex snippet not working (// character)?

I want to have create the following snippets:
"fraction": {
"prefix": ["//"],
"body": [
"\\frac{$1}{$2}",
],
"description": "Fraction"
},
I have many snippets in my latex.json file and all seem to work fine but this one doesn't, any idea why this could be the case?

How to tab complete to a new snippet while already in a snippet?

If I'm already in a snippet and I press tab, I'll proceed to the next placeholder. However, if I'm already in a placeholder and I've typed a prefix that should trigger another snippet, if I press tab, I proceed to the next placeholder instead of expanding the prefix I just typed. Is there a way to expand the prefix I just typed within a snippet?
Here's an example:
"test": {
"prefix": "t",
"body": "|${1}|${2}",
},
"text": {
"prefix": "a",
"body": "asdfghjkl",
}
If I type t I'll get to: ||
If I type a in the first placeholder and press tab I'll get: |a| where my cursor is at the ${2} placeholder
I would like to get: |asdfghjkl| instead
The main problem is that after you type a you have |a| and vscode will not recognize that a as a snippet prefix. It looks like |a to vscode. So if you actually made your second prefix to be | that would be recognized as the prefix, like:
"text": {
"prefix": "|a",
"body": "asdfghjkl",
}
You still have to Ctrl+Space to show suggestions and Enter to accept the suggestion. A Tab there would just go to the next tabstop
Alternatively, if you could insert a space like
"test4": {
"prefix": "t",
"body": "| ${1}|${2}", // space added here
},
then you wouldn't have to modify the second snippet.
Also, make sure that you have
Editor > Suggest: Snippets Prevent Quick Suggestions
disabled (enabled is the default) so you can trigger the suggestions within the first snippet - but you have to manually trigger them yourself with Ctrl+Space as mentioned above.

Wrap Selection Snippet on Visual Studio Code (vscode)

I want to create an snippet when triggered it will surround the given text. Currently my snippet is:
{
"Function Creator Helper": {
"prefix": "_w",
"body": [
"public function $TM_SELECTED_TEXT () {",
" $1",
"}",
],
"description": "Creates a function given the text selection"
}
}
This results on:
What I do is:
Select the text.
Write the prefix (_w)
Press Tab
This results on:
public function () {
}
But I was expecting
public function person () {
}
Any ideas on how can I make this snippet or how can I triggered it correctly?
See https://stackoverflow.com/a/48676522/836330 Your example will work, as of vscode v1.49, as you have it. Vscode snippets have been updated to "remember" your selected text even though you seemingly overwrite it with your snippet prefix.
Older answer:
You can use $TM_SELECTED_TEXT if you trigger it with a hotkey:
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
// "langId": "csharp",
"name": "Function Creator Helper"
}
}
The currently selected text is exposed as ${TM_SELECTED_TEXT}, not $TM_SELECTED_TEXT.
edit: As commented below, this is not the case for this particular use-case
I was just struggling with this myself. In order to get this to work, the only thing you have to do is press F1, run the Insert Snippet command and then select your snippet from the list.
${TM_SELECTED_TEXT} does not work for me either.
${selectedText} has been added as a Snippet Editor Variable:
https://github.com/Microsoft/vscode/pull/39483#issuecomment-383552677
Example:
"JS Block Quote": {
"prefix": "c2",
"body": [
"/* ${selectedText} */",
],
"description": "JS Block Quote"
}
At this time it is not correctly documented:
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
NOTE: In a multi-line selection, ${selectedText} is truncated to the first line. An alternative is to use the the clipboard and the ${CLIPBOARD} variable.
An extra step :(
from Mitches example:
"JS Block Quote": {
"prefix": "c2",
"body": [
"/* $TM_SELECTED_TEXT */",
],
"description": "JS Block Quote" }
from the article: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
the docs must have been ahead of the release.
This works fine in vscode v1.30.2
If somebody wants to know, it works like that for me :
I created two same snippet which only matches when I'm in html or php file (just create two snippets files in your snippets folder "php.json" and "html.json" it works for any languages) and added this code inside :
"unicommentary": {
"prefix": "unicommentary",
"body": "<?php /* ${TM_SELECTED_TEXT} */ ?> ${0}",
"description": "Creates a universal comment to disable both html and php."
}
The ${TM_SELECTED_TEXT} tag works when you select some text and trigger your snippet by the Insert Snippet command, you can't just write on selected text.
When you want to use this, select the text you want in your snippet, press Ctrl + Shift + P and select Insert snippet then, type the name of your snippet, press enter and there you go !