Rename paired tags as you type and close tags automatically, in JSX, TSX, Vue, Svelte, Astro, XML, PHP and template files, using the editor's built-in linked editing.
Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.
Features
- Rename both tags at once. Change
<Layout> and </Layout> follows as you type, in JSX, TSX, Vue, Svelte, Astro, XML, SVG, PHP, Blade, Razor, Jinja, Twig, Nunjucks, Handlebars, ERB, Liquid, Markdown and MDX. It uses VS Code's built-in linked editing, so there are no stray edits, lag or broken undo. Linked editing is turned on for these languages.
- Knows JSX. Tags inside
{expressions} and attributes work, <Foo.Bar> member tags and <> fragments work, and useState<string>(), a < b or a generic arrow function like <T,>(x: T) => … are never mistaken for tags. Comments and quoted attribute values are skipped.
- Skips code inside pages. A
"</div>" in a <script>, a > b in a <style>, or HTML echoed from a <?php ?> block doesn't throw off the pairing in HTML-like templates, Vue and Svelte.
- Several cursors. The editor's linked editing follows only one cursor, so with more than one, each cursor's paired tag is renamed for you. Undo takes back the opening and closing tag together.
- Fast in big files. Only the text around the cursor is read (200,000 characters either way), so a multi-megabyte XML file stays responsive. Tags further apart than that aren't paired.
- Close tags automatically where no language server does it (PHP, Blade, templates, XML, Markdown…). Typing
> at the end of <section class="x"> adds </section> after the cursor. Typing </ completes the innermost open tag. Void elements like <br> and <img> are left alone.
- Go to Matching Tag (Ctrl+Shift+\) jumps between an opening tag and its closing tag.
- Works in the browser on vscode.dev and github.dev.
Commands
| Command |
What it does |
Nifty Tags: Go to Matching Tag |
Jump between an opening and its closing tag (Ctrl+Shift+\) |
Settings
| Setting |
Default |
What it does |
nifty.tags.linkedEditingLanguages |
JSX, TSX, Vue, Svelte, XML, PHP, templates… |
Languages where renaming a tag renames its pair |
nifty.tags.autoClose |
true |
Add closing tags as you type |
nifty.tags.autoCloseLanguages |
PHP, XML, templates, Markdown… |
Languages to auto-close tags in (JSX, HTML, Vue and Svelte already do it themselves) |
nifty.tags.exclude |
[] |
Glob patterns of files to leave alone, e.g. **/vendor/** |
Linked editing can also be switched per language with VS Code's editor.linkedEditing setting.
Install
- VS Code: search for "Nifty Tags" in the Extensions view, or install from the Visual Studio Marketplace.
- Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.
Privacy
This extension collects no telemetry and needs no account.
- Nifty Beautify: Format HTML in PHP, Blade & Twig: Format HTML inside PHP, Blade, Twig, Jinja, Handlebars, ERB and Liquid templates without breaking the template tags. (Open VSX)
- Nifty XML: XPath, Formatter & XML to JSON: Evaluate XPath with namespaces, copy the XPath of any element, format, minify, check well-formedness and convert XML to JSON. (Open VSX)
- Nifty JSON: Formatter, Validator & JSONPath: Format, minify, sort keys, query with JSONPath, copy paths, generate TypeScript types, and browse huge JSON files in a fast tree view. (Open VSX)
- Nifty SQL: SQL Formatter for 20 Dialects: Format SQL in 20 dialects, including dbt and Jinja templates, with your team's settings. (Open VSX)
- Nifty YAML: Formatter, Validator & Converter: Format YAML without losing comments (Kubernetes-style indents), sort keys, lint with yamllint, copy the key path, and convert to and from JSON. (Open VSX)
- Nifty Branches: Clean Up Merged Git Branches: Safely clean up merged, squash-merged, gone and stale git branches, with a preview and one-click restore. (Open VSX)
See all 28 Nifty tools at https://getnifty.dev
| |
