10 VS Code Extensions that Front-End Developers Should Know in 2020

10 VS Code Extensions that Front-End Developers Should Know in 2020

In this article, you'll see 10 VS Code (Visual Studio Code) extensions for front-end developers should know in 2020 for working with HTML, CSS, JavaScript and frameworks like Vegas or ReactJS.

Visual Studio Code had 2.6 millions monthly active users in 2017 (the last official number I could find — it’s certainly more by now) and is 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.

1. JavaScript Code Snippets

Visual Studio Code Extensions

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

2. NPM

Visual Studio Code Extensions

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

3. Prettier

Visual Studio Code Extensions

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

4. CSS Peek

Visual Studio Code Extensions

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.

5. Vetur

Visual Studio Code Extensions

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

6. ESLint

Visual Studio Code Extensions

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.

7. Live Sass Compiler

Visual Studio Code Extensions

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.

8. Debugger for Chrome

Visual Studio Code Extensions

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

9. Live Server

Visual Studio Code Extensions

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!

10. Beautify

Visual Studio Code Extensions

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 complete and the extensions are not necessarily the best but I hope it provides you with some good tools to help you write high quality code and become a better web developer. Let me know in the comments if you find something useful or have other suggestions of extensions you think are first class.

JavaScript html react web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...