34 Ultimate VS Code Extensions to Increase Productivity! 💪
Tags: react, node, css, javascript
Published: 2021-04-30 05:11:37

# Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna show you 34 ultimate VS Code extensions to improve your productivity. I'm pretty sure you'll enjoy this huge list of amazing VS Code Extentions.

---

## [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
![](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

## [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
![](https://github.com/aaron-bond/better-comments/raw/master/images/better-comments.PNG)
The Better Comments extension will help you create more human-friendly comments in your code.

## [Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode)
![](https://github.com/1tontech/bootstrap4-snippets/raw/vscode-6.1.0/vscode/help.gif)
Visual studio code plugin containing Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets. This plugin works in both in the stable & the insiders build.

## [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
![](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/example.png)
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

## [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
![](https://cloud.githubusercontent.com/assets/2899448/10712456/3c5e29b6-7a9c-11e5-9ce4-7eb944889696.gif)
A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

## [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
![](https://github.com/formulahendry/vscode-code-runner/raw/master/images/usage.gif)
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, and custom command

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
![](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)
A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

## [CSS Peek](https://marketplace.visualstudio.com/items?itemName=formulahendry.css-peak)
![](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/working.gif)
Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

## [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
![](https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true)
A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

## [EJS language support](https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support)
![scrnli_22_04_2021_09-29-48.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619063999339/1Bld7vrsV.png)
Syntax highlighting for EJS, Javascript, and HTML tags. Includes javascript autocompletion.

## [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--3xE8s5HC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/snippet.gif)
Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

## [GitHub Pull Requests and Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
![](https://github.com/microsoft/vscode-pull-request-github/raw/main/.readme/demo.gif)
This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code. 

## [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
![](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)
Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

## [Google Fonts](https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts)
![](https://github.com/liorchamla/vsc-google-fonts/raw/master/link-screenshot.gif)
This extension allows you to browse the Google Fonts list and insert into your code either a HTML or a CSS

## [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
![](https://raw.githubusercontent.com/kisstkondoros/gutter-preview/master/images/sample.png)
Shows image preview in the gutter and on hover

## [GraphQL](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql)
![](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)
GraphQL extension for VSCode adds syntax highlighting, validation, and language features like go to definition, hover information and autocompletion for graphql projects. This extension also works with queries annotated with gql tag.

## [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
![](https://github.com/styled-components/vscode-styled-components/raw/master/demo.png)
Syntax highlighting for styled-components

## [Prettify JSON](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)
![](https://www.jqueryscript.net/images/pretty-print-json.jpg)
Visual Studio Code Prettify JSON Extension

## [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
![](https://camo.githubusercontent.com/08af5550483d9e9ccee846ebdbcb74332bdb523a738be4cb5aec8e4ba7df49e8/68747470733a2f2f636974772e6465762f5f6e6578742f696d6167653f75726c3d253246706f737473253246696d706f72742d636f73742532463171756f76335446706747327572376d79434c477473412e67696626773d3130383026713d3735)
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

## [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
![](https://i.imgur.com/5crMfTj.gif)
CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

## [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--BNwgWQjz--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/jxfae4q7i6kbewhxzmzh.png)
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

## [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
![](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)
Launch a development local Server with live reload feature for static & dynamic pages

## [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
![](https://user-images.githubusercontent.com/116461/44539398-e9b5d000-a6b8-11e8-808a-fc41cb5a2926.png)
Real-time collaborative development from the comfort of your favorite tools.

## [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
![](https://user-images.githubusercontent.com/1908863/28495106-30b3b15e-6f09-11e7-8eb6-ca4ca001ab15.png)
Markdown Preview Enhanced ported to vscode

## [Mongo Snippets for Node-js](https://marketplace.visualstudio.com/items?itemName=roerohan.mongo-snippets-for-node-js)
![](https://github.com/roerohan/vscode-MongoSnippets-NodeJS/raw/HEAD/static/example.gif)
Provides snippets, boilerplate code for Mongo queries and completion suggestions for mongoose models.

## [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)
![](https://github.com/Microsoft/vscode-npm-scripts/raw/HEAD/images/validation.png)
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json. 

## [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
![](https://github.com/ChristianKohler/NpmIntellisense/raw/master/images/auto_complete.gif)
Visual Studio Code plugin that autocompletes npm modules in import statements

## [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts)
![](https://github.com/Jakobud/vscode-placeholder-images/raw/master/images/example.gif)
Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash, placehold.it, LoremFlickr and more

## [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
![](https://github.com/octref/polacode/raw/master/demo/usage.gif)
Polaroid for your code

## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--iq3A4Bvp--/c_imagga_scale,f_auto,fl_progressive,h_720,q_auto,w_1280/https://dev-to-uploads.s3.amazonaws.com/i/ywhq89zab0pe84q0pwqn.png)
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

## [Tabnine Autocomplete](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)
![](https://github.com/codota/TabNine/raw/master/with-and-without-tabnine-java.gif)
Tabnine is a powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices - without ever leaving the comfort of VSCode.

## [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
![](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/tailwindcss-intellisense/.github/banner-dark.png)
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

## [Luna Paint](https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint)
![](https://raw.githubusercontent.com/lunapaint/vscode-luna-paint/master/images/readme/demo.png)
Luna Paint is a VS Code extension that lets you edit raster images from within the editor, just open an image from the explorer and start editing like any other file.

## [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
![](https://quokkajs.com/assets/img/main-video.gif)
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.


---
## 👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter [@saviomartin7](https://twitter.com/SavioMartin7). Give a follow!

Follow me on Github [@saviomartin](https://github.com/saviomartin), Don't miss my amazing projects! 💯

Do you know more, Add them in the comments. Feedbacks are greatly appreciated! 🙌
Have an amazing day! 

### 🌎 Lets connect

- [Github](http://github.com/saviomartin)
- [Twitter](https://twitter.com/saviomartin7)
- [LinkedIn](https://www.linkedin.com/in/saviomartin/)
- [Instagram](https://www.instagram.com/teen_developer/)

## 🙌 Support 
My projects are fueled by coffees ☕, get one for me!
[![](https://github.com/appcraftstudio/buymeacoffee/raw/master/Images/snapshot-bmc-button.png)](https://www.buymeacoffee.com/saviomartin)