Select matching element/rename HTML tag in Visual Studio Code
Visual Studio-CodeVisual Studio-Code Problem Overview
Let's say I've got the following code
<div class="footer">
<div>Foo</div>
</div>
How can I change .footer from a div element to a footer element?
That is, if I have the cursor in div I'm looking for a keyboard shortcut that selects the opening and closing tags of an element. I believe I've used emmet to do this before in Sublime, but I can't seem to find similar functionality in Code. (Ideally this would work in JSX files too...)
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
Do you want to rename the paired tags? If yes, there is a much easier way: you just need to install the Auto Rename Tag extension. When you rename one HTML tag, it will automatically rename the paired HTML tag.
Solution 2 - Visual Studio-Code
V1.41 is adding this functionality, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags
> HTML rename tags > > You can now use F2 to rename the opening/closing tag pairs in HTML.
F2 when the cursor is over one of the tags and you will get a little input box with the cursor to input the new tag name and the start/end tags will be replaced with whatever you type upon .
Also of interest might be the "mirror tags" functionality just added in v1.41 as well (https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror-cursor):
Clicking inside a tag will create another cursor in the matching start or end tag.
> VS Code now adds a "mirror cursor" when you are editing HTML tags.
> This behavior is controlled by the setting
> html.mirrorCursorOnMatchingTag, which is on by default.
---------- v1.42 is changing the default status of the mirror cursor:
> HTML Mirror Cursor off by default
>
> We have made Mirror Cursor an opt-in feature. In the upcoming
> iteration, we'll continue to improve its implementation to make this
> feature more easily understandable and available to more languages.
> You can still use this feature by turning on
> html.mirrorCursorOnMatchingTag.
Thanks to JerryGoyal's answer below (I have upvoted it) - I have continued with this ongoing answer.
Because I have been tracking this for over half a year now, v1.44 has renamed this once again. From Synced Regions:
> Synced Regions
>
> We have improved the mirror cursor feature introduced last November
> with a new implementation called Synced Regions. Currently this
> feature is available for HTML and you can try it out by one of the
> following ways:
>
> Running the command On Type Rename Symbol on an HTML tag (bound to
> Ctrl+Shift+F2 by default).
Turning on the editor.renameOnType setting and move the cursor to an HTML tag.
> The red regions are Synced Regions. As their name suggests, any change
> in one region will be synced to other regions. You can exit this mode
> by either moving your cursor out of the regions or pressing ESC.
> Additionally, typing or pasting any content leading with a whitespace
> in any region exits this mode.
>
> We look forward to providing an API that could make this
> rename-on-type experience available to other languages such as JSX,
> XML, or even local variables in TypeScript.
As that last part notes, it works in html out of the box but other languages need to implement themselves. As of June 2020 by my testing it still does not work in jsx files on embedded html tags.
You must enable this in your settings, it is off by default.
Solution 3 - Visual Studio-Code
You can do this without an extension using Emmet Update Tag
- Place your cursor in the opening tag
- Press CTRL+SHIFT+P to open the command palette
- Search for "Emmet: Update Tag" by typing something such as "em up t", and/or find it in the list
- Press enter to select "Emmet: Update Tag"
- Enter the new tag
- Press enter
The opening and closing tag are updated to the new one.
Solution 4 - Visual Studio-Code
CTRL + D on windows. As mentioned by @tataata, CMD + D on Mac OS. Not limited to tag renaming. Very useful.
Solution 5 - Visual Studio-Code
Update Mar 2021:
No need for extension, this is now cooked into VSCode.
"editor.linkedEditing": true
Read more here: https://code.visualstudio.com/Docs/languages/html#_auto-update-tags
Solution 6 - Visual Studio-Code
You can use a key shortcut cmd + D (Mac OS) for adding to the selection the next matching element and then there is a possibility to edit open and closing tags simultaneously.
Solution 7 - Visual Studio-Code
I'm using tag-rename. Press F2 on the tag and it renames the start and close tags.
https://marketplace.visualstudio.com/items?itemName=krizzdewizz.tag-rename
Solution 8 - Visual Studio-Code
Quick and Simple Select tool works fine too but though it is not perfect. it has over 40k downloads https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select
it allows you to select tools
- Ctrl + K ' select everything between single quotes
- Ctrl + K " select everything between double quotes
- Ctrl + K ` select everything between backticks
- Ctrl + K ( select everything inside the parenthesis
- Ctrl + K ) select everything inside parenthesis and include them
- Ctrl + K [ or ] select everything between square brackets and include them
- Ctrl + K { or } select everything between curly braces and include them
- Ctrl + K < or > select everything between angle brackets and include
Solution 9 - Visual Studio-Code
No need to write config codes, just enable it from settings page.
