Section 1.1: HTML Tag Auto-Renaming

One useful feature that many users overlook is HTML tag auto-renaming. This functionality automatically updates the closing tag to match the opening one as you edit.

Consider the following extension:

• Auto Rename Tag (17.7M downloads): Automatically renames paired HTML/XML tags, similar to Visual Studio IDE.

However, this feature is built into VS Code. You can enable it by adjusting the following setting:

• Editor: Linked Editing: Controls whether linked editing is enabled, allowing related symbols to update while editing. The default setting is false.

Section 1.2: Auto-Trimming Trailing Spaces

Another valuable built-in feature is auto-trimming of trailing spaces. This maintains consistent formatting by removing whitespace at the end of lines in your file.

Extensions you may find include:

• Trailing Spaces (2.0M downloads): Highlights trailing spaces and deletes them instantly.
• AutoTrim (35.4K downloads): Removes trailing tabs and spaces from lines without an active cursor.

To enable auto-trimming, adjust your settings as follows:

• Files: Trim Trailing Whitespace: When enabled, this setting trims trailing whitespace upon saving a file. It defaults to false.

You might want to disable this for Markdown files, as two or more spaces are required at the end of a line for hard line breaks.

Section 1.3: HTML Tag Auto-Wrapping

Wrapping HTML elements is a common task, and this feature allows you to do it quickly without manually inserting tags.

Extensions related to this functionality include:

• htmltagwrap (674K downloads): Wraps selected code with HTML tags.
• html tag wrapper (458K downloads): Wraps selected HTML tags with a customizable wrapper tag.

Fortunately, VS Code has a built-in Wrap with Abbreviation command that allows you to wrap tags swiftly.

Section 1.4: Colorful Indentation

Indentation guides can make it easier to track the structure of your code. While extensions like Indent Rainbow (7.5M installs) colorize indentation levels, this feature is also available natively in VS Code.

To enable colorful indentation, change the Editor > Guides: Bracket Pairs setting from "active" to "always show."

Section 1.5: NPM Integration

Managing NPM scripts is essential in many projects. While extensions like NPM (6.8M installs) support running scripts defined in the package.json file, this functionality is built into VS Code.

You can easily view and run your project's scripts through the built-in NPM scripts view. For quick access, use the Tasks: Run Task command or open the built-in terminal with Ctrl + ` for CLI tasks.