Must have VScode extensions for frontend developers
Tags: code, frontend, beginners, productivity
Published: 2019-08-14 09:58:44

---
title: Must have VScode extensions for frontend developers
published: true
description: My collection of visual studio code extensions that help improve productivity as a frontend developer.
tags: code, frontend,beginner,productivity 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hri69pn39aiiawxqplia.jpeg
---

Visual studio code since being launched has gradually won the hearts of many especially those in frontend development and particularly Javascript devs. When you code, you want to ensure that you're being as productive as possible and when working with VScode, there're a few extensions that help aid your productivity. **Let's Jump in!**

## 1. Live Server

Probably my favourite? Live server takes the stress away from having to save and refresh the browser anytime you want to see how your changes look. It enforces auto-reload and ensures that your changes are rendered immediately you save your work. This gets even more exciting if you've got VScode's auto-save enabled.

 [Check it out here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 

## 2. Live SASS compile

I recently (as recent as a few days ago) started learning SASS and while randomly looking for SASS extensions for VScode, I ran into Live SASS compile. This is a built-in VScode SASS compiler that watches all your SASS files and auto compiles them on save. Great stuff!

 [Link to Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) 

## 3. Beautify

Well, this is another personal favourite! Beautify ensures you never have to worry about code formatting again! With a few settings and configurations you never have to worry about writing ugly code, it makes your code "beautiful".

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) 

## 4. Git lens

_"GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more."_
Quoted from Git lens official website!

One of my favourite features of Git lens is the fact that I can get info about when a change was made and who made that change just by hovering over a line of code. It comes in really handy

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 


## 5. Bookmarks

Bookmarks is an extension that puts little bookmarks in your file gutter. It’s extremely handy when you need to switch between positions inside a file, or if you need a quick reminder anywhere in your project

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 


## 6. Color info

VS Code provides a preview box for colors in CSS files when you hover over them. Color Info allows you to get a much better view of the color your mouse hovers and you could even go further to pick a color that works for you!

 [Link to extention](https://marketplace.visualstudio.com/items?itemName=bierner.color-info) 

## 7. Bracket pair colorizer.

This is a very handy VScode extension, especially when working with Javascript. It colorizes your brackets and easily helps you know where your bracket opens and closes

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 

## 8. ESLint

You were probably expecting this one. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn't adhere to certain style guidelines. The ESlint extension integrates code linting into VScode.

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 


## 9. Autoprefixer

This is a very useful VScode extension for CSS. It helps ensure that vendor prefixes are added to certain CSS properties to easily ensure browser compatibility.

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer) 


## 10. CSS percent

This is a useful extension that helps convert your pixel units to their equivalents in percent.

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=morehardy.css-percent) 

## 11. Intellisense for CSS

This ensures you don't have to type class names in full as it brings up suggestions/auto-completion based on earlier defined class names in your workspaces

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) 

## 12. Settings sync

Let's assume you need to work on a different machine, but it lacks all your favourite VScode snippets, themes, extensions, key bindings, etc. Settings sync fixes this. You can have the same configuration on your local machine saved and reused anywhere you find yourself. Amazing right?

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) 

## 13. HTML to CSS

This extension generates CSS class names and structure based on how they're defined on your HTML. You don't have to worry about defining class names all by yourself, this extension helps you focus on the code and predefines those classes for your HTML structures.

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=neptunedesign.vs-html-to-css) 


## 14. Refactor CSS

This helps you remember reoccurring class names and combinations in your CSS file and provides useful suggestions and auto-complete.


 [Link to extension](https://marketplace.visualstudio.com/items?itemName=urbantrout.refactor-css) 

## 15. Highlight matching tag

This is useful when working with a large HTML codebase. It is often natural to forget where a certain HTML tag closes even if you properly comment your code. This extension helps you find if and where a certain tag closes.

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) 

## 16. Auto-rename tag

A handy extension that helps you rename the closing tag of your HTML document when you make changes to the opening tag. 

 [Link to extension](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 


## Conclusion

There are a few other amazing and useful VScode extensions that you should definitely also install. For example, I personally installed snippets for everything I work with (Bootstrap snippets, font awesome snippets, Bulma snippets, react snippets, HTML snippets, CSS snippets, Javascript snippets, ES6 snippets, etc). This enables you to input code faster and takes time away from having to remember or write them in full.
 
You may also want to activate some of the built-in VScode features to enable speed and productivity, features such as **autosave** and **git**.
Autosave takes away the need to always "CTRL/CMD" + "S" before previewing changes, while Git ensures you can collaborate with other team members and manage commits right inside VScode.