Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual studio code: how to automatically change the matching closing tag

In visual studio code when changing the start tag type (e.g., from <div> to <span>) I want the editor to automatically change the matching closing tag. How can I do that?

like image 955
omer727 Avatar asked Aug 11 '18 20:08

omer727


People also ask

How do I enable auto close tags in Visual Studio Code?

File > Preferences > Keymaps, Search 'Auto close' and click on install. If it doesn't work, reload the plugin.

How do I disable auto close tags in Visual Studio Code?

If it does not work properly after this setting, the default VSCode HTML completion may be conflicting. First, go to the Settings and search for "HTML: Auto Closing Tags" and uncheck the setting that is checked by default.

How do you change the same text in VS Code at once?

To select multiple carets, click or make first text selection as usual, and then press Ctrl+Alt while you click or select text in each additional location. You can also automatically add matching text as additional selections, or select a box of text to edit identically on each line.


2 Answers

Start VS Code, go to Plugins and search for Auto Rename Tag. Install, reload, done. This plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

like image 101
Vladislav Ladicky Avatar answered Oct 06 '22 18:10

Vladislav Ladicky


You can use the Rename Symbol command to do this.

  1. Select (or click to put the caret anywhere inside) the opening tag
  2. Hit F2
  3. Enter the new tag name and press Enter

Opening and closing tags will both be renamed.

Alternatively, you can press Shift + Enter at step 3 to preview changes and then Shift + Enter again to apply them.

like image 38
Iwazaru Avatar answered Oct 06 '22 18:10

Iwazaru