Introduction

Visual Studio Code, arguably the best Code Editor to use in 2018 (In case you are not convinced, take a quick look at this) has a whole lot of extensions, they come with a kind of Extension-store (just like App store for your apps) called Market Place. There are extensions for debugging code, formatting code, key maps, development technologies (like heroku, github, docker, azure), IDE themes, code linters, code snippets and many other categories.

Live Server

This extension by Ritwick Dey compiles your scss files into css files just as swiftly and as real-time as node-sass. With a watch-my-sass button at the task bar it can show a real-time preview of the compiled styles in your preferred browser, also with the Live Reload feature.

Live Sass Compiler


This extension by Ritwick Dey compiles your scss files into css files just as swiftly and as real-time as node-sass. With a watch-my-sass button at the task bar it can show a real-time preview of the compiled styles in your preferred browser, also with the Live Reload feature.

Javascript Code Snippets
This extension by Charalampos Karypidis with more than 2million downloads and counting provides javascript code snippets in ECMAscript 6 syntax while using a javascript files and other files like Typescript, Javascript React, Typescript React.

NPM
This is the official Node Package Manager support on VS Code. It helps in to manage the package.json file in every imaginable way. It flags warnings for dependencies that are defined but not installed, or the ones that are installed but not defined in the package.json, it also indicates discrepancies in version control of packages. It also provides for quick run of npm commands with easy shortcuts.

ESLint

Here is for all the linting for your Javascript and jsx. Plug-able and makes sure you stick to standard practices like indentation and positioning and many more. It is one of the most downloaded extensions in VS Code with almost 12 million downloads.

Prettier
This very popular extension by Esben Petersen. It currently boasts of having almost 4 million downloads. It helps format Javascript code, colors keywords to make your code easily readable. There are similar extensions and one of the popular ones is beautify (which is also available on the marketplace.

CSS PeekThis really helpful extension by Pranay Prakash helps us when working with markup language class strings and IDs by identifying and enumerating the different styles already applied to the said element. This is very helpful as it saves us a lot of time going back and forth html and css files and also comes in handy for developers that do not enjoy having split screens.

Debugger for Chrome

This is Chrome’s official debugger extension for VS Code. Currently one of the most used extension on the VS Code marketplace. It helps you debug your js files running in your chrome browser straight from VS Code, how cool is that? It has a host of dedicated contributors and goes a long way to make things very easy for a frontend developer.


How do I get these extensions?

  1. First, download VS Code here if you do not already have it, check out amazing things that you can do with VS Code.
  2. Then, just use the search bar on the extension tab to search for the extension of your choice.


Extension Tab

Conclusion

These are just a few extensions out of thousands and thousands of more, there are a whole lot more and these are not necessary the best, but most of them are must-haves for frontend web developers. Let me know what your favorite VS Code extensions are down in the comments! :)