How to switch text case in visual studio code - visual-studio-code

How does one switch the case of highlighted text in Visual Studio Code? VS allows this via CTRL+SHIFT+U and CTRL+U.
Is there a command binding that I can set up to do this, or is it by default some other key combination?

Echoing justanotherdev's comment:
Mind-blowing and useful:
Command Palette: CTRL + SHIFT + p (Mac: CMD + SHIFT + p)
type >transform pick upper/lower case and press enter

Quoted from this post:
The question is about how to make CTRL+SHIFT+U work in Visual Studio
Code. Here is how to do it. (Version 1.8.1 or above). You can also choose a different key combination.
File-> Preferences -> Keyboard Shortcuts.
An editor will appear with keybindings.json file. Place the following
JSON in there and save.
[
{
"key": "ctrl+shift+u",
"command": "editor.action.transformToUppercase",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+l",
"command": "editor.action.transformToLowercase",
"when": "editorTextFocus"
}
]
Now CTRL+SHIFT+U will capitalise selected text, even if multi line. In
the same way, CTRL+SHIFT+L will make selected text lowercase.
These commands are built into VS Code, and no extensions are required
to make them work.

I've written a Visual Studio Code extension for changing case (not only upper case, many other options): https://github.com/wmaurer/vscode-change-case
To map the upper case command to a keybinding (e.g. Ctrl+T U), click File -> Preferences -> Keyboard shortcuts, and insert the following into the json config:
{
"key": "ctrl+t u",
"command": "extension.changeCase.upper",
"when": "editorTextFocus"
}
EDIT:
With the November 2016 (release notes) update of VSCode, there is built-in support for converting to upper case and lower case via the commands editor.action.transformToUppercase and editor.action.transformToLowercase. These don't have default keybindings.
The change-case extension is still useful for other text transformations, e.g. camelCase, PascalCase, snake-case, etc.

To have in Visual Studio Code what you can do in Sublime Text ( CTRL+K CTRL+U and CTRL+K CTRL+L ) you could do this:
Open "Keyboard Shortcuts" with click on "File -> Preferences -> Keyboard Shortcuts"
Click on "keybindings.json" link which appears under "Search keybindings" field
Between the [] brackets add:
{
"key": "ctrl+k ctrl+u",
"command": "editor.action.transformToUppercase",
"when": "editorTextFocus"
},
{
"key": "ctrl+k ctrl+l",
"command": "editor.action.transformToLowercase",
"when": "editorTextFocus"
}
Save and close "keybindings.json"
Another way:
Microsoft released "Sublime Text Keymap and Settings Importer", an extension which imports keybindings and settings from Sublime Text to VS Code.
- https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

For those who fear to mess anything up in your vscode json settings this is pretty easy to follow.
Open "File -> Preferences -> Keyboard Shortcuts"
or "Code -> Preferences -> Keyboard Shortcuts" for Mac Users
In the search bar type transform.
By default you will not have anything under Keybinding. Now double-click on Transform to Lowercase or Transform to Uppercase.
Press your desired combination of keys to set your keybinding. In this case if copying off of Sublime i will press ctrl+shift+u for uppercase or ctrl+shift+l for lowercase.
Press Enter on your keyboard to save and exit. Do same for the other option.
Enjoy KEYBINDING

Now an uppercase and lowercase switch can be done simultaneously in the selected strings via a regular expression replacement (regex, CtrlH + AltR), according to v1.47.3 June 2020 release:
This is done through 4 "Single character" character classes (Perl documentation), namely, for the matched group following it:
\l <=> [[:lower:]]: first character becomes lowercase
\u <=> [[:upper:]]: first character becomes uppercase
\L <=> [^[:lower:]]: all characters become lowercase
\U <=> [^[:upper:]]: all characters become uppercase
$0 matches all selected groups, while $1 matches the 1st group, $2 the 2nd one, etc.
Hit the Match Case button at the left of the search bar (or AltC) and, borrowing some examples from an old Sublime Text answer, now this is possible:
Capitalize words
Find: (\s)([a-z]) (\s matches spaces and new lines, i.e. " venuS" => " VenuS")
Replace: $1\u$2
Uncapitalize words
Find: (\s)([A-Z])
Replace: $1\l$2
Remove a single camel case (e.g. cAmelCAse => camelcAse => camelcase)
Find: ([a-z])([A-Z])
Replace: $1\l$2
Lowercase all from an uppercase letter within words (e.g. LowerCASe => Lowercase)
Find: (\w)([A-Z]+)
Replace: $1\L$2
Alternate Replace: \L$0
Uppercase all from a lowercase letter within words (e.g. upperCASe => uPPERCASE)
Find: (\w)([A-Z]+)
Replace: $1\U$2
Uppercase previous (e.g. upperCase => UPPERCase)
Find: (\w+)([A-Z])
Replace: \U$1$2
Lowercase previous (e.g. LOWERCase => lowerCase)
Find: (\w+)([A-Z])
Replace: \L$1$2
Uppercase the rest (e.g. upperCase => upperCASE)
Find: ([A-Z])(\w+)
Replace: $1\U$2
Lowercase the rest (e.g. lOWERCASE => lOwercase)
Find: ([A-Z])(\w+)
Replace: $1\L$2
Shift-right-uppercase (e.g. Case => cAse => caSe => casE)
Find: ([a-z\s])([A-Z])(\w)
Replace: $1\l$2\u$3
Shift-left-uppercase (e.g. CasE => CaSe => CAse => Case)
Find: (\w)([A-Z])([a-z\s])
Replace: \u$1\l$2$3

Use the shortcut Ctrl + Shift + P to open the command palette prompt.
In the command, palette start typing the text casing you wish to transform e.g lowercase or uppercase then select the appropriate option that you are presented as shown in the figure below.

I think this is a feature currently missing right now.
I noticed when I was making a guide for the keyboard shortcut differences between it and Sublime.
It's a new editor though, I wouldn't be surprised if they added it back in a new version.
Source: https://code.visualstudio.com/Docs/customization

Related

Select the current word in VSCode when dots or hyphens are present?

How do I select the following words in VSCode:
button-color or button.color ?
Ctrl-D doesn't work, it just selects the portion before/after the . or -. Ctrl-W also doesn't work even after I changed its defautl setting of closing the editor/open tab.
You can also change your Editor: Word Separators setting. Remove the . and - characters and it will work as you want. Just delete those characters from the list shown in the setting.
You can use the extension Select By.
Edit you keybindings.json
You can define or redefine the Ctrl+D with
{
"key": "ctrl+shift+d", // or any other combo
"when": "editorTextFocus",
"command": "selectby.regex",
"args": {
"surround": "[-.a-zA-Z0-9]+"
}
}

How to make ctrl word end or start recognize underscore

In vscode, ctrl + arrow will not stop at an underscore. Is there any way to change this behaviour, or is there a shortcut to select characters between two underscores?
(I have searched through available shortcuts and extensions but could not find any)
Thanks!
If you add the underscore to your wordSeparators in the setting Editor: Word Separators, then
Ctrl+rightArrow : move to the next word separator,
followed by another rightArrow to move after that underscore, then
Ctrl+Shift+rightArrow will select all word characters up to the next word separator, which might or might not be the next underscore - depends on your code.
You can use the extension Select By.
With a regular expression you can specify what you recognize as a word separator. Use the moveby.regex command. And then redefine the key binding for Ctrl+ArrowRight
To select some text based on regular expressions use command selectby.regex:
Add to your settings.json
"selectby.regexes": {
"selectUnderscores": {
"surround": "_[^_]*_"
}
}
And define a keybinding:
{
"key": "ctrl+f10", // or any other key combo
"when": "editorTextFocus",
"command": "selectby.regex",
"args": ["selectUnderscores"]
}

how to select real numbers by double clicking in VSCode?

because . is a word separator, a real number like 0.1 will be selected only 0 or 1.
but if I remove . from word separators, the whole method call such as a.b or a.b.c will be selected, rather than a, b or c selected.
furthermore, ' is also a possible separator between the digits, which can not be selected correctly as well.
so is there any extension that can solve this problem?
With the extension Select By v0.10.0 you can select the text surrounding the current selection described with a regular expression.
If you add the following to your settings
"selectby.regexes": {
"selectFloat": {
"surround": "[-+]?\\d+(\\.\\d+)?([eE][-+]?\\d+)?[fF]?"
}
}
Place the cursor somewhere inside the number and execute the command Select text range based on regex and select the option selectFloat from the QuickPick list.
You can add a keybinding if needed
{
"key": "ctrl+shift+f", // any key combo you like
"when": "editorTextFocus",
"command": "selectby.regex",
"args": ["selectFloat"]
}
This extension Quick and Simple Text Selection allows for selecting of everything within single quotes, double quotes, backticks, etc., although it requires keyboard shortcuts.

Regex in VSCode: case conversion in replace, modifiers \l, \L, \U, \u not working

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.

Visual Studio Code Surround With

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}$"
}
}