13 Useful vs Code Extensions for Front-End Development
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.
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!
Thank you for reading! This article was provided by our teammate Anna.