Select matching element/rename HTML tag in Visual Studio Code

Question

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...)

It's not a feature yet that I can find, and I haven't found an extension or editor feature to consistently emulate it (someone post if you find one). But there is a User Voice [request](https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/8243982-auto-close-rename-html-tags-like-visual-studio) we can up-vote. — Vimes, May 06 '16 at 22:05
You can use Http snipet extension, installation and settings: https://stackoverflow.com/a/45279141/8187926 — Rox, Jul 24 '17 at 11:16

Mark · Accepted Answer · 2020-06-10T23:31:46.813

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 .

See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default

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.

It looks that way - it doesn't work in .jsx files with embedded html tags. — Mark, Feb 13 '20 at 19:59
@Luis The current work on modifying this functionality includes api links for other lsp's to implement synced regions/mirror cursors. https://github.com/microsoft/vscode/issues/88424#issuecomment-600840619 — Mark, Mar 31 '20 at 23:31
You can also access vscode's "rename symbol" from the command palette (and "rename symbol" can be mapped to any keyboard shortcut you want, of course) — clint, Jun 06 '20 at 11:32
Unfortunately this doesn't seem to be working for me on Mac for my .vue files. — Ryan, Jan 04 '21 at 15:11
I had to change the keyboard shortcut of `rename symbol` in the vs code settings. — mihca, Aug 15 '22 at 15:09
Of interest, for jsx/tsx files: [issue 159534](https://github.com/microsoft/vscode/issues/159534) for VSCode 1.78, Apr. 2023. — VonC, Apr 17 '23 at 06:04

score 32 · Answer 2 · answered Sep 12 '18 at 02:23

32

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.

answered Sep 12 '18 at 02:23

Christopher

10,409
13
73
97

@DrazenBjelovuk I've texted it in razor/cshtml and it may work in other file types if emmet is enabled for that type. See [this answer](https://stackoverflow.com/a/46798613/13700). – Christopher Sep 20 '18 at 23:02
Even if enabled, doesn't seem to work for all types: https://github.com/Microsoft/vscode/issues/41618 – Drazen Bjelovuk Sep 20 '18 at 23:06
4

Even if this works, this is very tedious... Should be more simple. – Shy Agam Sep 22 '19 at 11:34

GorvGoyl · Answer 3 · 2021-04-11T09:12:35.847

25

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

edited Apr 11 '21 at 09:12

answered Jun 10 '20 at 22:43

GorvGoyl

42,508
29
229
225

2

It's been deprecated, now it's called `Linked Editing` -> `"editor.linkedEditing": true` – Dinis Rodrigues Apr 11 '21 at 05:00
6

for jsx, tsx files you need to use `Auto Rename Tag` ext. – GorvGoyl Apr 11 '21 at 16:45

score 20 · Answer 4 · answered Jul 08 '17 at 04:18

20

CTRL + D on windows. As mentioned by @tataata, CMD + D on Mac OS. Not limited to tag renaming. Very useful.

answered Jul 08 '17 at 04:18

SILENT

3,916
3
38
57

14

That's definitely not a rename. That's just multiple selection. Which means that if you've got a `div` and inside it you've got a sentence for example "Some individuals are amazing" then you'll not rename the closing div but "div" from "individuals"... Also, if you've got multiple/nested elements which are the same, let say 3 nested div. You try to rename the first or the second one, it won't work. – maxime1992 Sep 06 '18 at 14:28
@maxime1992 Actually, you can set it to match cap and/ or whole words. The whole words setting would more likely find the ending div as long as there is no "div" word in the sentence (ie "He used a div"). – SILENT Oct 11 '18 at 13:49
2

This should be the answer. – pashute Dec 06 '18 at 09:25
1

CTRL-D is fine for basic use :)! Much appreciated. – MMacphail Aug 03 '19 at 15:13

score 10 · Answer 5 · answered May 17 '17 at 08:19

10

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.

answered May 17 '17 at 08:19

tataata

279
1
4
11

As mentioned above this post doesn't answers the question. With this the result would be `
Foo
` or `
Foo`
– n3ko Jul 16 '19 at 22:16
that doesnt answer the question – fdsafas Apr 01 '21 at 23:46

score 2 · Answer 6 · answered Jun 13 '16 at 18:04

2

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

answered Jun 13 '16 at 18:04

igetgames

41
4

score 2 · Answer 7 · answered Oct 04 '21 at 14:21

2

No need to write config codes, just enable it from settings page.

answered Oct 04 '21 at 14:21

Jodyshop

656
8
12

score 0 · Answer 8 · answered Apr 02 '20 at 17:54

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

Select matching element/rename HTML tag in Visual Studio Code

8 Answers8

Linked

Related