Delete whitespace in Visual Studio Code in arbitrary selection (aka join words) (not trim trailing whitespace) - visual-studio-code

It seems like this should be a simple question, but I can't figure out how to delete all the whitespace within an arbitrary selection in Visual Studio Code (another way of saying this is to join all characters within a selection).
Note: I'm not asking how to trim trailing whitespace although this function could be used to manually to that.
It seems like there should be a built in way to do this, but if there isn't can someone point me to an extension that will do this?
I wasn't able to find one yet.

You can do it fairly easily without an extension.
Copy the selection
Ctrl + N (opens new unnamed blank document)
Paste
Ctrl + H (replace dialog), space, Ctrl + Alt + Enter (replace-all)
Now copy the update string to where you want it, and close the document.

Here's an extension (remove-whitespace-aka-join-words) I built to do just this:
https://marketplace.visualstudio.com/items?itemName=tnrich.remove-whitespace-aka-join-words

Just adding this here for 2022. I use one of these two methods. The first I don't have to remember the Regular Expression formula:
Method 1:
Sometimes this method will strip all spaces in your code (which isn't intended). If that occurs, try the next method. I often try this method first.
Select an empty space, and push CTRL + F, or Apple key + F on mac. This will highlight all matching characters, spaces.
Push the Replace All button to replace them all with nothing.
Hit CTRL + SHIFT + P' or Apple key + Shift + P', and select Format Document.
Method 2:
Found here: https://www.trainingdragon.co.uk/blog/how-to-remove-empty-lines-in-visual-studio-code/
Push CTRL + F, or Apple key + F on mac. Select the Use Regular Expression button, or push Apple key + option + R to toggle it on/off.
Add ^(\s)*$\n to the find input box.
Push the Replace All button to replace them all.

Depending on your selection you might be able by simply
Select the first space
Ctrl+D to select the next space, and repeat for all your spaces
Delete
Here is a technique that could be of more general use. Make a keybinding like so:
{
"key": "shift+alt+y", // or whatever keybinding you want
"command": "editor.action.insertSnippet",
"args": {
"snippet": "${TM_SELECTED_TEXT/\\s//g}" // replace spaces with nothing
},
"when": "editorTextFocus && editorHasSelection"
},
Then select your text and trigger this command. [Or make it a snippet and trigger it through the command palette Insert Snippet command.]
This could be modified to use for many things very easily - in part because often the regex will be quite simple as it will operate within already selected text.
You can also just do a Find/Replace easily:
Find: just a space
Replace: with nothing
Make your selection
Enable the Find in Selection option - the "hamburger-like icon" to the right

Related

Shortcut key to jump to start of entire string in VSCode

What keyboard shortcut lets you go to the start of a string? I need this for emails. When i use CTRL + back arrow it jumps to the dot and # sign, i have a block of strings with emails at the end, i want to select only the email by going to the end of the string but as some people have firstname.lastname#something.com and flastname#something.com the cursors dont line up when i use CTRL + back arrow.
I cant find any specific shortcuts which would help in this situation.
thanks!
You can use the extension Select By
You can use the:
forward - backward
surround
Add this to your settings:
"selectby.regexes": {
"email": {
"surround": "[-.a-zA-Z0-9]+#[-.a-zA-Z0-9]+"
}
}
You can call the select with a command or define a keybinding, see the doc page
There are no built-in commands that will do what you want. You will need an extension. I wrote such an extension: Jump and select.
With this setting (in your settings.json):
"jump-and-select.putCursorBackward": "afterCharacter" // default is beforeCharacter
and the default keybinding for jumping backward and selecting Shift+Alt+B it is easy to select everything from your cursor to some preceding character. Just trigger that keybinding and type the character to select backward to, in your case a Space. As you can see in the demo, it works with multiple or single cursors.

Is there a way to make VSCode Intellisense suggestions end outside the semicolon?

Intellisense suggestions are handy because I'm lazy, but any time I hit tab/enter to select one, it ends inside the ;. So then I have to arrow right and manually add a new line. Is there a setting or extension that autocompletes to outside the ; and optionally adds new line? or even just complete outside the semicolon. It's kind of cumbersome when writing many CSS rules to have to arrow right in between every line.
Vscodes native way to add a new line anywhere on a line is CTRL + Enter
You can add a new line above at any time using CTRL + SHIFT + Enter
You can try:
"editor.acceptSuggestionOnCommitCharacter": true,
Controls whether suggestions should be accepted on commit characters. For example, in JavaScript, the semi-colon (;) can be a commit character that accepts a suggestion and types that character

Select all occurrences of selected word in VSCode

Are there any trick or extension to select all instances of selected word in visual studio code, to facilitate editing or deleting those instances without search and replace, like ِAlt+F3 in sublime text
Select All Occurrences of Find Match editor.action.selectHighlights.
Ctrl+Shift+L
Cmd+Shift+L or Cmd+Ctrl+G on Mac
According to Key Bindings for Visual Studio Code there's:
Ctrl+Shift+L to select all occurrences of current selection
and
Ctrl+F2 to select all occurrences of current word
You can view the currently active keyboard shortcuts in VS Code in the Command Palette (View -> Command Palette) or in the Keyboard Shortcuts editor (File > Preferences > Keyboard Shortcuts).
What if you want to select just a few?
No problem, first:
Ctrl+F find the letters by typing them
ESC to quit searching
(you need to do this even when using
Ctrl+Shift+L
to select all occurences)
OR
just select those letters with your mouse or keyboard
(Shift+arrows)
Now that the mouse cursor is blinking on your first selection,
using a few more Key Bindings (thanks for the ref j08691)
you may:
Ctrl+D select (add) the next occurrence
Ctrl+K+Ctrl+D skip
the current/latest occurrence and add the next occurrence
Ctrl+U undo the latest cursor operation
on Mac:
select all matches: Command + Shift + L
but if you just want to select another match up coming next: Command + D
If you want to do one by one then this is what you can do:
Select a word
Press ctrl + d (in windows).
This will help to select words one by one.
On Ubuntu:
Ctrl + F2 will select all occurrences immediately.
Ctrl + D will select occurrences one by one.
In my MacOS case for some reason Cmd+Shift+L is not working while pressing the short cut on the keyboard (although it work just fine while clicking on this option in menu: Selection -> Select All Occurences). So for me pressing Cmd+FN+F2 did the trick (FN is for enabling "F2" obviously).
Btw, if you forget this shortcut just do right-click on the selection and see "Change All Occurrences" option
Ctrl+Shift+L to select all occurrences of current selection.
Several options have been listed, but a couple are missing. Its possible to use the rename and refactoring tools, for not just selecting all, but making specific changes, after everything has been selected. I am going to try and bundle all answers I feel are relevant together, and add two more that, not only get the job done, but are really great tools for making single changes over multiple occurrences of the same code.
1. Select All Matches
To use multiple cursors to select all matches, you can use 1 of 2 keybindings. Both keybindings preform the same functionality, so in other words, 2 keybindings, 1 vscode command. The keybindings are as follows.
1. CTRL + F2
2. CTRL + SHIFT + L
Default Keybinding
{
"key": "ctrl+f2",
"command": "editor.action.changeAll",
"when": "editorTextFocus && !editorReadonly"
}
// You can view/customize VSCode keybindings by pressing F1 and typing Keybindings
2. Select Next Match
You can Select Next Match by using the keybinding below. This is good for selecting all occurrences within a specific vicinity.
CTRL + D
Default Keybinding
{
"key": "ctrl+d",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
}
SIDE NOTE
If you press the keybinding CTRL + K before pressing CTRL + D, instead of selecting the next instance, it will move you to the next instance, and target it with your cursor.
Default Keybinding
3. Rename
This one hasn't been mentioned yet, but this one is what you would except when doing a refactor in a traditional IDE, like Visual Studio 2022, or JetBrains: IntelliJ.
When you use this keybinding, it attempts to solve some of the problems that are incurred when using the other options listed above. The other options are overly greedy sometimes, and select parts of words that you didn't want to select, and if your not careful, you can delete quite a bit of code, resulting in messy situation. If you didn't notice that you screwed up right away, you end up saving, or working for a long while before having to reset everything, and you end up loosing a lot of work & time.
F2 attempts to solve this problem by implementing logic under the hood (IDK if its an algorithm or what it is) but it feels very much like refactor in Visual Studio. It only selects specific cases that you would want to target. So if a varable is named foo, is won't select foo from a var named fooFoo. It also won't select foo from a comment.
F2
{
"key": "f2",
"command": "editor.action.rename",
"when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
}
4. Find
This one I will keep short and sweet, but find will iterate through ever occurrence of a pattern that you type into the editor-widget.
Press CTRL + F then type what you want to select. Keep pressing ENTER until you find it.
5. The Best For Last
There is not one method for selecting all occurrences that is the best every time, that's why there are several different methods for doing it, however, there are some methods that are generally more useful than others. This feature, as far as I know, is unique to VS Code, and I use it all the time when working with large JSON files, and Large Code Bases (like an Open Source PR).
VS Code has its own search editor, its a special editor. You can open the search editor by pressing on the Magnifying Glass Icon on the Activity-bar. Type into the search editors side bar text-input what it is you want to select, then press ENTER. It will return all the results in the sidebar. You can use the lower text input, to replace all of the results with what ever you like. You can also click OPEN IN THE EDITOR (it looks like a link) and it will reproduce everything you searched for in a new document, that is opened to the side. From there you can manipulate it, and add it back to the document. I've already written enough for one answer, so I am not going to go to deep into every thing it can do, but this not only selects everything, it also extracts it, replaces it, lets you nit-pick exactly what it means to select "all" of a specific occurrence. It's a great tool for making a single change in a recursive fashion.
This seems an old question, but it worth an answer.
There is - besides the accepted answer - a fancy shortcut to do this, just select the desired word and press Ctrl + D as many times as desired, each press will select an exact occurrence in the editor, after all occurrences are selected, just type the replacement and all the occurrences will be replaced as you type.
Ctrl + F2 works for me in Windows 10.
Ctrl + Shift + L starts performance logging
I needed to extract all the matched search lines (using regex) in a file
Ctrl+F Open find. Select regex icon and enter search pattern
(optional) Enable select highlights by opening settings and search for selectHighlights (Ctrl+,, selectHighlights)
Ctrl+L Select all search items
Ctrl+C Copy all selected lines
Ctrl+N Open new document
Ctrl+V Paste all searched lines.
I had another application, called Loom, running in the background on my Mac which was taking over my keyboard bindings.
Cmd+Shift+L
It was just random that I figured out it was preventing the keyboard bindings from reaching VS Code. I tried to turn off applications that I had open one by one. Not the best approach, but it worked.
Additionally to unselect use
Cntrl + U

Selecting block of code in Visual Studio Code

Is there a keyboard shortcut or an extension that would allow me to select a block of code?
I'd like to select everything between curly braces, between HTML tags, etc.
Use Alt + Shift + → to expand the selection between braces or tags.
Use Alt + Shift + ← to shrink the selection between braces or tags.
Here is the Microsoft Visual C++ shortcuts cheatsheet that might help you.
Update 2019/3: this inner functionality of Visual Studio is not working very well after some updates. Alt + Shift + → now selects things including braces (which annoys me).
It is not like its behavior before. It selected things between curly braces, when I first posted this answer. I'm using Mark's answer now.
If anyone has a better solution (without an extension) now, please leave a comment.
On Mac Ctrl + Shift + → to expand the selection. Press multiple times to expand to the block.
Try the expand-region extension. It currently works for JavaScript and HTML. To select ever-increasing or decreasing scope.
A quicker way is selecting a line then expanding the selection like this:
Select line Ctrl + L
Expand selection Alt + Shift + →
Doing this inside a block (HTML element, JavaScript curly braces) will select the inner block (HTML element content, inside curly braces). Do step 2 again to select block including the container (HTML element, whole function, class, etc.)
In Visual Studio Code, there is a new option called Balance. First you can place the cursor in a suitable block. After that, you can press Ctrl + Shift + P. Type balance and it lists like below.
Now press Enter, it will select the related code block like below.
For simple use, you can add a shortcut key binding.
A real working solution:
Press Command + P and search for Select to Bracket
To bind it to a key, press the little Settings icon on the right. The "Keyboard Shortcuts" Window will appear as shown in the image. Double-click on Select to Bracket and press a Keyboard shortcut you like, for example Command + Shift + H.
Now, whenever you want to select code in a block, put your cursor inside the block and press your shortcut.
It is like magic.
⌃⇧⌘← or ⌃⇧⌘→is also useful for this purpose.
A real working solution:
Search for Select to Bracket and bind it to whatever keys you like.
It is like magic.
If you are using Java in Visual Studio Code and you don't want your block selection to include the brackets (or any other peripheral character) then do the following:
Go to Visual Studio Code settings by pressing Ctrl + ,.
Search for "Java selection range" and deselect it.

Jump to Closing tag in VS Code?

I can't seem to find a way to select the beginning of a bracket and jump to the end of it through some key combination or something in VS Code. For example, in atom, this is done with Ctrl + m.
I know there is a way to jump to the beginning and end of a bracket or curlybraces with Cmd + Shift + \ but that does not work for tags. Any ideas?
It is possible to do, but either using Ctrl + Shift + P -> "Emmet: Go to Matching Pair" or by manually setting a shortcut for it (Ctrl + K Ctrl + S).
Unfortunately there is currently no support for it out of the box.
You can use Cmd + % to jump tags in VSCode if you add the following to your keybindings.json.
{
"key":"cmd+shift+5",
"command": "editor.emmet.action.matchTag"
}
Go to: File > Preferences > Keyboard Shortcuts and click the underlined link to edit keybindings.json.
For those using VIM keys: you are already used to pressing % to jump to matching parens and tags. So, hopefully, Cmd + % will be close enough to your existing muscle memory to make this transition painless.
For those who are using Vim plugin and Mac, Leader+% is working well for me.
You can setup in your Vim json file setting.json by adding:
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["<leader>", "%"],
"commands": [
{
"command": "editor.emmet.action.matchTag"
}
]
}
]
PS. I mentioned Mac user because cmd+shift+5 is for capturing the screen in Mac.
You can jump to the matching bracket with Ctrl+Shift+\
For more reference, you can refer: Visual Studio Code Navigation
I think you are asking about Breadcrumb Keyboard Navigation
In this case you can simply press Ctrl+Shift+. to go to elements before or after the current element.
There is no support for this out of the box. Though if you are willing to use extensions, there is: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag which among other things, gives you ability to use command: Jump to matching tag which you can bind to a key.