DEV Community

Cover image for 10 VS Code extensions every Frontend Developer should use
vansh bhardwaj
vansh bhardwaj

Posted on

10 VS Code extensions every Frontend Developer should use

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

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

2. Mithril Emmet


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


3. ESLint


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


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


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


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.


7. JavaScript ES6 Code snippets


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


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


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


10. Debugger for Chrome


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.

Top comments (6)

midouwebdev profile image

Hey, awesome article. Can you make a serie about that ? It will be great !

ainulixc123 profile image

agree 👍🏽

vansh__bhardwaj profile image
vansh bhardwaj

Hey , thank you so much, I use few more extensions as well. I can write about them in my next blog post or you can contact me through email , I'll send you.