DEV Community

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

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

saviomartin profile image Savio Martin ・7 min read

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.

change-case


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

scrnli_22_04_2021_09-29-48.png
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


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


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.

npm


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, placehold.it, LoremFlickr and more

Polacode


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


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!

Discussion (3)

pic
Editor guide
Collapse
dennisvd profile image
Dennis

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.

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

Collapse
james_palermo_bc208e463e4 profile image
James Palermo

34?!

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