NEW · FOR VS CODE

Auto Rename Tag Veyra

Rename one tag, and its pair follows.

Change <div> to <section> and the closing tag changes with it, as you type. In HTML, React, Vue, Svelte, Astro, XML and PHP.

Get it for VS Code How to install

flightcoders.veyra-auto-rename-tag · v1.0.0 · Free · MIT · Windows, macOS, Linux

Before and after: typing PlanCard over Card in the opening tag, and the closing tag becomes PlanCard too

FEATURES

Never chase a closing tag again.

As you type

Add, delete or replace letters in either tag, and the other one keeps up, letter by letter.

Nested tags

A <div> inside a <div> inside a <div>: the right closing tag is always the one that changes.

Real-world JSX

Components like <Foo.Bar>, attributes like onClick={() => a > b}, and fragments that become elements.

Every template

HTML, React, Vue, Svelte, Astro, XML, PHP, Razor, Blade, Twig, Liquid and more.

Undo stays in step

Each undo takes both tags back together, so they never end up mismatched.

Plays well with others

With VS Code’s own linked editing on, tags are renamed once, not twice.

Knows when to stop

Attributes, self-closing tags, invalid names, comparisons and multiple cursors are left alone.

Comments and scripts

Tags inside comments, CDATA and <script> blocks are never mistaken for the real pair.

Tiny and private

16 KB, nothing to set up, and nothing sent anywhere.

INSTALL

Ready in a minute.

In VS Code, open Extensions (Ctrl+Shift+X) and search for Auto Rename Tag Veyra, or open it on the Visual Studio Marketplace.
Click Install, then rename any tag.

Pairs well with Veyra Live Server, which shows your page in the browser as you save.

You type, it follows<div> → <section> … </section>
<Card> → <PlanCard> … </PlanCard>
<> → <main> … </main>

FAQ

Questions

Is it free?

Yes. Auto Rename Tag Veyra is free and MIT licensed, with no account and no telemetry.

Which languages does it work in?

HTML, XML, SVG, React (JSX and TSX, including .js files), Vue, Svelte, Astro, PHP, Razor, Blade, Twig, Jinja, Liquid, Handlebars, Markdown and MDX. Add more with the veyraRename.languages setting.

Doesn’t VS Code do this already?

VS Code’s linked editing does it for HTML when you turn it on. Auto Rename Tag Veyra also works in JSX, Vue, Svelte and the other templates, and the two work fine together.

What happens when I press undo?

Both tags go back together. Each undo step keeps the opening and closing tags in step.

Is it the same as the Auto Rename Tag extension?

It is an independent extension, written from scratch, that understands JSX attributes, fragments, comments and script blocks.

More for VS Code: Todo Tree Veyra, Error Lens Veyra, Path IntelliSense Veyra and Veyra npm IntelliSense. Or browse all 16 Veyra extensions.

Made by the Veyra team.

Veyra Studio is a fast, free code editor with Live Server, Python debugging and Veyra AI built in.

Download Veyra View on GitHub