DEV Community

Cover image for 34 Ultimate VS Code Extensions to Increase Productivity! πŸ’ͺ
Savio Martin
Savio Martin

Posted on

34 Ultimate VS Code Extensions to Increase Productivity! πŸ’ͺ

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

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Better Comments

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

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

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.


A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

Code Runner

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

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

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Debugger for Chrome

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

Syntax highlighting for EJS, Javascript, and HTML tags. Includes javascript autocompletion.

ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

GitHub Pull Requests and Issues

This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.

GitLens β€” Git supercharged

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

This extension allows you to browse the Google Fonts list and insert into your code either a HTML or a CSS

Image preview

Shows image preview in the gutter and on hover


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.


Syntax highlighting for styled-components

Prettify JSON

Visual Studio Code Prettify JSON Extension

Import Cost

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

CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Live Server

Launch a development local Server with live reload feature for static & dynamic pages

Live Share

Real-time collaborative development from the comfort of your favorite tools.

Markdown Preview Enhanced

Markdown Preview Enhanced ported to vscode

Mongo Snippets for Node-js

Provides snippets, boilerplate code for Mongo queries and completion suggestions for mongoose models.


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

Visual Studio Code plugin that autocompletes npm modules in import statements

Placeholder Images

Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash,, LoremFlickr and more


Polaroid for your code

Prettier - Code formatter

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

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

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

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 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. Give a follow!

Follow me on Github @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

πŸ™Œ Support

My projects are fueled by coffees β˜•, get one for me!

Top comments (4)

dennisvd profile image

Plugins are nice to but I try to stick with ones that stick around πŸ˜‚

For example "CSS peek" is apparently no longer on the marketplace.

And installing too many extension can result into less productivity :)
Stick with the really good ones.

cavo789 profile image
Christophe Avonture

Hello. The Auto Rename Tag extension is, I think, no more needed. VSCode can do this natively; see the "editor.renameOnType":true setting.

devendra072002 profile image
Devendra Patil

Image description
Image description

james_palermo_bc208e463e4 profile image
James Palermo


Yikes just get a JetBrains IDE or use Visual Studio Community at that point. That’s a lotta bloat.