Making Code Easily Readable and Maintainable

Bracket Pair Colorizer 2: Allows matching brackets to be identified with colors.

Bracket Pair

Indent Rainbow: Colorizes the indentation before your text, alternating four different colors on each step.

Indent Rainbow

The first two extensions will fill your editor with a flurry of color, and make the code blocks easily perceptible and pleasing to the eye. Once you get used to them, VS Code feels insipid and bland without them.

AutoClose Tag and Auto Rename Tag: Any web developer feels the pain of typing tags. We need a tool that can quickly and easily generate tags and their children.

AutoClose generates the closing half of a tag as you type the opening half. With Auto Rename, when you change one tag, the corresponding closing tag automatically changes.

AutoClose Tag

Auto Rename Tag

Indenticator: Visually highlights the current indent depth. Helpful when the code is very long.

VS Code Icons: Icons make your editor more appealing.

Dracula: This is a theme I’ve been using for a long time and still love.

Prettier: Enforces a consistent style by parsing your code and reprinting it with its own rules. Prettier takes the maximum line length into account and wraps code when necessary. Install it and see the magic for yourself.

Path Intellisense: This extension is the best at autocompleting filenames.

ESLint or TSLint: These code-checking tools are must-haves to make code more consistent and avoid bugs.