DEV Community

Cover image for 10 Visual Studio Code Extensions for Frontend Developers in 2020
Simon Holdorf
Simon Holdorf

Posted on • Updated on • Originally published at thesmartcoder.dev

10 Visual Studio Code Extensions for Frontend Developers in 2020

Visual Studio Code had 2.6 millions monthly active users in 2017 (last official number I could find, certainly more by now) and is the arguably the best code editor out there at the moment. One of the best features is the Market Place offering tons of extensions to customize it exactly to your needs and helping you in writing high quality code. In this article I will recommend 10 VS Code extensions for frontend engineers working with HTML, CSS, JavaScript and frameworks like VueJS or ReactJS.

JavaScript Code Snippets

JavaScript Code Snippets Screenshot

This extension was created by Charalampos Karypidis and has been downloaded 4.5 million times so far. It provides Code Snippets for writing JavaScript, Typescript, React, Vue, HHTML, ... and supports ES6 syntax.

NPM

ANPM Screenshot

Every developer knows NPM - the Node Package Manager. This extension helps you to manage your Package.json, provides warnings if dependencies are not installed yet and helps with version control.

Prettier

Prettier Screenshot

Prettier from Esben Petersen is a pretty neat extension that has been downloaded close to 14 million times already. It helps you formatting your code and provides color keywords for more readable code.

CSS Peek

CSS Peek Screenshot

CSS Peak helps you when working markup language class strings and IDs by identifying and enumerating the different styles that are already applied. This comes handy because you no longer have to jump between HTML and CSS files.

Vetur

Vetur Screenshot

Vetur is the official VueJS Extension and was downloaded more than 20 million times already. It provides error checking capabilities, auto-completion features and provides Vue snippets. This is really cool if you are a Vue developer like me!

ESLint

ESLint Screenshot

ESLint - what can I say. Many people love linting, many do not. But the value linting provides for clean code is hardly arguable and this extension with 24 million downloads is the best tool for it if you develop with JavaScript.

Live Sass Compiler

Live Sass Compiler Screenshot

The Live Sass Compiler extension is a small but powerful tool that can compile your SASS/SCSS files to CSS files in real time and provide a live preview of the compiled styles in your browser.

Debugger for Chrome

Debugger for Chrome Screenshot

Chrome for many developers is the number one browser when it comes to developing, testing and debugging there code. With this official extension for VS Code you can do so directly from Visual Studio Code - how cool is that!

Live Server

Live Server Screenshot

Live Server by Ritwick Dey who also created Live Sass Compiler creates a local development server right in Visual Studio Code to serve your static and dynamic sites. Using the go-live button in your editor you can serve your code right away and the extension also supports live reloading - neat!

Beautify

Beautify Screenshot

Last but not least in this collection comes Beautify, another great extension for code formatting much like Prettier. Almost 12 million downloads speak for themselves and you can format code written in JavaScript, JSON, CSS, Sass and HTML.

Conclusion

This collection is far from being complete and the extensions are not necessarily the best but I hope it provides you with some very good tools to help you writing high quality code and become a better web developer. Let me know in the comments if you find something useful or have other suggestions for extensions you think are first class.

Top comments (9)

Collapse
 
nateradebaugh profile image
Nate Radebaugh

Why would I use beautify if prettier is already installed?

Collapse
 
simonholdorf profile image
Simon Holdorf

I'd say it is personal preference really

Collapse
 
emamut profile image
Faber Andrés Vergara • Edited

Awesome! IMHO each library should have links to Marketplace or at least the ext commands

Collapse
 
eerk profile image
eerk

Great list! How do you keep track of all the Beautify, Prettier, and the default VS Code formatting options? Currently I rely on just setting everything in VS Code itself, so I don't have to delve through tons of extra configuration files.

Collapse
 
whyboris profile image
Boris

Thank you for the list. Please include links to the extensions you share.

My favorite extension: Bracket Pair Colorizer

Collapse
 
willowbeehive profile image
Willoughby Labs

Thanks for this list, checking out CSS Peek as we speak!

Collapse
 
simonholdorf profile image
Simon Holdorf

You are welcome!

Collapse
 
gochev profile image
Nayden Gochev

hate there are no links to the extensions

Collapse
 
khuongduybui profile image
Duy K. Bui