Is it possible to customize the location of the comment symbol ('#' when using Python) in VSCode?
For example, if my code is:
def my_func():
value = 1
and I press CMD-/ on line 2, I get:
def my_func():
# value = 1
I would prefer to get:
def my_func():
# value = 1
Is there a way to modify the default behavior?
VSCode: 1.67.1
MacOS: 12.3.1
There is no built-in way to do that. You will need an extension. See https://stackoverflow.com/a/59448448/836330 for a previous answer using a different extension. Here is a better answer using an extension I made in the meantime, Find and Transform. But there are restrictions as noted below.
Make this keybinding (in your keybindings.json):
{
"key": "alt+/", // unfortunately, this cannot be ctrl+/
"command": "findInCurrentFile",
"args": {
{
"key": "alt+r",
"command": "findInCurrentFile",
"args": {
"preCommands": [
"cursorEnd",
"cursorHomeSelect",
"cursorHomeSelect"
],
"replace": "${LINE_COMMENT}${TM_CURRENT_LINE}",
"restrictFind": "line" // works on multiple lines, see the demo
},
"when": "editorLangId == python" // if you want to limit it to a language
},
}
You can use whatever keybinding you want, but not Ctrl+/ because then toggle off will not work.
Ctrl+/ will work to toggle off comments if you do not use it in the keybinding above to add comments.
Note: For this to work well you need to disable the following setting (which I have shown disabled for a particular language, python):
"[python]": {
"editor.comments.insertSpace": false
}
That goes into your settings.json.
Related
I want to add increased number for multi selected caret in visual studio code.
now, When I type it write same words.
But I would like to add increased number by some shortkey so that I don't need to update each one manually.
Preferred result should be like this.
I want to know if this is possible in vs code.
Thanks
You do not need an extension for your use case, although that may make it easier. Here is how to do it without an extension.
Find: (?<=index:\s*)\d+ : this selects only the digits following index: .
Alt+Enter will select all those digits.
Now you can run a simple snippet to replace those digits with an increasing number that could be 0-based or 1-based. Make this keybinding to insert the snippet (in your keybindings.json):
{
"key": "alt+m", // whatever keybinding you want
"command": "editor.action.insertSnippet",
"args": {
"snippet": "$CURSOR_NUMBER" // this will increment and is 1-based
}
}
Trigger the above keybinding. Demo:
Here is an extension approach, using an extension I wrote, Find and Transform, that makes this easy. Make this keybinding:
{
"key": "alt+m", // whatever keybinding you want
"command": "findInCurrentFile",
"args": {
"find": "(?<=index:\\s*)\\d+", // same find regex
"replace": "${matchNumber}", // this variable will increase, 1-based
"isRegex": true
}
}
That combines the find and replace in one step.
Here is another method so you do not need to hardcode the starting point.
{
"key": "alt+m", // whatever keybinding you want
"command": "findInCurrentFile",
"args": {
"preCommands": [
"editor.action.addSelectionToNextFindMatch",
"editor.action.clipboardCopyAction"
],
"find": "(?<=index:\\s*)\\d+",
"replace": [
"$${",
// whatever math you want to do here
"return Number(${CLIPBOARD}) + ${matchIndex};",
"}$$",
],
"isRegex": true,
"postCommands": "cancelSelection"
}
}
Put the cursor next to or select the number you want as the starting point. The number could be anywhere in the document actually.
You can use the extension Regex Text Generator
Define the following key binding
{
"key": "ctrl+shift+f9", // or any other key combo
"when": "editorTextFocus",
"command": "regexTextGen.generateText",
"args": {
"generatorRegex" : "{{=i+1}}"
}
}
place the multi cursors after index:
press the key combo
accept or modify the inputs
look at the preview, press Enter if you like it, Esc to abort
You can do it with Increment Selection or Text Pastry
I'd like to add in custom keyboard shortcuts - rather than just remapping existing key bindings. Is this possible?
The idea is to map a shortcut that will allow me to include an easily identifiable comment header to help index my projects - in this format:
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
Here is a snippet (which is triggered by typing cHeader):
"Custom Header": {
"prefix": ["cHeader"],
"body": [
"/*---------------------------------------------------------------",
"# $1",
"---------------------------------------------------------------*/"
]
}
You can make that to whatever length you want. For more complicated situations, see https://stackoverflow.com/a/56874352/836330 or https://stackoverflow.com/a/58722958/836330.
If you want to set a keybinding to that, use this:
{
"key": "ctrl+alt+r", // whatever you want as a keybinding
"command": "editor.action.insertSnippet",
"args": {
"name": "Custom Header" // name from your snippet above
},
"when": "editorTextFocus"
}
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 know there is a shortcut for comment and uncomment code block (SHIFT + ALT + A), but is there a way to quickly select (or even remove without select) block comment without using mouse or keyboard to select and press the delete/backspace button? For example:
/*
This is a large block of code with at least 50 lines of code!
:
:
*/
Is there a keyboard shortcut where I can place my cursor anywhere in the block comment and remove it in just a few keystrokes? Thanks!
You can set a macro to do this pretty easily.
First, use the excellent Select By extension (#rioV8) to select the text between and including the block comment markers /* and */. Put his into your settings:
"selectby.regexes": {
"BlockCommentSelect": {
"backward": "\/\\*",
"forward": "\\*\/",
"forwardInclude": true,
"backwardInclude": true,
"showSelection": true
}
},
You can use that with a keybinding like:
{
"key": "alt+s", // whatever keybinding you wish
"command": "selectby.regex",
"args": ["BlockCommentSelect"],
"when": "editorTextFocus"
},
You could stop here and use your keybinding to select the text and then Shift+Alt+A to toggle off the block comment.
Or you could add the selectby.regex1 to a macro and do it the selection and toggling off in one step. Here using the macro extension multi-command put this into your settings as well as the above selectby.regexes setting:
"multiCommand.commands": [
{
"command": "multiCommand.BlockCommentOff",
"sequence": [
{
"command": "selectby.regex",
"args": ["BlockCommentSelect"]
},
"editor.action.blockComment"
]
},
]
and then a keybinding to trigger that macro (in your keybindings.json):
{
"key": "shift+alt+A", // trigger the macro with whatever keybinding if you wish
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.BlockCommentOff" },
"when": "editorTextFocus && !editorHasSelection"
},
Here I used Shift+Alt+A to trigger the macro. And I used the when clause !editorHasSelection because if you have a selection maybe you want to block comment only that selection (inside another block comment!!).
Demos: (1) Just the first method where selectby selects your text and you manually toggle it off, and then (2) using the macro version to do it in one step.
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>