DEV Community

loading...
Cover image for 10 VS Code extensions every Frontend Developer should use

10 VS Code extensions every Frontend Developer should use

vansh bhardwaj
Frontend Developer
・3 min read

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.png

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.

emmet.gif

3. ESLint

eslint.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

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

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

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

7. JavaScript ES6 Code snippets

es6.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

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

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

env.gif

10. Debugger for Chrome

debug.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.

Discussion (6)

Collapse
midouwebdev profile image
MidouWebDev

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

Collapse
ainulixc123 profile image
Ainulixc123

agree 👍🏽

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

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.