[Visual Studio Code](https://code.visualstudio.com) 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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) {`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](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) {`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](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) {`Import

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](https://marketplace.visualstudio.com/items?itemName=zignd.html-css-class-completion) {`IntelliSense

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](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) {`IntelliSense

A VSCode plugin that autocompletes filenames. ### [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) {`Tailwind

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](https://marketplace.visualstudio.com/items?itemName=visualstudioexptteam.vscodeintellicode) {`Visual

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](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

This simple extension automatically adds HTML/XML close tag. ### [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport) {`Auto

This extension automatically finds, parses and provides code actions and code completion for all available imports. ### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) {`Auto

Automatically rename paired HTML/XML tag ### [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) {`Code

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](https://marketplace.visualstudio.com/items?itemName=tabnine.tabnine-vscode) {`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. ## Snippets ### [Emoji Snippets](https://marketplace.visualstudio.com/items?itemName=devzstudio.emoji-snippets)

Emoji Snippets help developers to insert emoji on their files. You can use these emoji in PHP,HTML,JS,CSS,React and more!!! 😎 ### [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) This extension provides you JavaScript/TypeScript and React/Redux snippets in ES7 with Babel plugin features for VSCode. ## Visuals ### [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) {`Bracket

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. ### [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) {`Color

This extension highlights and styles css/web colors found in your document. ### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) {`indent-rainbow`}

A simple extension to make indentation more readable. ### [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) {`Image

This extension shows an image preview in the gutter and on hover. ### [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) {`TODO

Highlight TODO, FIXME and other annotations or keywords within your code. ## Other ### [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) {`CSS

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Supports `Go To Symbol in Workspace` and `Go To Definition`. ### [Emoji Log](https://marketplace.visualstudio.com/items?itemName=ahmadawais.emoji-log-vscode)

Emoji-Log — An Emoji Git commit log messages spec standard. [ 📦👌🐛📖🚀🤖 ‼️ ] ### [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) {`Live

A VSCode extension that helps you compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload. ### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.liveserver) {`Live

Launch a development local server with live reload feature for static & dynamic pages. ### [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) {`Turbo

This extension makes debugging much easier by automating the operation of writing meaningful log messages with a keyboard shortcut. ### [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) {`Markdown

Markdown Preview Enhanced is a SUPER POWERFUL markdown extension for Visual Studio Code that brings you a wonderful markdown writing experience.

#VScode

20+ Awesome VS Code Extensions You Should Consider Using