Tips

Top 10 Must-Have VS Code Extensions for Web Developers

It’s been a quite while since the VS Code rocking the developer community. I see the VS Code as the first thing that the Open Source world welcomed so warmly. To me, VS Code is the best editor (or IDE maybe?) out there. It allows users to customize everything through a tonne of plugins. In this post, I’ll list the best 10 of them.

1. CSS Peek

As we have something for HTML and something for Javascript, something for CSS would be useful as well for front-end development. CSS Peek is a VS Code extension supporting .html and .js files. It helps to quickly find and check styles applied for selected class or id. It’s beneficial for developers who don’t like to switch between different files or split the screen.

CSS Peek

2. ESLint

If you want to create a friendly, readable, clean code, it’s a great idea to install ESLint into your VS Code. This will help you to stick to standard practices like indentation, for example.

ESLint
ESLint

3. Prettier – Code formatter

If we talk about pretty code, it’s worth to install the Prettier extension in your code editor. Prettier is excellent, especially if you are working on the project with other developers. It removes original styling and puts on the consistent code style. Thanks to consistent formatting the code is much more readable.

Prettier - Code formatter

4. GitLens

The VS Code has a git integration by default. We can make it even better installing GitLens extension. It allows checking who created each line of code when it was created, and it allows us to go to commit details quickly. It’s beneficial in case of working in a team of developers to understand the code history easily.

GitLens

5. Auto Import

Auto import is a great extension that automatically imports files; you don’t have to do it manually anymore. It’s excellent primarily if you work on a component-based project. It’s enough to put the component name, and the plugin will import it.

Auto Import

6. Path Autocomplete

If we are in the area of imports, there is another great extension that will help you if you need to import something manually or place a link to a different file. Path autocomplete extension provides paths completion. While you start typing your path probably with ./ you will notice a dropdown with folders to select. It’s crazy helpful because you don’t have to dig in your files and search the correct path.

Path Autocomplete

7. Final Newline

Sometimes you have to remember about adding a new line to your document, and final-newline comes with a helping hand here. Every time you will save the file, it will insert a new line at the end of the document.

Final Newline

8. Bracket Pair Colorizer

Bracket pair colorizer helps us to find the closing bracket of the current block of code. It sometimes happens that at the end of your file or function, you have more than one or two closing brackets, and it’s not so easy to find the correct one then. If you are using the Bracket Pair Colorizer plugin, every starting and closing bracket has the same color for one block of code. So if your opening tag is blue, your closing tag will be blue as well.

Bracket Pair Colorizer

9. Indenticator

Indeticator is an extension for VS Code which visually highlights current intend depth. It allows distinguishing easily different levels of a different block of codes. Depth is marked with small dots and lines.

Indenticator

10. Settings Sync

When you are setting up a new machine or a new development environment, it’s a pretty dull task to configure all your plugins and settings again and again. The Settings Sync comes in so handy for this kind of situations. This plugin lets you sync your settings using Github Gist.

Settings Sync