15 useful VS Code extensions for front-end development

This article was originally published at:
https://www.blog.duomly.com/13-useful-vs-code-extensions-for-front-end-development/

Since some time Visual Studio Code becomes a very popular IDE for Javascript developers. I started using it two years ago, and in my opinion, it’s a fantastic code editor. It allows me to customize it just as I want. VS Code also has a build-in git integration and terminal, so you don’t have to jump from one window to another.

There are tones of plugins and even themes, where everyone can find something that he or she needs. The proper setup of VSC can improve our productivity; also, there are some plugins that will help developers to create better, clean code.

Because there are so many plugins that can be used for Visual Studio Code, it’s easy to get lost and forget about some useful extensions. This is the reason I would like to share with you ma favorite extensions for VSC for front-end development.

Let's start!

And if you prefer video, here is the youtube version:

1. HTML snippets (Visual Studio Code HTML Snippets)

This is an essential extension for every front-end developer. You don’t have to waste more time writing every HTML tag manually; it’s enough to put only tag name like div and press enter. Or you can even add a few tags which you would like to be nested like ul>li>a and press enter. What’s important, this extension has all HTML5 snippets.

2. JavaScript (ES6) code snippets

In the previous point, you could notice that snippets are handy and can help to prevent lots of spelling bugs and can make coding much faster. Each front-end developer works mostly with JavaScript. To speed up my Javascript coding, I use Javascript code snippets. It also supports .ts, .tsx and .jsx files.

Here it works similar, for example, to create export default class ClassName {} code it’s enough to put ecl and press tab. Easy, right? To find out more code shortcuts take a look at the extension documentation.

3. 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 an 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.

4. Angular/React/Vue

If we are in the code snippets area, it would also be good to mention about extensions for the selected framework. A lot depends on which framework you are using.

– For Angular, there is an extension called Angular Snippets (Version 8) because currently, we have Angular 8, but Angular has a new release for every version of the framework. It provides us code snippets for Typescript and HTML.

– For React.js, there is an excellent extension ES7 React/Redux/GraphQL/React-Native snippets. It provides code snippets for React and Redux using ES7, and it works in a similar way to JavaScript snippets with a tab button.

– For Vue.js development, there is a great extension called Vetur. It has almost 20mln downloads, and it brings a lot of functionalities like code snippets, linking and errors checking, formatting, debugging or highlighting the syntax. It looks very impressive.

5. 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.

6. 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.

7. GitLens

As I mentioned at the beginning, the Visual Studio Code has a git integration. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. Debugger for Chrome

And at the end an excellent plugin for debugging. Wouldn’t it be perfect if we could debug in the console like in the Chrome browser? It’s possible with Debugger for Chrome plugin; it supports setting breakpoints, stepping, debugging evil scripts, and more. If you are tired of switching from files in the code editor to debugging console in the browser, it’s a great plugin for you.

14. Import cost

That's a great extension that will let you control your js bundle size, and it's especially helpful when you plan to split your code into small chunks.
Some of the libraries you import can weigh a lot, sometimes, one library can be heavier than the whole framework, and you need to be aware of that.
Import cost extension will show you the library's exact size, full-size, and the gzipped one.

15. Sort imports

Clean code is one of the most important factors that you should care about when building software. And how you manage imports will have a huge impact on your code quality.

Luckily we can use a very helpful extension named Sort Imports, which manages your imports simply and correctly.
That extension will sort all of your imports in order and put all of them on the top of the file.
What's better, that extension will group all of your imports as well.

Conclusion

In the above article, I shared with you my favorite extensions for Visual Studio Code. I hope you it’s a great tip on how to set your code editor and improve your performance of your development. Also, if you are a beginner, it may help you to focus on learning programming then on looking for a closing tag, or closing bracket.

Have a nice coding!