There are a slew of questions/answers on this, and I went through them without success - here's my setup...
Extensions:
snippets.json file location -- C:\Users\USERNAME.vscode\snippets.json
Suggestion Settings:
Added Emmet Path (redacted):
Snippets.json
{
"Less": {
"scope": "php html",
"prefix": "!less",
"body": [
"<script src='https://cdn.jsdelivr.net/npm/less'></script>"
],
"description":"Adds the Less.CSS CDN"
},
"MooTools": {
"prefix": "!cdnmt",
"body": [
"<script src='https: //cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js' integrity='sha512-P6QjhxYLbTLOHQpilU3lsmhwLfgVh/zN5rVzcGbmiTWhMcpkHVk8eqWk2vqvM0Z6OhJfrdbYoTzJtGQYUj8ibw==' crossorigin='anonymous' referrerpolicy='no-referrer'></script>"
]
}
}
Right now, neither quicktype works. I've tried !less - there's no conflicting shortcut and hitting tab or enter after it doesn't do anything other than tab or enter.
Same goes for MooTools...
Some reviewed links:
here-are-the-default-emmet-settings-in-visual-studio-code
visual-studio-code-user-snippets-not-working
I've gone through the myriad of answers and tried just about everything. Nothing seems to work. I also am unable to locate/edit the defaultSettings.json (opens as read only in vs).
Additional Information (1)
Tried updating included files:
Still not working (FYI - I did restart VSCode to make sure that wasn't blocking it from taking over).
The simplest way to add snippets is to use the interface, either the "File/ Preferences/ Configure User Snippets" menu entry or the similarly named element in the gear icon you can find on the side bar:
You can then choose to add global snippets (to be used in any file type) or per-language snippets:
The program takes care of creating a file with the appropriate name and extension in the correct location. It also adds some boilerplate with documentation. This way you don't need to do prior research about your environment.
{
// Place your snippets for sql here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
Related
I'm trying to implement a small function by adding a shortcut for auto-correcting the last misspelled word, and this is what I get currently:
{
"key": "cmd+l",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"cSpell.goToPreviousSpellingIssue",
"editor.action.quickFix",
"workbench.action.navigateToLastEditLocation",
"acceptSelectedSuggestionOnEnter",
"acceptSelectedSuggestion"
]
}
},
The idea is simple: jump back to the first misspelled word, and just select the first suggestion my spelling checker gives me, finally jump back to the previous edited position.
The code above is using multiCommand plug-in. Question is that I can't find any keystroke events to let me actually select the first suggestion my spelling checker gives me.
As in the config, I'm using cSpell for checking my spelling. To be specific, after I hit cmd+l, this is what I get:
snap shot
Clearly, I manage to move to the previous spelling issue, and evoke quickFix to let the suggestion widget pop up, and then move my cursor back to where I was initially. Hence, the only problem is what is the event to select that suggestion?
Really appreciate every helps, or if there is a better method to do the same thing please tell me! (I have tried every keyword I can think of, and there are not many references out there both in the official document from VS Code and google)
Because the quickfix menu is a different beast than a suggestions menu, the nextSuggestion or acceptSuggestion type of commands will not work in it. There is an open issue for navigation commands in the quickfix menu, see Missing keybinding for navigation in Quick Fix contextual menu
.
But you can get what you want another way. I found Keybinding for applying a specific code action and in it is a method for applying a quickfix with a command:
{
"key": "ctrl+shift+r ctrl+e",
"command": "editor.action.codeAction",
"args": {
"kind": "refactor.extract.function",
"apply": "first"
}
}
Valid values for "apply":
"first" — Always automatically the first available code action.
"ifSingle" — Default. Automatically the code action if only one is available. Otherwise, show the context menu.
"never" — Always show the code action context menu, even if only a single code action is available.
Adapting that for your use case, try this:
{
"key": "cmd+l", // "ctrl+l" for Windows
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"cSpell.goToPreviousSpellingIssue",
{
"command": "editor.action.codeAction",
"args": {
"kind": "quickfix",
"apply": "first" // you indicated you want the first choice
}
},
// "workbench.action.navigateToLastEditLocation"
"cursorUndo" // better than the above I believe
]
}
}
I'm creating a color theme and I found out that the only way to target function parameters with italic is by using semantic highlight. The problem is that since semantic highlight overrides some settings, I lost the ability to target support.function.console - the "log" of console.log, for instance.
.log is a member.defaultLibrary, but if I target that by semantic, some other things would also be styled with the same color. That wouldn't be bad if member.defaultLibrary wasn't so inconsistent, some things you would expect to be styled, is not, which leads to inconsistency, which is certainly not desirable.
querySelector() is styled by member.defaultLibrary but not querySelectorAll(), for instance. I also tried to not use anything that can be overridden by semantics but then, it creates too many exceptions and some functions and methods would be let without any style, which is much worse.
I've tried Semantic Token Classification and tried to add a custom semantic token to the package.json file of the extension but I don't know how to "wire" that up:
{
"contributes": {
"semanticTokenTypes": [
{
"id": "consoleSupport",
"description": "console support"
}
],
"semanticTokenScopes": [
{
"scopes": {
"consoleSupport": ["support.function.console"]
}
}
]
}
}
When using development host, it does recognize the "new" consoleSupport when I try to add to "semanticTokenColors", it suggests the auto-complete, so I'm probably half-way there but I don't know how to actually create the new token and how to make it work.
I want to add user code snippet and I want to have the function name in it, something like this:
{
"Print to console": {
"prefix": "clog",
"body": [
"console.log('CONSOLE', '$FUNC_NAME$', $1);"
],
"description": "Log to console"
}
}
I can't find how to get the function name in VSCode snippets.
Any help?
You'll need to write an extension to do this. VS Code's user snippets cannot access program structure information, such as class or function names.
Check out the completions extension sample to get started.
I wanted to know if it is possible to trigger a user defined custom snippet when I create a file in vscode.
I started learning Golang recently and noticed that there is some boilerplate code that goes into creating the main.go file.
So I created my custom snippet for it and now now I can trigger the snippet manually and save me some keystrokes of typing.
I wanted to go one step further, so that whenever I create a new file named main.go from within VsCode, it should automatically fire that snippet and insert the biolerplate code for me, without me having to manually trigger the snippet.
Is this even possible ?
Check out this extension: Auto Snippet:
With this in your settings.json:
"autoSnippet.snippets": [
{ "pattern": "**/main.go", "snippet": "main-go-template" },
],
[Note that the example settings in the extension docs has a few syntax errors - use my example above - I have filed an issue with the creator.]
And then your snippet
"main-go-template": {
"prefix": "zz",
"body": [
... // you can use tabstops and transforms just like regular snippets
]
"description": "javascript template"
}
Then creating a new main.go file or opening an empty one should trigger the snippet.
It is a good idea to reload vscode whenever you make a change to this extension's settings.
Here is a demo of a gulpfile with common boilerplate:
Also see this extension https://marketplace.visualstudio.com/items?itemName=bam.vscode-file-templates
We have some custom snippets we provide as part of our VS Code extension via key bindings and a snippets json file:
{
"key": "ctrl+shift+i",
"mac": "cmd+shift+i",
"command": "editor.action.insertSnippet"
},
...
"snippets": [
{
"language": "xml",
"path": "./snippets/xml.json"
}
]
We would like a button to add one particular snippet to the editor at the current cursor position.
How do I programmatically I invoke the part of "editor.action.insertSnippet" after the user has selected the snippet?
I posted this issue on the vscode repo.
jrieken responded with the following reply:
The insertSnippet-command accepts an argument which is either the name of a snippet or a snippet itself. So, either { snippet: "console.log($1)$0"} for an inline snippet or { langId: "csharp", name: "myFavSnippet" } referencing an existing snippet.
You can run any registered command via vscode.commands.executeCommand. See also the vscode namespace API.