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:
Related
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.
I am creating some snippets to .tex files. However, I would like some of these snippets to appear only if my document is blank/empty.
It is possible to create a conditional to check it? It would be something like that:
"Example": {
"prefix": "ex",
"body": [
"Just one example"
],
"description": "Example",
"conditional": if-is-a-blank-file
}
Obviously, "conditional" is just a pretend. Thanks in advance.
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:
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.