I want to create a shortcut key for one line code in visual code . For example I want to use the key "F4" to paste "<p class='example _class'>" this code in the code editor or the key "F6" to paste "<a href= ''>" . Basically I want to create shortcut for some line of code, so that I don't need to copy these line again and again to repeat this line in my project.
After some research I got my answer,
On the keybindings.json file paste the below code:
{
"key": "F4",
"command": "type",
"args": {
"text": "<p class=\"example _class\">"
},
"when": "editorTextFocus"
},
I think the json code does not need any explanation. It is pretty much self explaining.
If you insert a snippet with the keybinding you don't have to select and replace the class name but make it a placeholder, use TAB to move from tab stop to tab stop
{
"key": "F4",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "<p class=\"${1:example _class}\">$0</p>"
}
}
Related
Having to do localization throughout the entire project.
I have to change every text in the project from
<p> Home </p>
to
<p> {t("Home")} </p>
Is there a way to bind a shortcut, such that on the selection of Home text and pressing the key binding with converting it to the required format.
Define the following keybinding:
{
"key": "ctrl+i l", // or other combo
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "{t(\"$TM_SELECTED_TEXT\")}"
}
}
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 was wondering how could I set a shortcut, for example CRTL+F for the keystrokes <- for a better experience programming with R language. Or even when I type - it prints out on my coding scripts the full <-.
I could set it in RStudio but couldn't find a way to do that in VS code. The shortcut options in VS Code are always linked to IDE commands, didn't help me at all.
Any ideas?
Or use this handy keyboard shortcut example with arguments from the doc pages
{
"key": "ctrl+f",
"command": "type",
"args": { "text": "<-" },
"when": "editorTextFocus && editorLangId == r"
},
You can also define a user snippet. For example, put this in your snippets\r.json file:
"assign": {
"prefix": "=",
"body": " <- ",
"description": "left arrow assignment"
}
Now, typing =Tab will insert <-.
Got it just by adding the below code to keybinding.json file:
// Place your key bindings in this file to override the defaults
[
{
"key": "oem_minus oem_minus",
"command": "type",
"args": {
"text": "<-"
},
"when": "editorTextFocus"
}
]
Worked perfectly. When I type -- it prints out <-.
I would like to comment only a portion of a line of code. So I would select the portion and then execute a macro that will insert a /* and */ before and after the selected portion respectively. How can this be done?
Try the Toggle Block Comment command (editor.action.blockComment)
Note that Toggle Block Comment is a language aware command, so it will use the correct comment block type for the current language. In html files for example, it uses <!-- and -->.
You would need to install macros vscode extension
Write the following code in the settings.json
"macros" : {
"commentPortion": [
"editor.action.clipboardCopyAction",
{
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "/*${TM_SELECTED_TEXT}*/ $0"
}
}
],
}
And then in keybindings.json add the following:
{
"key": "ctrl+shift+]",
"command": "macros.commentPortion",
"when": "editorTextFocus"
},
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>