20+ Awesome VS Code Extensions You Should Consider Using

Visual Studio Code is one of the most popular code editors for building and debugging modern web and cloud applications.

Besides being open source and completely free of charge, it boasts a massive library of plugins that I find useful in terms of productivity, customization and developer experience.

Below is a list of favorite VS Code extensions that give me a productivity boost.

Formatters

Prettier

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.

Insights

GitLens

GitLens supercharges the Git capabilities built into VSCode. It helps you 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.

Import Cost

Import cost is a handy tool that will show you the size of the third-party packages that you import in your file. The information appears when you import a package and will help you identify obvious issues with your bundle size.

IntelliSense Plugins

IntelliSense for CSS class names in HTML

A VSCode extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

Path Intellisense

A VSCode plugin that autocompletes filenames.

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing VSCode users with advanced features such as autocomplete, syntax highlighting, and linting.

Visual Studio IntelliCode

This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list. The example below shows this in action for Python code.

Programming Languages

Auto Close Tag

This simple extension automatically adds HTML/XML close tag.

Auto Import

This extension automatically finds, parses and provides code actions and code completion for all available imports.

Auto Rename Tag

Automatically rename paired HTML/XML tag

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

Tabnine

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.

Tabnine works with all major programming languages including JavaScript, Python, TypeScript, PHP, C/C++, HTML/CSS, Go, Java, Ruby, C#, Rust, SQL, Bash, Kotlin, Julia, Lua, OCaml, Perl, Haskell, and React.