Visual studio code: how to automatically change the matching closing tag

Question

In visual studio code when changing the start tag type (e.g., from <div> to <span>) I want the editor to automatically change the matching closing tag. How can I do that?

Most probably this will help you https://stackoverflow.com/a/44982436/12069171 — Lint, Mar 25 '20 at 22:36
For anyone stumbling across this thread from the first result of Google SERP, see Neil's answer - https://stackoverflow.com/a/70353463/8604951 since VSCode supports the functionality by default right now. No need to install another plugin & bloat your system lol. — Jarmos, Jul 07 '22 at 10:32
The feature request _Mirror Cursor for JSX_ is [here](https://github.com/microsoft/TypeScript/issues/51832). — cachius, Mar 15 '23 at 15:51

Vladislav Ladicky · Accepted Answer · 2018-08-11T22:22:55.023

91

Start VS Code, go to Plugins and search for Auto Rename Tag. Install, reload, done. This plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

edited Aug 11 '18 at 22:22

answered Aug 11 '18 at 20:59

Vladislav Ladicky

2,261
1
11
13

15

This plugin is very broken. Would not recommend. Any other solutions appreciated – James Mulholland Oct 02 '19 at 15:00
25

Since v1.41, it is built in https://code.visualstudio.com/updates/v1_41#_html-rename-tags – timiscoding Feb 09 '20 at 00:21
1

@JamesMulholland most of the time it works pretty good.. – niryo Aug 22 '20 at 13:07
2

As of Jan 2022, It's no longer called plugins, but rather view > extensions. – den232 Jan 28 '22 at 21:14
1

@timiscoding Sadly doesn't work for PHP files. – DGX37 Jun 04 '22 at 16:18
THIS made it work – morels Feb 04 '23 at 15:52
Specify languages using the [VSCode language ids](https://code.visualstudio.com/docs/languages/identifiers). `"auto-rename-tag.activationOnLanguage": ["typescriptreact"]` for _.tsx_ files (in the settings.json). – cachius Mar 15 '23 at 16:05

score 64 · Answer 2 · answered Nov 06 '21 at 10:09

64

Since VSCode 1.44, you can enable automatic updating of matching tags like this:

Go to File menu, Preferences and Settings
Search for editor.linkedEditing
Enable "Linked Editing"

Here is an example of how it works:

answered Nov 06 '21 at 10:09

Anders Carstensen

2,949
23
23

4

I've enabled it but it still doesn't link the edition... I had to press F2 to change.. – testing_22 Nov 08 '21 at 15:16
18

It works on .html files but does not work on React .jsx files. The Auto Rename Tag extension from the accepted answer does work on both. – VIBrunazo Nov 26 '21 at 12:30
1

support for JSX is added in VS Code 1.79. https://code.visualstudio.com/updates/v1_79#_linked-editing-for-jsx-tags (cc @VIBrunazo) – starball Jun 08 '23 at 22:09
Thanks! Working great with `.vue`. IMO it should be enabled by default – Kacper Wyczawski Jul 31 '23 at 16:58

clemlatz · Answer 3 · 2021-06-04T13:45:55.017

46

You can use the Rename Symbol command to do this.

Select (or click to put the caret anywhere inside) the opening tag
Hit F2
Enter the new tag name and press Enter

Opening and closing tags will both be renamed.

Alternatively, you can press Shift + Enter at step 3 to preview changes and then Shift + Enter again to apply them.

edited Jun 04 '21 at 13:45

answered Jul 21 '20 at 09:50

clemlatz

7,543
4
37
51

6

This will rename the import statement of the component with `OldName as NewName`... :( Ctrl+D is probably the best option. – TwistedSim Jul 02 '21 at 18:09
One disadvantage of F2 is you cannot use it to set an empty tag. If you delete the name and press Enter, then it will cancel the operation. – VIBrunazo Nov 26 '21 at 12:39
1

In JSX, F2 just shows "Cannot be renamed" for me. The `Emmet: Update Tag` code action works though – phiresky Sep 22 '22 at 14:56

score 12 · Answer 4 · answered Jul 19 '21 at 11:56

12

As mentioned by @TwistedSim, you can achieve this using Ctrl + D

answered Jul 19 '21 at 11:56

Amy Doxy

559
6
10

1

This is what the VS Docs say to use. – nycynik Jul 25 '21 at 20:15
1

Well, unless there's matching text between the tags. Then some text in the middle gets highlighted also. – Ben Racicot Feb 17 '23 at 21:07

score 5 · Answer 5 · answered Dec 14 '21 at 17:53

5

F2 works in (js|jsx).

If you happen to have IntelliJ Keybindings installed you can achieve the same with SHIFT + F6.

CNTRL+D didn't work for me at all. I'm on a Mac at the moment.

answered Dec 14 '21 at 17:53

Neil Gaetano Lindberg

2,488
26
23

1

CMD+D for Mac... – Ralph W Apr 14 '23 at 12:42

score 2 · Answer 6 · answered Apr 17 '23 at 06:09

From Anders Carstensen's answer

It works on .html files but does not work on React .jsx files.
The Auto Rename Tag extension from the accepted answer does work on both

Actually, VSCode 1.78 (Apr. 2023) will support tag rename for .jsx/.tsx files.
See issue 159534 and PR 179806, available in VSCode Insiders.
It requires TS 5.1+.

Visual studio code: how to automatically change the matching closing tag

6 Answers6