How can I change <h1></h1> to <h2></h2> in one go in V.S code? I saw in freecodecamp where the person leading the tutorial just clicked on <h1> and changed it to <h2> and the </h1> automatically changed to </h2>
I have to manually change <h1></h1> to <h2></h2>, so how can I change it automatically?
In VS Code, is it a keyboard shortcut? like shift alt and down arrow?
4
VS Code has a built in setting that lets you edit opening and closing tags for HTML, XML, and JSX files at the same time. It is not on by default, but the setting is called Editor: Linked Editing. This will make it so that changes to the opening or closing tag are linked together.
Here’s an article that explains this feature, along with many other common use cases that people don’t always realize are built into VS Code, and don’t require an extension (not that there is anything wrong with extensions): VS Code – You don’t need that extension
It does not change by clicking, but you can use the following methods
- Manual Replacement with Regular Expressions:
Find:
Replace:
Use Regular Expressions: If you want to replace all occurrences in a file, enable the regular expression option and use //g for the find and for the replace. - Multi-Cursor Editing:
While not a direct conversion, you can use VS Code’s multi-cursor editing to efficiently change multiple tags to simultaneously.
Hold Ctrl (or Cmd on Mac) and click on the opening tags you want to change.
Type h2 to replace all selected with .
The fastest way is to use replace all.
- Press Ctrl + h. This will open the replace prompt at the top right corner.
- Search for
h1and let it replace withh2 - Use the
replace allbutton or press Ctrl + Alt + Enter