Visual studio code: how to automatically change the closing tag in HTML

html

linked-editing

rename-symbol

auto-rename-tag

byAlex Kataev·Dec 8, 2024

Automate tag synchronization in Visual Studio Code by installing the Auto Rename Tag extension. Once installed, whenever you update an HTML or XML tag, the corresponding closing tag automatically reflects your changes.

Usage:

// The boss <div> tag
<div>Tom Cruise</div>

// Boss changes identity to <section>,
// and so does his stunt double
<section>Tom Cruise</section>

This extension works right off the bat, no tinkering required.

Enabling in-built tag sync

VSCode's own "Linked Editing" feature, rolled out in VSCode 1.44, realizes a similar proposition without any add-ons. Once activated, every change you make to a tag is mirrored in its counterpart - live.

Search for "editor.linkedEditing" in the settings panel and flick the switch on. Now, edit a tag and watch the magic happen, live in concert!

Other ways

For developers who like to keep things native, VSCode's built-in "Rename Symbol" command lets you change both tags in one fell swoop. Just hit <kbd>F2</kbd> for simultaneous tag renaming - a godsend for speedy HTML and JSX tweaks.

For those residing in the IntelliJ ecosystem, the IntelliJ Keybindings modification lets you stick to the familiar <code>SHIFT + F6</code> to rename your tags.

Catering to varied scenarios

Changing multiple tags at once

The multi-cursor feature (<kbd>Ctrl</kbd> + <kbd>D</kbd>) selects all instances of a matched tag and changes them simultaneously - a boon while working with dense, repetitive HTML blocks.

Aiding intricate structures

The Auto Rename Tag extension excels when coping with nested HTML structures. It accurately targets the intended tags, eliminating manual update errors and the accompanying wow-I-didn't-sign-up-for-this emotions.

Integrating these methods

Ingrating these techniques into your routine workflow means you spend less time wrangling tags and more on creative development.

Tips for an enhanced tag editing journey

Keep your extensions and VSCode up to date to harness the latest features.
Invest time to practice using these methods to uncover the best fit.
Check the extension's page for any additional settings or shortcuts that could enhance your user experience.
Remember that certain features may behave differently depending on the file types and operating systems you are using.