10 VS Code extensions every Frontend Developer should use
Tags: vscode, webdev, programming, productivity
Published: 2021-08-02 15:21:40

Hello everyone, my name is Vansh and I'm a frontend developer. In this blog post, I would like to share 10 VS code extensions that every frontend developer should use. The purpose of using these extensions is to write faster, cleaner, and more consistent code. **Let's Jump in!**

### 1. Live server

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wak3fd5avrcf9u91oyt.png)

It's irritating to save changes in the editor and then refresh the browser to see changes, right? thanks to live server , it enforces auto-reload and ensures that your changes are rendered immediately you save your work. It creates a local development server right in Visual Studio Code to serve your static and dynamic sites.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqr0z7j7c6fato2hnvi8.gif)



### 2. Mithril Emmet

![emmet.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911331550/APGtz9nBw.png)

<a> Emmet </a> is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow . <a> Emmet </a> allow us to generate HTML code much quicker and easier than writing them out ourselves. This can greatly increase your speed in development.

![emmet.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911489695/i3LpxiM_Q.gif)


### 3. ESLint

![eslint.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911586739/JV0XhgklZ.png)

It Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
It allows you to stick to standard practices like indentation and positioning.


### 4. Prettier

![Prettier.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911619229/7sMmDe57z.png)

When writing code, a lot of time goes into formatting. Thanks to Prettier, it automates the task for you, removes original styling and puts on the consistent code style which makes code much more readable. It automatically tidy up the code every time the changes are saved.


### 5. Bracket pair colorizer

![color.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911672756/wHm03X6Wu.png)

It colourizes and gives same colors to your opening and closing brackets.
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 of them. Use Bracket pair colorizer to know where your bracket opens and closes.


### 6. CSS Peek

![csspeeek.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911714987/ZEi9rHJhw.png)

CSS Peek 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 or like to jump between HTML and CSS Back-and-forth.

![csspeek.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1627912371315/jWtonXmpm.gif)


### 7. JavaScript ES6 Code snippets

![es6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911761488/7Mm6noQhw.png)

It provides Code Snippets for your JavaScript code and uses ES6 syntax.
Snippets are handy and can help to prevent lots of spelling bugs and can make coding much faster. To speed up your Javascript coding, use Javascript code snippets. It also supports TypeScript and JSX files.


### 8. Simple React snippets

![rect.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911808645/0gezUqMUw.png)

As mentioned above, Snippets are handy and make coding faster. This extension is a collection of day-to-day React snippets and commands.


### 9. ENV

![env.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911847239/PPVV7gfCa.png)

It is a simple extension, it adds formatting and syntax highlighting support for env files.

![env.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1627912403872/dt828ggmi.gif)


### 10. Debugger for Chrome

![debug.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627911886826/U91zlEDaS.png)

The Debugger for Chrome extension adds the Google Chrome browser debugger into your editor. It allows you to launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome.
It supports setting breakpoints, stepping, debugging 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.