I am a huge Sublime Text user, and learned ways to improve my productivity using customizations in Sublime text. But as VScode is becoming popular day by day, wanted to check if there is any way which I can bind the shortcut keys to the custom actions.
For example, I select a word ABC in any file in VSCode and hit CTRL+B, and it places my own defined values around it like it should become
<b>ABC</b>
I had created the following snippet in Sublime Text, which when I wrote in Visual Studio Code - keybindings.json nothing worked.
{
"keys": [
"ctrl+b"
],
"command": "insert_snippet",
"args": {
"contents": "<b>${0:$SELECTION}</b>"
}
}
This will work in your keybindings.json:
{
"key": "ctrl+b",
"command": "editor.action.insertSnippet",
"when": "resourceExtname == .html", // this is optional
"args": {
"snippet": "<b>${TM_SELECTED_TEXT}</b>"
}
},
The optional when clause is if you want to limit the snippet's operation to .html files.
More general though is to use the emmet command which is built-in: Emmet: Wrap with Abbreviation in the command palette. Select your text, open the command palette, find that command and trigger it - type b or whatever your element is and it will wrap the selected text with the opening and closing elements.
[Note that there is a command workbench.action.toggleSidebarVisibility already bound to Ctrl-B, but the snippet above version seems to take precedence - meaning you lose the toggleSidebarVisibility keybinding functionality - that may be acceptable to you?]
Related
I'm looking for a way to fold all results in a VSCode search editor. (It's clear how to do this in the search explorer.)
I can easily fold individual results with cmd+opt+[ but I want to fold all of the results. I'd actually like to be able to have that be the default.
You can fold all the results by doing this:
Select all Ctrl+A
Command Palette: Create Manual Folding Range From Selection
That Manual Folding Range command has a default keybinding: Ctrl+K Ctrl+,
You could put those two commands into a macro if you wanted, see the macro extension multi-command.
I don't think there is any way to have the Search Editor default to all folded - unless you put however you open that into the macro as well.
Doing that using multi-command, make this keybinding:
{
"key": "ctrl+w", // whatever keybinding you want
"command": "extension.multiCommand.execute",
"args": {
"interval": 500, // you need some delay to open the editor first
"sequence": [
"search.action.openInEditor",
"editor.action.selectAll",
"editor.createFoldingRangeFromSelection"
]
},
"when": "hasSearchResult && searchViewletFocus"
}
I found the cmd+k, cmd+0 will fold all up to the first line, but then I can open enough to see what I need. Not ideal, but useable.
I'm currently using VSCode for Q# programming. This sometimes entails including simple qubit expressions in the comments for clarity. It is of course possible to just settle with using regular angle brackets (such as |00> or <00|), but it looks nicer using the appropriate Unicode characters (such as |00⟩ or ⟨00|). Copying and pasting these characters whenever needed is a bit cumbersome, so it would be nice to have key bindings in VSCode just for this purpose. Actually, I'd like to be able to configure VSCode for quick access to any selection of characters I might be interested at the moment.
VSCode customization supports a type command which does exactly that - types in its argument. In order to create an entry for a keybinding, open the command prompt (Ctrl+Shift+P or ⌘+Shift+P on Mac) and type Preferences: Open Keyboard Shortcuts (JSON) and insert entries of the form:
{
"key": "<key-binding>",
"command": "type",
"args": {
"text": "<character>"
}
}
where <key-binding> is the usual description of the keybinding and <character> is the desired character literal. So, for the bra-ket case above, my customization looks like this:
[
{
"key": "ctrl+shift+.",
"command": "type",
"args": {
"text": "⟩"
}
},
{
"key": "ctrl+shift+,",
"command": "type",
"args": {
"text": "⟨"
}
}
]
I'm trying to replace a structure like this:
testVars.bread.componentFlour
testVars.bread.componentWater
to something like this:
testVars.dough.flour
testVars.dough.water
this happens with multiple variable names; I want to remove the component and have the first letter converted to lowercase to match CamelCase.
What I tried doing was matching testVars.bread.component(.) replacing it with testVars.dough.\l$1.
According to regex documentation, that should convert my match to lowercase. However, VSCode wants to insert \l as text.
How do I get VSCode to convert my match to lowercase?
EDIT: To clarify, this is strictly for VSCode's implementation, not a regex question itself. Matching this group in notepad++ and replacing with testVars.dough.\l\1 does exactly what I want it to do.
NEW ANSWER: !! Those case modifiers like \l and \u are being added to the find/replace functionality in vscode (both in find within one file and search across multiple files [v1.49] - see https://github.com/microsoft/vscode/pull/105101) (see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_47.md#case-changing-in-regex-replace) - will be in v1.47 (find) and v1.49 (search across files).
So that your original thought to
Find : testVars.bread.component(.)
Replace : testVars.dough.\l$1
is now working.
For more on how the case modifiers work in vscode, see https://stackoverflow.com/a/62270300/836330
OLD ANSWER:
While you cannot replace with a lowercase identifier in vscode, you still have some of options.
Use a regex like (?<=testVars\.).*\.component(.*) so that testVars. is not captured - because you do not want to change its case.
Ctrl+Shift+L to select all your matches (same aseditor.action.selectHighlights).
Ctrl+Shift+P, type lowerand trigger that command (or make a keybinding for this unbound command).
Trigger your replaceAll
To speed that up you have two options. (1) Make a macro that would run steps 2, 3 and 4. Or (2) make a snippet that will transform your selections - effectively running steps 3 and 4 at once.
Snippet in your keybindings.json (not in a snippets file):
{
"key": "alt+m", // choose some keybinding
"command": "editor.action.insertSnippet",
"args": {
"snippet": "${TM_SELECTED_TEXT/.*\\.component(.*)/dough.${1:/downcase}/}"
},
},
and then Ctrl+Shift+L to select all, and alt+m to trigger the above insertSnippet.
Macro approach:
Using some macro extension, here multi-command, put this into your settings.json:
"multiCommand.commands": [
{
"command": "multiCommand.findReplaceLowercase",
"sequence": [
"editor.action.selectHighlights", {
"command": "editor.action.insertSnippet",
"args": {
"name": "replace and lowercase",
}
},
]
}
]
and a snippet, in one of your snippets files:
"replace and lowercase": { // this "label" is used in the macro
"prefix": "for",
"body": [
"${TM_SELECTED_TEXT/.*\\.component(.*)/dough.${1:/downcase}/}"
// "${TM_SELECTED_TEXT/(.*)/${1:/downcase}/}" // to downcase all selected text
],
"description": "replace selected text"
},
and a keybinding to trigger the macro:
{
"key": "alt+m", // choose some keybinding
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.findReplaceLowercase" },
}
In the demo I copy the find regex into the find widget (or just write it there, it doesn't matter how it gets there or where focus is) and then hit alt+m (the macro keybinding) and that is it.
Obviously, this looks like a lot of work but you could keep reusing the macro and snippet, transforming to the replace result you would like the next time. And there you can use /downcase, /upcase, /capitalize and /pascalcase all you want which you can't use in the replace field of the find/search widgets.
from other text editors I'm used to adding Markdown links by
selecting the word I want to be linked,
pressing cmd-K on my Mac's / iPad Pro's keyboard, which puts square brackets around the marked word, appends a pair of normal parenthesis () and places the cursor right in beetween those two parenthesis so that I can
just paste the URL I have in my clipboard into the right place by pressing cmd-V.
So, select -> cmd-K -> cmd-V is a nice and short sequence for adding links in a Markdown document and cmd-K has become some kind of pseudo standard for adding links in several writing apps.
However, in VSCode that's not possible. But I'd love to make it possible. Any ideas? cmd-K is (hard-wired?) bound to listen for a next key press.
But it doesn't have to be cmd-K. I can learn another keystroke. But I need to be able to put additional text (square brackets and parenthesis) into the text and move the cursor to the right position. How's that done?
Thanks so much!
This extension Markdown All In One looks like it does what you want in one step.
Paste link on selected text
Just select your link and hit Ctrl+V and it creates the link and inserts the clipboard link.
If for some reason you don't want to use this extension, it would be pretty easy to create a snippet to do what you want.
Adding another answer that doesn't use the extension Markdown All In One I mentioned in the other answer and because a couple of commenters requested a different way. #MarcoLackovic
First Method: keybinding in keybindings.json, then manually paste
{
"key": "alt+w", // use whatever keybinding you wish
"command": "editor.action.insertSnippet",
"args": {
"snippet": "[${TM_SELECTED_TEXT}]($0)"
},
"when": "editorHasSelection && editorLangId == markdown "
}
Select the link text and, trigger your keybinding - the cursor will be placed where you want it and paste.
Second Method: use a macro to insert the snippet and paste in one step
You will need a macro extension like multi-command to run multiple commands in series. Then this keybinding:
{
"key": "alt+w",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "[${TM_SELECTED_TEXT}]($0)"
}
},
"editor.action.clipboardPasteAction"
]
},
"when": "editorHasSelection && editorLangId == markdown "
}
Demo of second method:
I can't find any way to surround a selection with something in VS Code.
For example doing something like that : text => "text" just by selecting the word text and typing key "
Another example with the following text :
mon
tue
wed
thu
fri
sat
sun
By selecting all of theses words :
mon|
tue|
wed|
thu|
fri|
sat|
sun|
and typing " I would like to perform something like this :
"mon"
"tue"
"wed"
"thu"
"fri"
"sat"
"sun"
Selecting some text and pressing " already works in VSCode to surround a single item, and works for multi-line selections as well.
NOTE: this is language dependent. The language syntax must define opening and closing braces, e.g. quotes, braces, etc. So this will not work in a "plaintext" file, for example. Change your language mode with CTRL+SHIFT+P and type Change Language Mode ENTER and select something like JavaScript where this is supported.
What you are after though is not really that efficient like that. Your best bet is to use multi-cursors.
Place the cursor at the start of the first line, press CTRL+ALT+DOWN to add another cursor below on the next line. Keep doing that until you have a cursor in front of all your words.
Then just type " then END then " and all your lines are surrounded by quotes.
NB: To check if you have a key bound, and what it is, you can always press CTRL+SHIFT+P and type Add Cursor Below and if there's a keybinding it will show to the right of that text.
In VS Code hold Command + Shift + P
then write:
"> Preferences: Open Keyboard Shortcuts (JSON)"
In this area that you are allowed to modify, paste this inside the brackets:
{
"key": "ctrl+p",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "\"${TM_SELECTED_TEXT}\""
}
}
** note that in this example the key is set to Ctrl + p, you can change the key to whatever you prefer
Maybe you can try this extension, you can write your own custom wrappers:
https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround
A simple yet powerful extension to add wrapper templates around your code blocks.
Features
Supports multi selections
Fully customizable
Custom wrapper functions
You can assign shortcuts for each wrapper function separately
Nicely formated
Demo 1: Choosing wrapper function from quick pick menu
Demo 2: Wrapping multi selections
Using Yuri Aps' suggestion, I added the following JSON to keybindings.json. This provides the functionality Ronan Lamour requested for any file type, and without requiring an extension. It works for either single or multiple selections when using either single or double quotes. Coming from Sublime, this is helpful since it reproduces functionality Sublime provides natively.
{
"key": "'",
"command": "editor.action.insertSnippet",
"when": "editorHasSelection",
"args": {
"snippet": "'${TM_SELECTED_TEXT}'"
}
},
{
"key": "shift+'",
"command": "editor.action.insertSnippet",
"when": "editorHasSelection",
"args": {
"snippet": "\"${TM_SELECTED_TEXT}\""
}
},
I was coming from (neo)vim switching to VS Code, and was using Tim Pope's wonderful "vim-surround" plugin for vim before. I found a port of that plugin for VS Code. It's very useful, and incredibly efficient once you learn the shortcuts, in my opinion!
Links:
Original plugin by Tim Pope for vim
Port of plugin to VS Code
If you use vim or vim bindings in VS Code, please enjoy!
Edit: the VSCodeVim plugin includes the surround functionality automatically, so if you have that plugin installed, you don't really need the vscode-surround plugin.
Update 15-02-2022:
VS Code has introduced Surround with snippets for JS/TS natively.
It may not be totally related with the question but it may help someone who landed in this question with the intent of "surround with" in vs code.
This extension also exists if you want custom surround with text.
https://marketplace.visualstudio.com/items?itemName=sifue.surrounding.
I just installed it and got it working perfectly
Select the word you want to surround it with and enter Ctrl + Alt + T. Then just key in whatever key you want to surround it with.
A more generic solution: in keybindings.json:
{
"key": "alt+m",
"command": "editor.action.insertSnippet",
"when": "editorHasSelection",
"args": {
"snippet": "$1${TM_SELECTED_TEXT}$1$0"
}
}
Whatever you type after triggering the keybinding will be added to both ends of all selections.
Just tab to the end of the word(s) when you are done and, if you had multiple cursors Esc to remove extra cursors leaving just one.
Since GitHub supports math in Markdown now, I need to wrap my formulas with dollar signs:
$E = mc^2$
When I select a formula and press dollar sign $ on my keyboard I get my formula wrapped automatically. Here is one way to achieve it:
Open Keyboard Shortcuts menu:
Press on Open Keyboards Shortcuts (JSON) button:
In shortucts.json file, which opens, paste this snippet:
{
"key": "shift+4",
"command": "editor.action.insertSnippet",
"when": "editorHasSelection",
"args": {
"snippet": "$${TM_SELECTED_TEXT}$"
}
}