VS Code - Auto rename HTML tags in React, Vue, Svelte, Nunjucks, and others
In a previous post, VS Code - You don’t need that extension, I covered some settings that offer the same functionality as popular extensions. One topic I covered was renaming paired HTML tags in a single edit, this is also referred to as linked editing of HTML tags.
A bone of contention was the “linked editing” setting only supported HTML and XML files. There was grumbling that this behaviour was not available in JSX.There has been a long standing issue to implement this feature for JSX, and finally it has been resolved!
In version 1.78 (April 2023), you can auto rename tags in JSX. Although, it is not as seamless as I would have hoped! I will cover why shortly.
I wanted to take the opportunity to take a look at other frameworks and languages that contain embedded HTML such as Vue and Nunjucks, to see if it there is a consistent experience for renaming HTML tags in this manner. Some language feature extensions provide this functionality, some don’t.
Auto rename HTML tags
Let’s recap how things operate in HTML and XML files first, before we move onto JSX and others.
Auto rename tags in HTML and XML files
If you want auto renaming of tags in HTML, you must set the
Editor: Linked Editing setting to
true. This setting is false by default.
If you want to edit your settings.json file directly, it is
editor.linkedEditing setting you are after.
This enables you to rename a tag by editing it directly, a mirrored cursor will automaticaly rename the matching tag. See video below for example.
You can also use the
Rename Symbol command to rename the tag via an inline dialog. The keyboard shortcut for this is F2 .
Auto rename tags in JSX (React)
Since version 1.78 (April 2023) of VS Code, auto renaming tags in JSX is enabled by default.
There is a BIG caveat, your project must use Typescript version 5.1 or later. The odd thing about this is that VS Code version 1.78 uses TypeScript version 5.0.4. Therefore, currently the bundled version of TypeScript is not recent enough to facilitate using the functionality! 🤦
I missed this fact, and I was trying rename a tag in a React project and was scratching my head because it was not working! 😕 I got an error saying “You cannot rename elements that are defined in a ‘node_modules’ folder” as below. This is not a helpful error!
Keep this in mind if you are trying to use this feature in your existing React projects. To change what version of TypeScript your workspace is using, you can run the commmand
TypeScript: Select TypeScript Version. You can read more about that in the Using newer TypeScript versions section in the docs.
For now, the simplest way to use the auto rename tag functionality is install the TypeScript Nightly extension to use the preview release of TypeScript version 5.1 in all of your workspaces. This issue should go away when VS Code upgrades to version 5.1.
There is no live editing using mirrored cursors to rename matching tags as there is with HTML. You have to use the command
Rename Symbol to rename matching tags.
This feature is managed by 2 different settings that are enabled by default:
typescript.preferences.renameMatchingJsxTagsfor TypeScript files
Overall, I am underwhelmed with the result! It would have saved some confusion to ship the feature when VS Code upgraded to TypeScript version 5.1!
Auto rename tags in Vue
The Vue Language Features (Volar) extension supports auto renaming tags.
Similar to HTML, you can rename tags by live editing using mirrored cursors, or using the command
If you use the Vetur extension for Vue language features, you are out of luck. There is a long-standing request for adding this behaviour to Vetur.
Auto rename tags in Svelte
The Svelte for VS Code extension supports auto renaming tags.
I recommend using the command
Rename Symbol to rename matching tags, I found using mirrored cursors for renaming tags to be a bit buggy.
Auto rename tags in other languages such as Nunjucks
Unfortunately, the language feature extension for Nunjucks – Nunjucks Template – does not offer this functionality!
Emmet: Update tag does a similar job. Emmet is not enabled for Nunjucks by default, so I added it. It looks like it works well.
You can add support for Emmet in a language by adding the following to your settings.json:
The syntax is kind of weird! The docs does not explain why you need to associate the language you want Emmet support in with the
html language ID, but that is how you do it for a HTML-like language!
I liked it enough that I changed the keyboard shortcut for F2 to use the
Emmet: Update tag command for nunjucks files. I added the following to my keybindings.json:
"when": "editorTextFocus && editorLangId == 'njk'"
In lieu of
your favourite language supporting auto renaming matching tags, the
Emmet: Update tag command is a reasonable workaround. Your mileage may vary though!
Auto renaming tags is one of those developer experience improvements that makes life just a little bit easier. One less thing to worry about.
It is good to see that the other popular frameworks such as Vue and Svelte have auto renaming tags implemented. Beyond that you may have less luck. Using the command
Emmet: Update tag works quite well for many languages as a workaround.
I recommend using the
Rename Symbol command as it is more consistently implemented across languages. Live editing with mirrored cursors is not available everywhere.
Thanks for reading!