Guides en français

Renommer automatiquement les balises HTML, JSX et Vue dans VS Code

Installez l’extension gratuite Auto Rename Tag & Close Tag Sync et changez le nom dans une balise ouvrante ou fermante. La balise correspondante change pendant que vous tapez. Le renommage utilise l’édition liée de VS Code (editor.linkedEditing). L’extension active ce réglage pour ses langages et trouve la balise correspondante en HTML, JSX, TSX, Vue, Svelte, Astro, PHP, Blade, Twig, XML, Markdown et d’autres langages, si bien qu’une seule annulation rétablit les deux balises. Le renommage, la fermeture automatique et le cadre autour de la balise correspondante sont gratuits. Zovo Pro (19 USD, payé une seule fois) ajoute Rename Tag in All Files et Check Unclosed Tags in All Files, avec 3 essais gratuits pour chaque outil.

Gratuit, licence MIT. ID de l’extension zovo.zovo-auto-rename-tag, version 0.2.3.

Ce guide existe aussi en English · Deutsch · Español · Italiano · 日本語 · Polski · Português (Brasil) · 简体中文

Étapes dans VS Code

1. Installez Tag Auto Rename & Close Tag Sync depuis le Marketplace, ou appuyez sur Ctrl+P (Cmd+P sur macOS) et lancez ext install zovo.zovo-auto-rename-tag.
2. Ouvrez un fichier HTML, JSX, TSX, Vue, Svelte, PHP ou un autre fichier de template et changez le nom d’une balise ouvrante. La balise fermante change pendant la saisie, et inversement.
3. Tapez > après une balise ouvrante et la balise fermante apparaît après le curseur. Tapez </ et le nom de l’élément ouvert est complété.
4. Placez le curseur sur une balise et les deux balises sont encadrées dans les couleurs de crochets de votre thème.
5. Faites un clic droit dans l’éditeur pour « Go to Matching Tag » et « Select Tag Content ». Pour taper un nouveau nom dans une boîte de saisie, lancez « Tag Sync: Rename Tag Pair… » depuis la Command Palette.
6. Cliquez sur l’élément Tags de la barre d’état pour voir ce qui est actif pour ce fichier, ou pour désactiver l’extension pour un langage. S’il indique « Tags: rename off », cliquez dessus pour activer le renommage pour ce langage.

Ce qui est gratuit et ce qu’ajoute Zovo Pro

Le renommage pendant la saisie, la fermeture automatique sur > et </, le cadre autour de la balise correspondante, Go to Matching Tag, Select Tag Content, Rename Tag Pair… et le menu de la barre d’état sont gratuits. L’extension n’a pas de publicité, ne demande aucune connexion à un compte et fonctionne hors ligne.

Cet outil renomme un composant ou un élément dans tous les fichiers à balises de l’espace de travail en une fois, par exemple <Button> en <UiButton> dans chaque fichier .tsx, .vue, .html et de template. Seuls les noms de balises changent, jamais le texte, les attributs, les chaînes ou les commentaires. Vous voyez d’abord un décompte, « Preview first » ouvre l’aperçu de refactorisation de VS Code, et une seule annulation (Undo) rétablit tous les fichiers.

Utiliser Rename Tag in All Files (Zovo Pro)

7. Ouvrez le dossier du projet dans VS Code. L’outil a besoin d’un dossier ouvert.
8. Lancez « Tag Sync: Rename Tag in All Files… (Pro) » depuis la Command Palette, ou faites un clic droit sur un fichier .html, .htm, .vue, .jsx, .tsx ou .svelte dans l’Explorer et choisissez « Zovo Pro: Rename Tag in All Files ».
9. Tapez la balise à renommer telle qu’elle est écrite dans les fichiers (par exemple Button), puis le nouveau nom.
10. Choisissez « Rename », ou « Preview first » pour vérifier les modifications dans l’aperçu de refactorisation. Les fichiers qui n’étaient pas ouverts sont modifiés mais pas enregistrés. File > Save All les garde, et Undo les rétablit.

Rename Tag in All Files fonctionne 3 fois sur votre ordinateur avant de demander une licence. Il n’y a ni fenêtre surgissante ni compte à rebours.

Zovo Pro coûte 19 USD, payés une seule fois. Ce n’est pas un abonnement, et la licence active les outils Pro de toutes les extensions Zovo, pas seulement de Tag Auto Rename & Close Tag Sync. Après le paiement par carte (Stripe), votre clé de licence s’affiche sur la page suivante. Dans VS Code, lancez « Zovo Pro: Enter Zovo Pro license key » depuis la Command Palette et collez la clé. Elle est vérifiée sur votre ordinateur, sans connexion réseau. Avec GitHub Sponsors, choisissez le palier "$19 one time", puis lancez « Zovo Pro: I already paid: unlock with GitHub Sponsors ».

Une équipe de 5 personnes paie 59 USD une seule fois (par carte). Toutes les règles et tous les outils Pro sont sur la page Zovo Pro (en anglais).

Étapes dans Cursor, Windsurf ou VSCodium

1. Ouvrez la vue Extensions avec Ctrl+Maj+X (Cmd+Maj+X sur macOS).
2. Cherchez zovo.zovo-auto-rename-tag et cliquez sur Install. Cursor, Windsurf et VSCodium installent les extensions depuis Open VSX, où celle-ci s’appelle zovo/zovo-auto-rename-tag.
3. Si votre éditeur n’a pas de galerie, téléchargez le fichier .vsix sur la page Open VSX et lancez « Extensions: Install from VSIX... ».
4. Ensuite, tout fonctionne comme dans VS Code.

Ce que fait Tag Auto Rename & Close Tag Sync

• Renommage en HTML, JSX et TSX, Vue, Svelte, Astro, PHP, Blade, Twig, Jinja, Nunjucks, Liquid, ERB, EJS, Handlebars, XML, SVG et Markdown.
• Les balises vides comme br, img, input, meta et hr ne sont jamais appariées ni fermées.
• Dans un fichier .tsx, seul le vrai JSX compte comme balise. Les comparaisons comme a < b && c > d et les génériques comme useState<string>() ne sont pas touchés, et les fichiers .ts non plus.
• Les commentaires, les chaînes, le contenu de <script> et <style> et les blocs {{ }}, {% %}, <?php ?> et <% %> sont ignorés.
• Les nouveaux fichiers non enregistrés fonctionnent dès qu’ils ont un langage.

Ce qu’il ne fait pas

• En JSX et TSX, TypeScript ferme lui-même les balises, donc l’extension lui laisse la fermeture. La balise fermante ajoutée par TypeScript est une étape d’annulation à part.
• Quand l’extension Vue, Svelte, Astro ou Red Hat XML est installée, c’est elle qui ferme les balises dans son langage, et celle-ci n’intervient pas.
• Les fichiers de plus de 1 Mo ou de 50 000 lignes n’ont ni renommage en direct, ni fermeture, ni mise en évidence (réglages zovoTags.maxFileSizeKB et zovoTags.maxFileLines). La barre d’état le signale, et les commandes fonctionnent toujours.
• Les balises écrites dans des expressions {...} de Svelte ou d’Astro ne sont pas renommées.
• Si l’ancienne extension Auto Rename Tag ou Auto Close Tag est aussi active, les deux peuvent modifier la même balise. Gardez-en une seule.

Questions fréquentes

Pour aller plus loin

Le guide en anglais donne plus de détails et d’autres options. Chaque fonction et chaque réglage sont décrits sur la page de Tag Auto Rename & Close Tag Sync (en anglais).

Faits vérifiés le 12 novembre 2026 sur la version actuelle du Marketplace.