15 Useful vs Code Extensions for Front-End Development in 2021
Intro to 15 useful VS Code extensions for front-end development
The proper setup of VSC can improve our productivity; also, there are some plugins which will help developers to create better, clean code. Because there are so many plugins which 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.
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 for 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.
3. CSS Peek
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 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.
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.
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 which 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 which 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.
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 of 15 useful VS Code extensions for front-end development
Have a nice coding!
Thank you for reading!