Some of the best Visual Studio Code extensions you should check out as a front-end developer this year…

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.

Good News For Front End Developers

This article is for every developer but mostly for the ones that work with markup language, style sheets and Javascript and its numerous frameworks. There has been a boom of submissions of really intresting VS Code Extensions to help for efficient and easier frontend development.(this also shows how the community supports VS Code). In this article I would briefly highlight 10 must-have VS Code Extensions this 2018 so you can pimp up your IDE.

1. Live Server

This cool extension by Ritwick Dey creates a development local server for your static and dynamic pages. A go-live button appears on your task bar so you can seamlessly run your code as a development server. It also comes with a shiny feature: Live Reload which reloads the page as soon as you save your work. Pretty awesome.

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

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

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

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

6. 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)

7. CSS Peek

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

8. Angular 6 snippets

This is the official Angular 6 snippets extension for VS Code. It follows the Angular style guide and helps to make working with Angular a whole lot easier. It has code predictability features coupled with auto-complete functionality compatible with the new version 6. It has support for typescript, service workers, RxJS, ngRx and even Angular Material, If you use Angular and do not already have this, you should really consider getting it.

9. Vetur

This is the official Vue js extension on VS Code. With an impressive 5 million downloads, Vetur has been here to help in making Vue js development easier. It has error-checking capabilities , code auto-completion feature and also has support for providing snippets. Vue developers also get latest updates on meetups and conferences here, its really that cool.

10. 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 front-end developer.