In an extension I want to add a button to display in the VS code editor title menu bar when it opens a synapse XML document.In order to that, I added the following command in commands of package.json file,
{
"command": "webview.show",
"title": "Show Diagram",
"category": "Webview",
"icon": {
"light": "./resources/images/icons/design-view.svg",
"dark": "./resources/images/icons/design-view-inverse.svg"
}
}
and in the package.json file I added the following editor/title,
"menus": {
"editor/title": [
{
"when": "resourceLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
],
}
But when I run the extension and opens a synapse XML document, it will not showing the button in the editor title menu bar.
Further I followed following documentation also,
https://code.visualstudio.com/api/references/contribution-points#contributes.menus
How can I display the button in VS code editor title menu bar?
I added your command and menu entry to an extension I'm making and the button appears where it should (all be it without an image in my screenshot as I don't have the icon). In my screenshot it is the empty space on the left of the ying-yang button - the tooltip is visible though on mouse over. I just removed the "where" test so I would guess that resourceLangId is not what you think it is or maybe the icons path is wrong so it looks like it isn't there as in my screenshot
For anyone still having the same issue:
In my case, using the correct context name field (editorLangId) to match the language ID in the when clause of the command fixed the issue.
https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts
"menus": {
"editor/title": [
{
"when": "editorLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
]
}
Related
In VS Code, when the source control view is focused, I want to focus the first file in "staged Changes", navigate and focus between them, is there a keyboard shortcut to do this?
I want the behavior works like "Search: Focus Next Search Result，Search: Focus Previous Search Result". but in source view stage section
Here's a screenshot of what I'm talking about:
You can do this directly from anywhere in the scm view, but you will need a macro extension like Multi-Command. And this keybinding:
{
"key": "alt+u", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"list.focusFirst", // focuses the commit message input, as close as you can get
"list.focusDown",
"list.focusDown",
"list.focusDown",
"list.select" // add this to also open the scm diff
],
},
"when": "focusedView == workbench.scm"
}
When you are focused in the scm view you could go down/up a file and focus it with this keybinding:
{
"key": "alt+down", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"list.focusDown", // or "list.focusUp"
"list.select"
],
},
"when": "focusedView == workbench.scm"
}
To open the next item in the scm view and return focus to that scm view, try this keybinding:
{
"key": "alt+down", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"interval": 400, // need a delay
"sequence": [
"list.focusDown",
"list.select",
"workbench.action.focusSideBar",
],
},
"when": "focusedView == workbench.scm"
}
This is pretty easy and fast with regular keyboard navigation.
You can switch to the source control pane with the View: Show Source Control command, or the corresponding ctrl+shift+g shortcut. Or if it's already the current tab of the sidebar and the sidebar is not focused, focus it with ctrl+0.
Once you have focused on the source control view, just press up or down until you reach it.
If the listing is not focused yet, and something else like the commit message input or commit button is focused instead, just press tab or shift+tab until it is.
I already found that the "command": "editor.action.duplicateSelection"
will duplicate the selection right next to it.
I want to duplicate the selected text to a new line. The selection may not be the entire line.
If you are talking about a selection that is less than the entire line, there is no built-in way to duplicate selected text to the next line. It can be done with a macro extension which enables you to run multiple commands at once.
Using the macro extension multi-command try this keybinding (in your keybindings.json):
{
"key": "alt+i", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
"editor.action.clipboardPasteAction",
{ // to add text after the selection
"command": "type", // you could also put this before the paste command
"args": { "text": " myText here after paste " }
}
]
}
}
That will copy the selected text, insert a blank line after it and paste that text there. Demo:
Demo with adding static text to the duplicated text:
Click File > Preferences > Keyboard Shortcuts:
Look for the Copy Line Down keyboard shortcut.
My issue:
I would like to bind a few keyboard shortcuts to navigate to specific symbols in my currently open file within VS Code.
Example:
I want to navigate to the symbol <template> by pressing cmd+1.
I want to navigate to the symbol <script> by pressing cmd+2.
I want to navigate to the symbol <style> by pressing cmd+3.
By default, you can do that by pressing cmd+p and then in the palette typing #template which will jump to the template tag within the open file.
So a solution might look something like this in my keybinding.json:
{
"key": "cmd+1",
"command": "workbench.action.gotoSymbol",
"args": ["#template"],
}
However, the args part of this does not work. I'm wondering if anyone knows a good solution for setting up key bindings like this so I can navigate around my files with shortcuts.
Thanks in advance!
Try this:
{
"key": "cmd+1",
"command": "workbench.action.quickOpen",
"args": "#<template>",
},
The command workbench.action.gotoSymbol won't take an argument, but workbench.action.quickOpen will. I don't know why there is that difference, but as you know if you start the Quick Open Panel with # you get object references. And the rest of your text <template> for example will automatically be entered into the input box.
It will filter for those symbols but will not jump to the first one. If you want that additional functionality, you would have to consider a macro which would select the first entry.
There is an alternative that allows you to navigate to anything by using a matching regex. See the extension Select By which allows to jump to any string. For example (in settings.json):
"selectby.regexes": {
"goTo<template>": {
"moveby": "<template>",
}
}
and your keybinding (keybindings.json):
{
"key": "ctrl+1", // <template>`
"command": "moveby.regex",
"args": ["go<template>", "moveby", "next", "start", "wrap"],
// "when": "editorTextFocus && editorLangId == javascriptreact"
}
You can set it up to jump to the previous instance as well:
{
"key": "ctrl+alt+1", // previous <template>
"command": "moveby.regex",
"args": ["goTo<template>", "moveby", "prev", "start", "wrap"],
// "when": "editorTextFocus && editorLangId == javascriptreact"
}
either way it should now "wrap", it just depends on how many <templates> you have in the file and which direction you want to go to first.
I found the solution to my problem, which is pretty funny because it's an existing extension for VS Code that does exactly what I am looking for:
https://marketplace.visualstudio.com/items?itemName=andersonmfjr.vue-jumptotag
To bind the keyboard shortcuts in keybindings.json
{
"key": "cmd+1",
"command": "extension.jumptotemplate",
},
{
"key": "cmd+2",
"command": "extension.jumptoscript",
},
{
"key": "cmd+3",
"command": "extension.jumptostyle",
},
That does exactly what I was looking for.
I'm writing a custom editor (graphical editor) as a Visual Studio Code Extension, and want to show a context menu in a WebView when a given element is right clicked.
Any ideas?
You can check VSCode 1.70 (July 2022) which includes issue 54285 ("Contributed webview context menu action")
It is resolved by PR 154524:
Adds webview/context contribution
(Available today in VSCode insiders)
With these changes I was able to get modified version of GitLens to add custom menu items to a specific webview (e.g. the welcome view) with the following contribution:
"webview/context": [
{
"command": "gitlens.showSettingsPage",
"when": "webview == gitlens.welcome"
}
],
Which looks like:
When executed, the command callback gets an arg which looks like { webview: 'gitlens.welcome; } (where gitlens.welcome is the viewType/providedWebviewId of that webview)
With this contribution, extensions could then use their own context keys to hide and show the desired commands.
So, this PR adds:
I've added a new preventDefaultContextMenuItems property on WebviewPanelOptions and on the webviewOptions object we pass to registerWebviewViewProvider which allows a webview to opt-out of the default cut/copy/paste (or any future) menu items.
I've also provided 3 context keys for the context menu when clause:
webview — the extension provided id of the webview
for webview panels and custom editors it is the viewType
for webview views it is the view id
webviewItem — an optional value that an extension can provide in the DOM via a data-vscode-context-menu-item attribute, by searching for closest element to the element that triggered the context menu
webviewItemElement — an optional value that an extension can provide in the DOM via a data-vscode-context-menu-item-element attribute, by searching for closest element to the element that triggered the context menu (but only within the scope of the found item element
Here's an example using the GitLens Rebase Editor:
"webview/context": [
{
"command": "gitlens.rebase.help",
"when": "webview == gitlens.rebase",
"group": "9_gitlens#1"
},
{
"command": "gitlens.rebase.copySha",
"when": "webview == gitlens.rebase && webviewItem == commit && webviewItemElement == sha",
"group": "1_gitlens#1"
},
{
"command": "gitlens.rebase.copyMessage",
"when": "webview == gitlens.rebase && webviewItem == commit && webviewItemElement == message",
"group": "1_gitlens#1"
},
{
"command": "gitlens.rebase.showCommitDetails",
"when": "webview == gitlens.rebase && webviewItem == commit",
"group": "2_gitlens#1"
}
],
Here's the DOM -- I have:
data-vscode-context-menu-item="commit" on each of the commit rows, and
additional data-vscode-context-menu-item-element attrs on the message and
sha the with "message" and "sha" values respectively
Here's the context menus in action:
With the November 2016 (version 1.8) release of VSCode Snippet Variables are now supported, specifically TM_SELECTED_TEXT.
This makes me happy as I have used these heavily in both Sublime Text and TextMate.
I can't figure out how to get it to work in VSCode. I've created the snippet they use as an example:
"in quotes": {
"prefix": "inq",
"body": "'${TM_SELECTED_TEXT:${1:type_here}}'"
}
I then enter some text, highlight it and that's where things start to break.
The idea is highlight some text, run the snippet and then ${TM_SELECTED_TEXT:${1:type_here}} is replaced with the highlighted text. The problem I'm having is that to run the snippet you need to type the prefix value (in this case inq) to run the snippet which over-writes your highlighted text which messes everything up.
In Sublime/Textmate I launched the snippet from a keyboard combination which left my text highlighted.
Is there a way, in VSCode, to either make this work as is or launch the snippet from a key combination like was available in Sublime?
Coming in 1.49 (it is in the Insiders' Build as of this edit) your example will finally work as you expected. See merged pull request.
Vscode will now "remember" your selected text if any, and when you type your snippet prefix, insert it into the TM_SELECTED_TEXT variable even though you seemingly over-typed that selected text.
As of v1.20 this has become easier as a new variable $CLIPBOARD has been added, see new snippet variables. So there is no need to assign and run a shortcut - but you must copy the selection to clipboard CTRL-C.
Your example could now be:
"in quotes": {
"prefix": "inq",
"body": "'$CLIPBOARD:${1:type_here}'"
}
Note: $CLIPBOARD works. There's no need for the extra curly brackets {$CLIPBOARD}.
With the word highlighted, press F1 and run the command "Insert Snippet", then select your snippet on the list.
Also you can edit your keybindings by going to File>Preferences>Keyboard Shortcuts and add some shortcut to the "editor.action.showSnippets" command, like this:
{
"key": "ctrl+alt+s",
"command": "editor.action.showSnippets",
"when": "editorTextFocus"
}
https://github.com/Microsoft/vscode/issues/17780
as per this thread you can assign exact snippet to keybinding by providing args.
keybinding example for bootstrap media queries
{
"key": "ctrl+alt+b",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"name": "bsup"
}
},
{
"key": "ctrl+alt+shift+b",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"name": "bsup_copy"
}
},
snippet example
"bsup": {
"prefix": "bsup",
"body": [
"#include media-breakpoint-up(md){",
"\t${TM_SELECTED_TEXT}",
"}"
],
"description": "Bootstrap media up"
},
"bsup_copy": {
"prefix": "bsup_copy",
"body": [
"${1:${TM_SELECTED_TEXT}}",
"#include media-breakpoint-up(md){",
"\t${2:${TM_SELECTED_TEXT}}",
"}"
],
"description": "Bootstrap media up + copy selected text"
},
UPD: moreover - you can define snippet directly in keybindings.json which seems to be even more convenient for me in some cases
{
"key": "cmd+shift+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log('${TM_SELECTED_TEXT}', $TM_SELECTED_TEXT$1);"
}
}
using documentation from https://code.visualstudio.com/docs/editor/userdefinedsnippets i was able to customize snippets, i am using 'surround with' extension and can put my own snippet into settings.json as follows:
"html_h3-name": {
"label": "h3",
"description": "wrap by h3 with <a name=''>, top",
"snippet": "<h3><a name=\"${TM_SELECTED_TEXT/[\\s]/-/g}\"></a>$TM_SELECTED_TEXT\n\t<a class=\"small\" href=\"#top\">top</a>\n</h3>"
},
which takes highlighted code in VSCode and creates h3 header from it with a name link:
it converts 'aaa bbb ccc' to
<h3><a name="aaa-bbb-ccc"></a>aaa bbb ccc
<a class="small" href="#top">top</a>
</h3>