Jump to Closing tag in VS Code? - tags

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.

Related

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

How to select current word in Visual Studio Code (VS Code)?

How to select the current word, that is where the caret is at.
Note: I am looking for the shortcut for Visual Studio Code(VS Code), the text editor, and not Visual Studio IDE.
On Mac OS: Cmd+D
On Windows & Linux: Ctrl+D
Above solved the purpose for me.
But ⌘D is defined as "editor.action.addSelectionToNextFindMatch", so if you press it more than once, it will try to search and select same word in the file which then can be used to do "multi word editing".
You are looking for Shrink/Expand Selection.
Trigger it with Shift+ Alt+Left and Shift + Alt+Right
Update:
This is now called Smart select API.
This feature uses semantic knowledge to intelligently expand selections for expressions, types, statements, classes, and imports.
It is Ctrl + D that works for me in latest Visual Studio Code on Windows.
Go to File -> Preferences -> Keyboard shortcuts, you will find this:
If you want to ctrl+w to behave the same as in Idea just go keyboard settings
Search for Expand selection. Set new shortcut cmd+w or ctrl+w depending on your OS.
Also re-bind other commands that use ctrl+w to use another shortcut that you want, for example cmd+f4
You can edit keybindings.json to avoid using UI.
Shift + Alt+Right Arrow if the word is in camelCase then you will have to click Right Arrow again to select the whole camelCase. Every time you press Right Arrow again while still holding Shift + Alt down you will select a further part of the code.
so:
first the word.
then if it's part of a camelCase then the camelCase.
then if it is in a string the whole string.
... (many other posibilities)
the whole line.
everything inside the parentheses code block
the whole file
at any given time you can go back to the last selection by clicking Left Arrow instead of Right Arrow
I don't know about CTRL + w in the old Visual Studio Code but in the JetBrains IDE's this is the equivalent to CTRL + w by holding down CTRL and clicking w to select more and holding down CTRL + Shift and clicking w to unselect.
Another possibility which helps to avoid selecting only one word in camelCase is CTRL + d this will just select the whole camelCase. This will however have the side-effect of also changing the current "find" criteria.
thanks Chandan Nayak for this extra shortcut.
An unpopular opinion: you can now have Resharper keybindings, if you come from Jetbrain's camp.
The Ctrl+W expansion grow and shrinks is different from expansion selection.
On "File/Preferences/Keyboard Shortcuts" I deleted the shortcut "Ctrl + W" to close the current tab action, because for this "Ctrl+F4" works for me.
Update (14 days later): Yesterday I installed VSCode 1.34.0 - I think since then the functionality is "Ctrl + D". I was very suprised.
For any editor, you can use the below shortcuts. These shortcuts work for every text area also.
Ctrl + Shift + LeftArrow/RightArrow - this will select text word by word
Shift + UpArrow/DownArrow - this will select text line by line
Ctrl + BackSpace - this will delete text word by word
Additional
in intellijIdea
Ctrl + w - use for the select current word, after giving second Ctrl + W it will select the second word also. Like that you can select the whole line.
Ctrl + d - you can duplicate current line.

Keyboard shortcut to show hover tooltip

Is there a keyboard shortcut to trigger the information tooltip that is typically shown when hovering over items in VS Code with the mouse?
Example hover tooltip:
Press Ctrl + K, Ctrl + I, that's what you want
If you're using the VSCodeVim plugin, you can use gh to show the tooltip.
The corresponding cmd name in VS Keybindings is editor.action.showHover. On mac for me the key combo was:
⌘ Command + k
⌘ Command + i
You can also access it through your command palette by typing show hover. It will show you the current keybinding and you can execute it as well.
If you would like you can remap it like this:
{
"key": "ctrl+e",
"command": "editor.action.showHover",
"when": "editorTextFocus"
}
With that, if your cursor is within an error/warning squiggly line, you can hit ctrl+e to show what you would normally see with hover.
To make the box disappear, I am having to hit escape. It would be cool if there was a editor.action.toggleHover or something like that, but in the meantime this works great!
2021 Update- As far as I can tell, the new command that we're all looking for here is:
"Show Definition Preview Hover"
The shortcut for that command was unbound. I set it back to ctrl+h, which is what worked for me in the past. Here's more info-
https://newbedev.com/how-to-trigger-documentation-popup-in-vscode
You could use Ctrl + Shift + M to show all the errors:
and then use Ctrl + . to show the list of the Quick Fixes.
A simple way, which is also on the official site of Microsoft, is the simultaneous use of
ctr + k + i are together.
Just make sure the cursor is on the desired area

Multiline editing in Visual Studio Code

Is it possible to enable multiline editing like in Sublime Text?
For example, press Ctrl to place additional cursor carets and being able to write/delete on multiple places in the document at one time.
On Windows, you hold Ctrl+Alt while pressing the up ↑ or down ↓ arrow keys to add cursors.
Mac: ⌥ Opt+⌘ Cmd+↑/↓
Linux: Shift+Alt+↑/↓
Note that third-party software may interfere with these shortcuts, preventing them from working as intended (particularly Intel's HD Graphics software on Windows; see comments for more details).
If you experience this issue, you can either disable the Intel/other software hotkeys, or modify the VS Code shortcuts (described below).
Press Esc to reset to a single cursor.
Or, as Isidor Nikolic points out, you can hold Alt and left click to place cursors arbitrarily.
You can view and edit keyboard shortcuts via:
File → Preferences → Keyboard Shortcuts
Documentation:
https://code.visualstudio.com/docs/customization/keybindings
Official VS Code Keyboard shortcut cheat sheets:
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
Solved using just two steps!
Ctrl + F
Alt + Enter
It's equal to Sublime Text's Alt + F3.
Note: For macOS, ⌘ + F followed by ⌥ + Enter is equivalent to Sublime Text's ⌃ + ⌘ + G.
You can just Alt + click for additional cursors. And as already mentioned, Ctrl + Alt + ↑ or ↓.
Box Selecting
Windows: shift + alt + Mouse Left Button
macOS: shift + option + Click
This is contrary to what is mentioned in an answer to Does Visual Studio Code have box select/multi-line edit?.
I wanted to select multiple lines and hit "something" to have a cursor for each select lines (similar to Ctrl + Shift + L in Sublime Text). This action in Visual Studio Code is called "Add Cursors to Line Ends".
This was tested in Visual Studio Code 1.51.1 and works on both Windows and Mac.
Here is the way:
Select the lines you want to have multiple cursors.
Simply hit Alt + Shift-I.
You now have one cursor per selected line.
Use Ctrl + D to use multi word edit of same words in Windows and Linux.
Use CMD + D for Mac.
In the latest release of Visual Studio Code, you can now drag the cursor while holding Option (Alt on Windows) to select the same column on multiple rows.
To enable this, make sure you change your editor.multiCursorModifier to look like this:
"editor.multiCursorModifier": "ctrlCmd"
From the Visual Studio Code release notes 1.32.0:
In the following video, the selection begins as a regular selection and then Alt is pressed and held until the mouse button is released:
From the version 1.13 (May 2017) you can finally change the default modifier key for creating multiple cursors (add to settings):
"editor.multiCursorModifier": "ctrlCmd"
P.S.: The modifier "follow link" from this moment will be Alt.
Step 1:
Select the word to be replaced.
Step 2:
Use Ctrl + F to select its multiple occurrences.
Step 3:
Use Alt + Enter to set cursor at all the found occurrences.
Step 4:
Just start typing the new word.
Alternatively on Mac:
⌥ Opt + Click to set cursor on the click location.
On Mac it is:
Option + Command while pressing the up ↑ or down ↓ arrow keys.
I am using the vscodevim extension, so I'm not sure if this is a common problem. But, I was having the issue where Ctrl + Alt + UpArrow flipped my screen upside down.
Looking at the Visual Studio Code Basics (I don't know if they changed this in a recent update), it says to use:
Ctrl + Alt + Shift + (Up/down)
Working solution for me was first selecting the required text to edit and then using CTRL + F2 to select all matching data in the page.
You may also use CTRL+Shift+L as suggested by #lesterCovax
Please Note: The above solution uses the inherent ability of VSCode editor to select similar text across the entire page, and therefore, be careful.
For me the above solution of Ctrl + ALT + Arrowkeys did not work as it caused the screen to change its display orientation against selecting the lines in VSCode.
(Windows 10 pro x64) Here have some ways!
Alt + click
Alt + Ctrl + up/down
Keybindings: Ctrl + click (??? it doesn't work!)
To add multiple cursors at any text position
This is done by using Ctrl+Click. Firstly you have to enable Multiple-Cursor Modifier. Simply type this option on Command Palette by Ctrl+Shift+P to enable it.
To remove a cursor form multiple text position.
Do Ctrl+Click on the cursor.
As of April 2018 (version 1.23) you can now also use the middle mouse button to multiline select / box select.
version 1.43 (February 2020)
You can now toggle column selection mode, which changes mouse gestures and arrow keys, via:
Menu Bar > Selection > Column Selection Mode
Ctrl+Shift+P (Show All Commands) > Toggle Column Selection Mode
Bind your key for command "editor.action.toggleColumnSelection"
Note: There is a "Column Selection" panel in the status bar after activation, which you can press to disable it again.
According to VS Code 1.55.2 version(2021) under User > Commonly Used section there is an option as Multi Cursor Modifier. See below image.
for multi cursor default key is alt if you want it can change to Ctrl.
Moreover, for suitable places, you can hold the Middle Mouse button and move to down.
In Windows, the below combinations work for me:
Ctrl + Shift + Alt + down arrow
Ctrl + Shift + Alt + up arrow
In addition to all of the answers, there is one more way. Select the lines you want and then press:
Windows: Shift + Alt + i
Mac: shift + option + i
This puts a cursor in every row in the selection.
In Visual Studio Code just press Alt and place your cursor to the edit place(where you want to edit) and right click to select.
(NO MOUSE) For macOS, I found this to be very quick!
CMD + f To search the (word) you want to change.
Option + Enter To select all word you search for.
Just update the first word and it will update all the selected.
I think it depends on your Visual Studio Code version.
Mine is Linux version Visual Studio Code 1.7.2.
{ "key": "ctrl+shift+up", "command": "editor.action.insertCursorAbove",
"when": "editorTextFocus" },
{ "key": "shift+alt+up", "command": "editor.action.insertCursorAbove",
"when": "editorTextFocus" },
{ "key": "ctrl+shift+down", "command": "editor.action.insertCursorBelow",
"when": "editorTextFocus" },
{ "key": "shift+alt+down", "command": "editor.action.insertCursorBelow",
"when": "editorTextFocus" }
The point is the shortcuts are not same in all machines, so you should check your configuration. Go to menu:
Menu File → Preferences → Keyboard Shortcuts
Search for editor.action.insertCursorAbove and editor.action.insertCursorBelow and see your current configurations. You may change them if they conflict with operating system's shortcut keys.
If you're using Linux, there's a possibility of a conflict with Alt + click, which is the default for "moving a window".
You can go to menu Settings → Window Behavior → Window Behavior → Actions tab
Just remove Alt + left (hold) and it will work.
This is the best way, because you don't need to hold two + keys to do such a simple task.
I am using the latest version of VS code i.e., 1.46.1 (May 2020) in Windows 10. Just press Alt+mouse left click on the lines you want to select. This will let you select multiple lines at once and let you edit them. Also Press Esc to exit from it.
This is really helpful if you're coming from sublime text.
Just Opt + click works for me on Mac
My settings: Windows 8.1 64 bits, Visual Studio Code version 1.33.1.
Problem: Conflict with keyboard shortcuts of Intel HD Graphics 4000
I had a problem when I was using the default shortcuts of the Visual Studio Code (Ctrl + Alt + UP, Ctrl + Alt + DOWN). In my case, these commands were turning my screen in 0º and 180º respectively. It's happening, because there is the Graphic Intel application installed on my computer. Then, I just disable the shortcuts of this application.
Here is an tutorial to help someone.
I am using the Sublime Text keymap and the keybinding provided by the top answer did not seem to work :( Could be some conflicts between Visual Studio Code and sublime keymaps.
The keybinding recommended by #Han works for me (much appreciated!):
Enter multiline cursor mode with Ctrl + Shift + Up/Down
Exit with Esc
(Sidenote) Below is a small example of using Emmet together with the multiline cursor (enabled and disabled with these key bindings listed above):
On windows, you can create additional cursor on the next/previous lines by pressing:
Ctrl + Alt + Shift +Down/Up
Missing the Shift will flip your screen.
Creating additional cursors will allow you to edit multiple lines at once.
Well, I used the Alt key to select the lines where I wanted to edit, and that's it.
Alternatively, we can use the Ctrl + Alt + UP/DOWN arrow if the things to be edited are above or below.
The solution from #maxime of using SHIFT + ALT + i worked for me, when I needed to quickly edit ~20k lines in a file. Most of the other keyboard shortcuts mentioned are only useful for a limited number of line. SHIFT selecting the area you want to column edit, then pressing SHIFT + ALT + i is the most efficient way to handle this.
What I accidentally discovered though, (and hasn't been mentioned here yet) is that there is a limit of 10k lines in "cursor edit mode" (there's an open Github feature request to increase it). This means that for extremely large files, it may be better to script your edits, rather than doing it manually.
For those like #specimen that had to use shortcuts like CTRL + SHIFT + L (default binding is Select all occurrences of current selection) to accomplish this, you should check that you don't have a keymap extension installed. You can check by searching for #recommended:keymaps in the extensions pane, going to File > Preferences > Keymaps (CTRL+K CTRL+M).
The default [Windows] keymap can be found in PDF form HERE, or you can go to File > Preferences > Keyboard Shortcuts to find/modify the current bindings. There is also more in-depth key bindings documentation HERE.

Is there a keyboard shortcut to "untab" (move a block of code to the left) in Eclipse or Aptana Studio?

It's so easy to select a block of code and tab out, but how about the reverse?
Currently, I just search and replace for white space at the beginning of the line. Is there anything faster?
In Visual Studio and most other half decent IDEs you can simply do SHIFT+TAB. It does the opposite of just TAB.
I would think and hope that the IDEs you mention support this as well.
Shift-tab outdents again :)
The standard shortcut keys are covered in Standard Accelerators.
You'll find many of the more esoteric ones on FAQ What editor keyboard shortcuts are available?.
Here is a general answer for untab:
In Python IDLE: Ctrl + [
In Eclipse: Shift + Tab
In Visual Studio: Shift + Tab
In general, Shift + Tab works for any environment.
This workaround works most of the time. It uses Eclipse's 'smart insert' features instead:
Control + X to erase the selected block of text, and keep it for pasting.
Control + Shift + Enter, to open a new line for editing above the one you are at.
You might want to adjust the tabbing position at this point. This is where tabbing will start, unless you are at the beginning of the line.
Control + V to paste back the buffer.
I hope this helps until Shift + TAB is implemented in Eclipse.
Shift + Tab does that in Flex Builder (based on Eclipse), so it hopefully should work in regular Eclipse :)
In PyCharm, just use Shift + Tab to move a block of code left.
You can do this by going to the Window menu → Preferences, and then open the General list. Choose Keys.
Scroll down the list of keys until you see "Shift Left". Click that. Below that, you'll see some boxes, one of which lets you bind a key. It won't accept Shift + Tab, so I bound it to Shift + `. Apply Apply and Close, and you're all set.
Yes, in PyCharm: Shift + Tab works fine.
You can also change the shortcut. Use the Command + K, Command + S shortcuts to open the Keyboard Shortcut menu. Search for the "tab" and find the "outdent" in the list.