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"
},
Related
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 really like the V.S. Code theme, Abyss. On occasion I find that the theme makes my code difficult to read, the text rendered in the editor will look like it is blending into the background, therefore; I thought changing individual syntax color would be a good solution.
I want to be able to adjust a couple of color-tokens, while leaving the rest of the syntax unchanged. How can I select, and change the properties of color tokens, without impacting any other parts of the theme that's currently set in the editor?
I want to use the code syntax color of the GitHub dark default theme with the Abyss theme on the rest of UI.
I found a site (click to see) that suggests changing the syntax colors with the editor.tokenColorCustomizations property.
I am not able to understand that how can I copy the color configuration from GiHub dark default to the Abyss theme.
V.S. Code users have the ability to style the syntax that is displayed in the editor, as well as the ability to style the editor its self — this includes the workbench, and all off the items in the workbench. To start styling the workbench, or syntax in the editor, you must first add the following JSON properties to either your user-scoped settings.json file, or by adding it to a workspace-scoped settings.json.
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
Example of a properly configured settings.json file:
// "./.vscode/settings.json"
{
"workbench.colorCustomizations": {
"editor.background": "#08182F",
"sideBar.background": "#00132D",
"panel.background": "#00132D",
"activityBar.background": "#002040",
"editorGroupHeader.tabsBackground": "#00132D",
"tab.inactiveBackground": "#00132D",
"tab.activeBackground": "#003054",
"tab.activeBorder": "#003054",
"breadcrumb.background": "#003054",
"statusBar.background": "#005280",
"sideBar.border": "#103050",
"titleBar.border": "#103050",
"statusBar.border": "#103050",
"menu.border": "#103050",
"contrastBorder": "#103050",
"panel.border": "#103050",
"editorRuler.foreground": "#103050",
"tab.border": "#103050",
"tab.lastPinnedBorder": "#103050",
"activityBar.border": "#103050",
},
"editor.tokenColorCustomizations": [
{
"scope": "punctuation",
"settings": {
"foreground": "#C4C4C4",
"fontStyle": ""
}
},
{
"scope": "comment",
"settings": {
"foreground": "#246488",
"fontStyle": ""
}
},
{
"scope": "string",
"settings": {
"foreground": "#98DAF4",
"fontStyle": ""
}
},
]
}
There are many more properties that can be used to style your editor and syntax. A good resource to refer to is this template, its from the YO CODE generator, and it is what several theme designers use as a starting point when creating a new theme.
Theme Template (e.g. you don't have to make a theme to use the properties).
The most useful tool at your disposal is when writing theme properties — just like in the example above — is VSCodes suggestion widget. The suggestion widget is most often used to auto complete code, however, its usefulness extends much further than finishing a line of text for you. If you type, "background", while you are focused inside of one of the colors, or tokenColors, properties a whole list of available background properties will be available to choose from, and you are not limited to just background properties, the suggestion widget will work for finding borders, foregrounds, icons, buttons, inputs, bars, highlights and a whole lot more
Perhaps the best resource to read would be the VSCode Contributed Page on Color-Themes
EDIT: If you download the GitHub theme, you can find the theme's JSON file, which is the source code for the "Dark GitHub Theme" in the following location:
$HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json
When ever you have a theme's source JSON Document, you can copy and paste individual properties from the theme you located, into your ./.vscode/settings.json file using the properties:
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
NOTE: It takes some practice, and some reading to get good at creating themes, or even just configuring your current theme to customize it a bit like your doing now.
ADDITIONAL HELP
I think it might help if I explain what it is your doing.
The workspace settings.json file, located in the root of each project...
"./.vscode/settings.json"
...takes precedence over all other configuration files, therefore, when a setting, or property is being configured in two files, and one of the files is "./.vscode/settings.json" then the configuration set inside "./.vscode/settings.json" will win-out the configuration in the other file, because "./.vscode/settings.json" overrides any configurations it holds, that are also held somewhere else. (I Hope that makes sense)...
Next to the workspace "settings.json" file, is the users settings.json file, which is located at:
"$HOME/.config/Code/User/settings.json"
So basically all you need to know at this point is your settings.json files are the word of the land, everything else is overridden. This is very important, because when you use the settings.json files to set color-token properties to highlight some syntax that is being colored by a theme, and your recoloring it because you don't like it, what you are doing, is overriding the theme's JSON file located in the themes extension directory # $HOME/.vscode/extensions. If you don't set a property in a valid settings.json file, then the property will remain unchanged. This lets you select and choose which properties to change, by overriding the properties you don't like. And as I have stated in the comments and above, these are the properties you will use to preform the overrides.
"colors":{ /* properties here */ }
"tokenColors":[ /* properties here */ ]
Rather than trying to copy and paste entire themes, just try to change a single element. Once you succeed at changing one element, then you can try changing several in unison.
ctrl+shift+p =>preferences:color theme==> select Dark+(default dark)
I'm creating a user snippet in VSCode for my react function component boilerplate with import styles from './FileName.module.scss' and I'm wondering if it's possible to create that FileName.module.scss either upon creating a Filename.tsx file or running that code snippet
You can use the command htmlRelatedLinks.openFile.
You can use the command in a keybinding or give it a name using multi-command.
Add this to your settings.json (global or workspace)
"multiCommand.commands": [
{
"command": "multiCommand.createModuleSCCS",
"sequence": [
{ "command": "htmlRelatedLinks.openFile",
"args": {
"file": "${fileDirname}/${fileBasenameNoExtension}.module.sccs",
"method": "vscode.open"
}
]
}
}
Edit
Or you can use the Related Links view from the extension HTML Related Links
Add this to your settings.json:
"html-related-links.include": {
"typescript": [
"import .+? from '([^']+)'"
]
}
You might need to change the languageId as used for .tsx files.
In the Related Links view (Explorer Bar) you can click on the Open File or Create File icon.
Below I created a snippet that I was going to use in a styled component. The snippet responds to the listed prefix as expected as long as I do not use the snippet inside of a styled component. My question is if there is something that I need to include in the body of my snippet to be able to use the snippet regardless of if it is between template tags or not?
User Created Snippet:
{
"React Theme": {
"scope": "javascript,typescript,jsx",
"prefix": "theme",
"body": [
"${props => props.theme.${1:element}}",
],
"description": "React theme"
}
}
Short Clip of Behavior in editor
It may be because your scope language mode should be javascriptreact instead of jsx:
"scope": "javascript,typescript,javascriptreact",
Click on the file's language in the lower right corner and you will open a panel with all supported language modes with the proper spelling usage in parentheses - like Javascript React (javascriptreact) use that part in parentheses in settings or snippets that require a language mode.
Also put this into your settings:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the important one for you!!
},
so snippets get triggered in a template string.
Try using a different prefix than theme, does that conflict with something in an extension?
Works fine for me:
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: