22+ VS Code extension you should have 
Tags: javascript, vscode, programming, productivity
Published: 2021-05-27 07:00:01

Visual Studio Code is perhaps the most broadly utilized code editors in the developer community. One reason for VS Code's notoriety is its a huge number that accelerate the advancement interaction. 

This post is mainly focused for newbie developer and pros. 

---

###  [Prettier](https://prettier.io/) 

![frame_generic_dark(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620276563571/3-8KtUcGW.png)
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options

Visit -> [Prettier](https://prettier.io/) 

###  [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 

![example.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620276706921/jdcCkPi18.png)

This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.

Visit -> [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 

###  [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) 

![exampleqw.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620276865142/ULrRSJjVZ.png)
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Visit -> [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) 

###  [Better-Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 
The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categories your annotations into:
- Alerts
- Queries
- TODOs
- Highlights
- Commented out code can also be styled to make it clear the code shouldn't be there
-  Any other comment styles you'd like can be specified in the settings

Visit -> [Better-Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 

###  [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 

![main-video.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1620277083638/K0Oy6E4RH.gif)
Testing JavaScript code made simple. Excellent plugin for prototyping and practicing JavaScript. 

Visit -> [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 

###  [NodeJS Extension pack](https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack) 

VS Code comes with a ton of features for Node.js development out of the box. This extension pack adds more!
These are some of my favorite extensions to make Node.js development easier and fun.
Visit ->[NodeJS Extension pack](https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack) 

###  [PolaCode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) 

![1ds.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620277452474/ig1kMJMG0.png)
This expansion is utilized for taking code piece screen captures. It very well may be utilized to reorder the code you need in bit screen captures effectively and save them in the wake of installing the extension. 

Visit ->  [PolaCode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) 

###  [Auto Rename tags](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1615897627061/o4moRAkEM.gif?auto=compress" alt="Auto rename tags GIF">
Auto rename tags made easy to change the tags at once. 

Visit ->  [Auto Rename tags](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

###  [Tabnine](https://www.tabnine.com/) 

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616671171301/b3CwIxvYl.gif?auto=compress">

An extension which knows everything about what you gonna type next, **Tabnine**.  

Visit ->[Tabnine](https://www.tabnine.com/) 

###  [Ionic Extension pack](https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack) 

This extension pack packages some of the most popular (and some I find very useful) VS Code Ionic (2.x and 3.x) extensions.

Visit ->[Ionic Extension pack](https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack) 

###  [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 

With this plugin, you can code with ease knowing that you will maintain correct code etiquette make things easier to read, either for yourself or others! I love how it is really easy to customise and how customisable it is! Everything is configurable through a single file.

Visit -> [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 

###  [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) 

This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

Visit -> [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) 

###  [VueJS extension pack](https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack) 

Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

Visit -> [VueJS extension pack](https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack) 

### Snippets

Snippets helps you increase your productivity while coding. You can find some useful extension snippets list  below. 
 
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 
- [React-Native/React/Redux snippets for es6/es7](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux)
- [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets) 
- [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) 
- [Python Snippets](https://marketplace.visualstudio.com/items?itemName=ms-python.python) 
- [Vue 3 Snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets) 
- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
- [jQuery Code extension](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets) 


###  [Markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 
A markdown extension for writing your blog posts simply or anything else just inside your VS Code. Keyboard shortcuts, table of contents, auto preview and more. 

Visit ->  [Markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 

###  [Search NODE Modules](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules) 

![demo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1620278671685/5BvkxlvRL.gif)
Simple plugin for VS Code that allows you to quickly navigate the file inside your project's node_modules directory. Chances are you have the node_modules folder excluded from the built-in search in VS Code, which means if you want to open and/or edit a file inside node_modules, you can have to find it manually, which can be annoying when your node_modules folder is large.

Visit -> [Search NODE Modules](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules) 

###  [JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) 
![boost](https://raw.githubusercontent.com/xsburg/vscode-javascript-booster/master/resources/recording-v14.0.0.gif)
Boost your productivity with advanced JavaScript/TypeScript refactorings and commands.

Visit ->  [JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) 

---

Thanks for Reading. We'll give the most of the(images) credits to the developers behind these extension, who have spend some hours making these extensions. Shout out to them 🤯🤯.
Also you can Subscribe to our  [newsletter](https://www.devintro.com) , we send it occasionally with amazing news, resources and many thing.