If you are a front-end developer and love to work Visual Studio code (VS code) you probably already know, that VS code extensions make your life as a developer much easier. A VS code extension is a small add on for your editor to add extra functionally. Most greatly improve your developers experience and flow and there are tons of them. So without any further ado, here are my 11 favorite VS code extensions for front-end developer.
Auto Import – ES6, TS, JSX, TSX
If you are working on a bigger application or making use of one of the commonly used front-end frameworks this is a must have extension. If you have the need to make a lot of imports within your file this VS code extension will make your life so much easier. Just make a mention of the class you want to import and the related file will be automatically imported for you (or the option is given when you click on it).
This will save you a lot of time typing out paths to the files you want to import. The extension works with ES6, TypeScript, JSX and TSX files. Because this it can be used for every commonly used front-end framework.
Auto Rename Tag
Auto rename tag is jet another must have VS code extension for every front-end developer. This extension will automatically rename the closing bracket of a HTML tag when you edit the opening tag. Because of this, you have no need anymore to search for the closing tag when you want to change a HTML tag to something else. It works for HTML and XML.
If you are working on very big files this extension might have some performance issues even though I never noticed any at all.
Bootstrap v4 Snippets
A lot of project make use of Bootstrap, so even if you are not working with Bootstrap in your current project this is a good extension to have installed. Bootstrap v4 Snippets gives you great intellisense for bootstrap classes and corresponding snippets. You just type with B-<class name> hit the tab key and voila, your bootstrap snippet gets created for you.
This VS code extension will drastically cut down your development time because almost all of your HTML will be generated for you. Specially if you are familiar with the Bootstrap V4 class names, you will create your HTML templates within seconds.
Bracket Pair Colorizer 2
The name of this extension pretty much explains what it does. It colorizes paired brackets. This helps to give a much better visual representation of your paired brackets within you JS and TS files. It also works for JSON files. Never miss a bracket or remove the wrong one and identify where things open and close with ease.
VS code icons does not really help to improve on your development flow, the your eyes deserve a something as well. The Vscode-icons extension will give your file in the file structure custom icons. Personally I really like the style of the icons and they help to better identify the file type only by looking at the icon.
JSLint and TSLint
Linters are always a good thing to add to your code editor and development project. If you are not used to work with linters, this might bug you out a bit at first, but you should not stop using them. Linters help to keep your code clean and consistent. This is not only helpful if you work with a team, but also is a great improvement on your code-base if you are working on a solo project. The TSLint and JSLint VS code extension already have some default configurations, but you can add more rules if you like.
Prettier – Code formatter
When you are in the zone and stamping out code, the formatting of this code is not always the way you want it to be. Going through all lines of code and fix the formatting is a very time consuming practice. Prettier is a well known formatter that does this for you. Just hit Alt + Shift + F and your code will be formatted automatically. You can edit how prettier formats your code in the configurations, but in most cases the default formatting is pretty good and it works in almost any file type.
IntelliSense for CSS class names in HTML
Intellisense for CSS class names in HTML is a must have for any front-end developer. This VS code extension will scan you workspace and offer intellisense to complete your CSS classes within your HTML templates. No switching back from your HTML to your CSS files anymore to check for class names. Just start typing some letters and the intellisense will show you the available options. Personally this is one of my favorite VS code extensions.
VS Code ES7 React/Redux/React-Native/JS snippets
If you are a React developer this is a must have VS code extension. This extensions give you a ton of short key command to auto generate code snippets. Just type a few letters hit the tab key and your snippets is there. A list of all the available snippets and the corresponding commands can be found on the details page of the extension. An other options is to hit crtl + shirt + p and type ES7 snippet search. This will show you a list of all the options and allows you to execute them.
If you are an Angular developer this is a must have VS code extension. This extension is actually a bundle of multiple VS code Angular extension. It gives you pretty much everything you need when developing an application with Angular in VS code. Some of the best extensions added by this Angular essentials extension are: Angular2 Inline, Angular Language Services, Angular Snippets, TSLint, Angular Console and much more.
Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
This is another great VS code extension for Angular developers. This extensions gives you intellisense when typing in your TS and HTML files within an Angular project and allows you to create snippets from that intellisense. This lets you create NgFor’s, NgIf’s, Ng-Templates and much more.
Hopefully you enjoyed the article and some of the VS code extensions will be useful for you. If you have cool VS code extensions for front-end developers I did not mention in this post, please share them with everyone in the comments.