I want to make all my tools into one extension including snippets, I know how to add snippets by steps operations, and how to make an extension, but how can we add snippets by making and installing an extension?
You can add contribution point 'snippets' in package.json .
{
"contributes": {
"snippets": [
{
"language": "go",
"path": "./snippets/go.json"
}
]
}
}
The language attribute is the language identifier.
The path is the relative path to the snippet file.
Here are official references : https://code.visualstudio.com/api/references/contribution-points#contributes.snippets
or
You can also choose New Code Snippets when creating an extension project with yo code command. This way is useful to create an extension just for snippets.
Hope this helps!
In my Vue.js projects almost all the times I need this code snippet as a template.
<template>
<div>
</div>
<template>
<script>
export default{
data(){
return{
}
},
methods:{
},
created(){
}
}
</script>
<style scoped>
</style>
Is there a way to tell Visual Studio Code each and every time I create a file with the extension .vue to automatically add that snippet to the file?
Simply, when I create new file with a certain extension, the predefined template for that extension should automatically be added to the file.
There isn't, not natively. But there is an extension called File Templates for VSCode that allows you to create your own file templates and generate from them. But I think you'd benefit from making an extension to do just that and maybe even more.
In the meantime, you can use a snippet to generate this instead of having to copy paste.
Go to File > Preferences > User Snippets and choose Vue from the dropdown. Vue will only show up if you have installed an extension that supports this file type. In this case, I'd recommend Vetur, but you probably have it already.
Then just add this entry to your vue.json file:
"vuetpl" : {
"body": [
"<template>",
"\t<div>",
"\t\t$0",
"\t</div>",
"</template>",
"<script>",
"export default{",
"\tdata(){",
"\t\treturn{",
"\t\t\t",
"\t\t}",
"\t},",
"\tmethods:{",
"\t\t",
"\t},",
"\tcreated(){",
"\t\t",
"\t}",
"}",
"</script>",
"<style scoped>",
"</style>",
],
"prefix": "vuetpl",
"description": "Creates a new template."
}
Then, when you create a new .vue file, just type vuetpl and press tab to autocomplete, and you'll have this:
Of course, you can also use a Snippet Generator to make your own snippets.
This is being worked on now and is built-in to vscode v1.70 Insiders and may be in Stable v1.70 early August, 2022.
1. Make sure you haven't disabled this setting by setting it to hidden:
// Controls if the untitled text hint should be visible in the editor.
"workbench.editor.untitled.hint": "text", // "text" is the default
2. Make some snippets that will serve as templates for whatever languages you are interested in in a snippets file (here they are in a global snippets file):
"vue template": {
"isFileTemplate": true, // changing to this soon
"isTopLevel": true, // was this
"scope": "vue",
"prefix": "vueTemplate",
"body": [
"const a = 'vue template'"
],
"description": "vue template"
},
"javascript template": {
"isFileTemplate": true,
"scope": "javascript",
"prefix": "jsTemplate",
"body": [
"const a = 'javascript template'"
],
"description": "javascript template"
},
The isFileTemplate option is key here. Any snippet with this option will appear in the following workflows.
If you have the "scope": "someLangID here" set in the keybinding then vscode can and will automatically change the current editor's language to that language ID.
3. Create a new file:
a. with the command File: New Untitled File Ctrl+N
[the following option in the new file message start with snippet has been delayed and won't be in v1.70 Stable - the command SNippets: Populate From Snippet is working though.]
Then you will see the message at the top of the file as in this demo:
start with snippet
Clicking on that will show any snippets with that "isFileTemplate": true, set. Choosing one from the resulting QuickPick thaht opens up will input the snippet contents AND change the editor's language association to the scope value.
b. You can also modify an existing file to the snippet content and language by using the command (found in the Command Palette)
Snippets: Populate from Snippet
[This command workbench.action.populateFileFromSNippet does not have a default keybinding.]
As you can see in the demo, using this command will delete all the current contents of the file AND change the language association of that editor.
So making your initial snippets will probably be the hardest part, you might look into the snippet generator app.
The extension Auto Snippet does exactly that.
You only need to configure two things:
The snippet's name
A filename pattern or a language for when the snippet should be applied
Recommendation
The author has some very custom defaults, so as soon as you install it, modify its settings and remove those patterns that you won't need.
Otherwise, it will complain every time you create a file and doesn't find the snippet configured.
There is a pretty good plugin called "Snippet Creator" that makes creating snippets painless.
I wanted a quick "template" file that I could re-use. Copied the text, then used command "Create Snippet", and it was done in a couple of steps.
It could also be used to create the same Vue templates mentioned above. You can edit the snippet, insert your tab stops etc, just visit Code > Preferences > Configure User Snippets once created 🥳
I want a single key binding to perform 2+ actions. Is this possible?
I tried doing it the obvious way (by setting two shortcuts to use the same key binding), but it appears to only respect the most recently changed shortcut.
The awesome macros plugin might be the best option.
As an example, let's say you want cmd+\ to hide both the Activity Bar and the Sidebar.
Add the following to your user settings:
"macros": {
"minimalMode": [
"workbench.action.toggleActivityBarVisibility",
"workbench.action.toggleSidebarVisibility"
]
},
Add the following to your keybindings.json:
{
"key": "cmd+\\",
"command": "macros.minimalMode"
},
I am creating my own Visual Studio Code theme, and I want the links / URLs to have their own independent color in HTML and CSS. From what I have read it seems that this was once accomplished with detected-link, but should now use linkForeground. I have tried both in the theme.json file I created, but neither seems to work. Does anyone know how to customize link / URL syntax highlighting color in Visual Studio Code .json file?
This is what I tried...
{
"name": "goto-definition-link",
"scope": "linkForeground",
"settings": {
"foreground": "#4B83CD"
}
},
Here is one of the discussions that I am referencing above.
https://github.com/Microsoft/vscode/issues/18378
There are two parts to this: using syntax colors to set the color of links in the grammar and using workbench colors to set the color of a clickable link when the user hovers over it.
To set the syntax colors of a link, you need to determine a unique scope for the links and write a TextMate colorization rule that uses this scope. For example, using the Developer: Inspect TM Scope command in VS Code, I can see the css url() links have a scope of variable.parameter.url.css, so my theme would be:
{
"type": "dark",
"tokenColors": [
{
"scope": [
"variable.parameter.url.css",
],
"settings": {
"foreground": "#f0f"
}
}
}
}
The second one is easier; just use the editorLink.activeForeground color theme setting:
{
"type": "dark",
"colors": {
"editorLink.activeForeground": "#ff0",
...
},
"tokenColors": [ ... ]
}
This changes the color of the link when you hover over it. It cannot be changed per language.
Is it possible to customize context menu in Visual Studio Code ?
Currently it looks like this.
I need to add two more menu options to this.
Something like "Go Back" and "Go Forward".
Can this be done ?
Yes, you can can add menu items to the context menu by creating a personal extension for your own use. In your extension, in package.json, add a contributes.menus section. The text editor context menu is called editor/context.
(If you haven't developed an extension before, start with Microsoft's Your First Extension tutorial.)
It may help to look at another extension that adds items to the context menu. One (of many) extension that does this is Bookmarks, which adds three context menu entries. The relevant parts of its package.json are:
{
"name": "Bookmarks",
...
"contributes": {
...
"menus": {
...
"editor/context": [
{
"command": "bookmarks.toggle",
"group": "bookmarks",
"when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
},
{
"command": "bookmarks.jumpToNext",
"group": "bookmarks#1",
"when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
},
{
"command": "bookmarks.jumpToPrevious",
"group": "bookmarks#1",
"when": "editorTextFocus && config.bookmarks.showCommandsInContextMenu"
}
],
....
},
....
},
....
}
The command can be any command; it does not have to be one installed by your extension.
The API docs are a bit vague about the meaning of the group attribute:
Last, a group property defines sorting and grouping of menu items.
Its meaning is described more fully under Sorting of groups. A word like "bookmarks" establishes a group of menu entries separated from other groups by a horizontal rule, with groups ordered alphabetically, and the "#<number>" suffix controls ordering within each group: