Visual Studio Code (VS Code) by Microsoft has eclipsed IntelliJ (get it?! Eclipsed…) as the leading IDE in the market. Over half of developers surveyed by stackoverflow in 2019 said they used VS Code as their primary development environment. Sure, there are some who still hang onto their old favorites like Eclipse and Emacs. We don’t judge. The increased popularity of VS Code is largely due to it being a true IDE platform, which is built with extensions in mind.
This quickly led to an active marketplace for extensions that add functionality to the free code editor, which, in turn, made VS Code applicable and useful to more and more coders. Seems like even the Apple fanboys have reluctantly jumped on the VS Code bandwagon.
Obviously, having such a broad selection of extensions for Visual Studio Code is what makes VS Code . The challenge of not overegging the proverbial pudding by installing too many extensions you don’t actually need.
To help you choose the extensions that will bring more value than the resources they draw from your system, we’ve created this extensive list of the best extensions available today. While some of these are well-known and commonly-installed, others are hidden gems recommended to us by experienced developers who use Visual Studio Code.
Top 42 VS Code Extensions for 2020
LiveServer
This extension launches a local development server to enable live reload features for static and dynamic pages. You can configure it to automatically reload pages as soon as you save your current work.TabNine
TabNine is your polyglot AI coding assistant. Based on a GPT-2 model, TabNine uses machine learning to help you write code faster and better. There’s no configuration necessary just install and start typing. The AI will typically auto-complete your code in under 10ms.
https://youtu.be/TKLkXh_c-GwLive Share
If you tend to work collaboratively on your code, this official Microsoft extension for VS Code is one you need. It allows instant sharing of current projects alongside debugging sessions, terminal instances, web apps using localhost, and more.Quokka.js
Quokka.js is a live scratchpad for JavaScript. It checks your JavaScript code in real-time and lets you know which blocks have already executed and which have not.Code Spell Checker
Typos make for particularly annoying bugs. This extension can prevent this particular type of annoyances by underlining spelling errors in your code. Code Spell Checker works well with camelCase code while keeping the number of false positives low.-
Auto-Close Tag
Another particularly unpleasant type of bug common in web development are open tags. Auto-Close Tag, as the name suggests, closes your tags automatically. When you open a tag like, the
is instantly added and your cursor is placed between the two. GitLens
VS Code comes with Git support baked in. However, if you want to supercharge it, GitLens help adds several features that help you visualize, navigate, and better understand a project’s Git history.GitHub Extension
If you tend to work a lot with GitHub, Microsoft has got you covered. With the GitHub extension you can clone, create, or publish repos without ever exiting VS Code.Prettier
You think you’re opinionated?! Check out Prettier as it most likely has some critique about your code. It enforces a consistent style by refactoring your code with its own rules that take the maximum line length into account, wrapping code when necessary. It is recommended that you use it in conjunction with ESLint to ensure it follows your own linting configuration.Beautify
An alternative to Prettier, Beautify will reformat code written in Javascript, JSON, Sass, CSS, and HTML.Material Icon Theme
Add the Material Design icons to your VS Code with this helpful extension.ESLint
Another extension to keep your code clean and consistent is ESLint. Covering both code quality and coding style issues, ESLint is a static code analysis tool for identifying problematic patterns in your code.Bracket Pair Colorizer
Does exactly as the name says and colors pairs of brackets for easier recognition of nested component bracket pairs. It also looks fun and colorful on your screen and can be fully customized.Color Highlight
Do you use hex values for colors in frontend development and don’t automatically translate hex to shade in your head? Then you need this extension to highlight web colors in your VS Code editor.Color Picker
Another helpful extension for color selection and assignment is the color picker that adds a UI option to generate color codes.TODO Highlight
Leaving notes for yourself in code comments is not a bad practice. However, they are very easy to forget and ignore. To ensure you do not, this handy extension will highlight comments for you.Better Comments
Good comments often make the difference between maintainable code and a huge mess. This extension does exactly what the name claims – it makes your comments more human-friendly by letting you categorize your annotations into alerts, queries, TODOs, highlights and more.Remote – Containers
Containers have gained popularity in development and if you make use of remote containers, this extension is for you. It provides a full-fledged tool and a well-defined runtime stack to be used for containerizing your programs directly from the VS Code UI.Path Intellisense
Path Intellisense is a Visual Studio Code plugin that autocompletes filenames. It adds Intellisense-style completion to filenames, letting you easily type long path names.Path Autocomplete
Similar to Path Intellisense, this extension provides path completion for VS Code so you don’t have to memorize those long paths.Settings Sync
If you work on multiple machines or simply want to have your VS Code settings and preferences backed-up, the Settings Sync extension is one you should install. It lets you synchronize settings, snippets, themes, file icons, keybindings, workspaces and extensions across machines by using a simple Gist.Debugger for Chrome
This extension is a must-have for front-end developers. It lets you debug front-end code in the Google Chrome browser (or other targets that support the Chrome DevTools Protocol) directly in your VS Code environment.Browser Preview
Launching numerous different browsers manually to preview changes across platforms can be a drag. Browser Preview might help. This extension creates a debuggable real browser preview inside your editor.JavaScript (ES6) Code Snippets
Code snippets are a great way to save keystrokes. This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supporting both JavaScript and TypeScript).ES7, React, Redux & GraphQL Snippets
This extension provides you with another collection of JavaScript and React/Redux snippets in ES7 with Babel plugin features.Reactjs Code Snippets
A collection of code snippets for Reactjs development in ES6 syntax, sourced from a collection originally created for the Sublime text editor.Import Cost
This extension can help keep your bundle size under check. It will display inline in the editor the import/require package size.Filesize
How fat is your code? This extension can help you find out. This extension displays the size of the focused file in the status bar of the editor. If you click on the status bar component it will display more information about the file.Auto Rename Tag
Very simply automatically renames paired HTML/XML tags.TinyPNG
If your project has a lot of visual assets, you may need to compress them. This extension uses the TinyPNG API to compress your JP(E)G and PNG images directly inside VSCode.Image Optimizer
An alternative to TinyPNG is Image Optimizer that also offers support for animate GIF compression in addition to JPEG, PNG file formats.Code Time
Getting swallowed in a coding task is easy. Realizing just how long you’ve been in there is hard. This extension will help you track and understand the time you spend on various coding tasks. Yes, it requires you to create an account, but it’s worth investing a few minutes creating it to be able to optimize your time management in the long run.Turbo console log
This extension aims to automate the process of writing meaningful log messages to make your debugging work easier.NPM
If you work with Node.js, this extension is a must. The Node Package Manager helps you manage your package.json file directly from your VS Code editor. 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.REST Client
If you work with third-party tools and APIs this simple extension will make it easier for you to troubleshoot your apps. It lets you send HTTP requests and view the response in Visual Studio Code directly.CSS Peek
As the name suggests, this extension lets you peek into css ID and class strings as definitions from html files to respective CSS.Regex Previewer
Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in VS Code. To help demystify those regular expressions, it shows the current regular expression’s matches in a side-by-side document that you can toggle on and off.Live SASS Compiler
Watch that saas! This VS Code extension will help you compile/transpile your SASS/SCSS files to CSS files in realtime, reloaded with live browser preview.Polacode
If you tend to look at tutorials and how-tos, you’ve probably come across the perfect code screenshots the authors sometimes include. Odds are these were produced using Polacode – a polaroid for your code.Excel Viewer
If your code uses spreadsheets, this handy extension will let you view Excel spreadsheets and CSV files within Visual Studio Code workspaces.Task Explorer
This extension lets you easily manage system tasks in your VS Code. It supports npm, vscode, ant, gradle, grunt, gulp, batch, bash, make, python, perl, powershell, ruby, and nsis. It neatly organizes all tasks in trees and supports some task execution as well.Remote – SSH
The Remote – SSH extension lets you use any remote machine with a SSH server as your development environment. Simply open any folder on a remote machine using SSH and have at it!
If you think our extensive list is missing an extension – feel free to, well, extend it by adding your own in the comments section.
Top comments (0)