must use vs code extensions for JavaScript Developers 2022
Tags: javascript, beginners, tutorial, webdev
Published: 2022-01-04 21:09:51

Hi everyone I am back with a new article, today I am going to discuss about popular `vs code` extensions , you must use as a JavaScript Developer.
We all know that `vs code` is one of the most popular light weight and open source code editor, which is used my majority of the developers all over the world and it's extensions brings extra productivity like getting free air pods on buying a MacBook so let's know about some of the useful extensions that you must use.

##`ESlint`

![Eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gpk3rvafu2emk0bkqar.png)
**[get it here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**

`ESLint` is a static code analysis tool for identifying problematic patterns found in JavaScript code like if you use `console.hop()` instead of `console.log()` it will notify you Its `vs code` extension integrates `eslint `features to your editor workspace 

##`Prettier - Code formatter`

![Prettier - Code formatter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz7aympa8atzhgcaiuy6.png)
[get it here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

let's take a situation that you are doing your assignments on A4 sheets and suddenly your comes to your room and scatters everything now you need to rearrange all the papers in a perfect order on your own. Similarly while coding we need to organize our code in a particular format i.e. having proper indentation , spaces between lines now `pettier code formatter` will do this thing for you.

##`Visual Studio IntelliCode`

![Visual Studio IntelliCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k94oil7s2s0eobpg5f2u.png)
[get it here](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

Let's imagine that you are currently forking with more than two languages(say JavaScript, Python, Java ) now what happens that it becomes difficult for one to remember  the syntax of every language, and here comes our hero this `Visual Studio IntelliCode` an AI powered `vscode` extension which automatically detects your next move while coding .

##`Code Runner`

![Code Runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n77e3ktu8tkgiyls3ap0.png)
[get it here](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

Suppose you have written some JavaScript code and you don't want to open the terminal and type node app.js(say) so in that case this vs code extension can help you out i.e. it will run your code just with a single click

##`JavaScript (ES6) code snippets`

![JavaScript (ES6) code snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lco5sy19grgrmn2lubmw.png)
[get it here](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

While forking as a JavaScript developer you must be aware of ES6 feature as it adds many more features intended to make large-scale software development easier so this `JavaScript (ES6) code snippets` extension can help you out by bringing  ES6 code code sipnets to your workspace 

##`Path Intellisense`

![Path Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svqb51wxobbyvp6ali6v.png)
[get it here ](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

 suppose you want to import a particular file to any module and while working on large scale projects it becomes difficult for developers to import files present in a particular location so this extension can help you out a lot in importing and auto filling filenames

##`JavaScript Booster`

![JavaScript Booster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdu27dh0a14rdpn4iblw.png)
[get it here ](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)

If you want to increase your productivity while coding so you must use extension as it will show you proper quick fixes on you typos and errors


##Version lens

![version lens ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7ua9paksrnum10bcb93.png)
[get it here](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens) 

While developing a software product it is crucial to know about the package version details that you are using an in that case this extension can help you out a lot.

##Conclusion 
SO guys this was all about some of the popular `vscode` extension you must know as a JavaScript developer. Don't hesitate to hit a ❤️ and if you find this article helpful , feel free to share it with your peers. And please comment out if you have any queries.
Stay Safe Stay Happy .
Happy Coding :)

##Connect
 <a href="https://linktr.ee/kumarkalyan">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>