vscode | ide | awesome-list

Best Visual Studio Code Extensions

My favorite extensions for Visual Studio Code

Abhith Rajan
Abhith RajanFebruary 12, 2019 · 7 min read · Last Updated:

If you ask which is my favorite IDE, it is Visual Studio Code a.k.a vscode. One major strength of vscode is its extensions. And these are my favorites,

Azure

Azure Pipelines

Azure Pipelines Azure Pipelines Azure Pipelines

Azure Pipelines provides Syntax highlighting, IntelliSense, and more for Azure Pipelines YAML.

Kubernetes

Kubernetes Kubernetes Kubernetes

Kubernetes enables VS Code to develop, deploy and debug Kubernetes applications.


Debuggers

Debugger for Chrome

Debugger for Chrome Debugger for Chrome Debugger for Chrome

Debugger for Chrome enables you to debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

Microsoft Edge Tools for VS Code

Microsoft Edge Tools for VS CodeMicrosoft Edge Tools for VS CodeMicrosoft Edge Tools for VS Code

Microsoft Edge Tools for VS Code enables you to use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.


Formatters

Better Align

Better Align Better Align Better Align

Better Align align code without selecting them first.


JavaScript

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets JavaScript (ES6) code snippets JavaScript (ES6) code snippets

JavaScript (ES6) code snippets contains code snippets for JavaScript in ES6 syntax

Import Cost

Import Cost Import Cost Import Cost

Import Cost display import/require package size in the editor


Programming Languages

Auto Close Tag

Auto Close TagAuto Close TagAuto Close Tag

Auto Close Tag automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.

C#

C# C# C#

C# for Visual Studio Code (powered by OmniSharp)..

Data Preview

Data Preview Data Preview Data Preview

Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files

I use this one mostly to view the log files generated by Serilog. For logging, we rely on Code.Library.AspNetCore and it configures Serilog to generate RenderedCompactJsonFormatter output to a .ndjson file.

Docker

DockerDockerDocker

Docker makes it easy to create, manage, and debug containerized applications.

ESLint

ESLint ESLint ESLint

ESLint integrates ESLint JavaScript into VS Code.

JavaScript Booster

JavaScript BoosterJavaScript BoosterJavaScript Booster

JavaScript Booster enables you to boost your productivity with advanced JavaScript/TypeScript refactorings and commands

PowerShell

PowerShell PowerShell PowerShell

PowerShell enables you to develop PowerShell scripts in Visual Studio Code!

SQL Server (mssql)

SQL Server (mssql) SQL Server (mssql) SQL Server (mssql)

SQL Server (mssql) enables to develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse on VS Code.

TSLint

TSLint TSLint TSLint

TSLint support for Visual Studio Code

Vetur

Vetur Vetur Vetur

Vue tooling for VS Code

XML Tools

XML Tools XML Tools XML Tools

XML Tools provide features including XML Formatting, XQuery, and XPath Tools for Visual Studio Code


Snippets

Angular Snippets (Version 8)

Angular Snippets (Version 8) Angular Snippets (Version 8) Angular Snippets (Version 8)

Angular Snippets (Version 8) by John Papa

Document This

Document This Document This Document This

Document This automatically generates detailed JSDoc comments in TypeScript and JavaScript files.

ES7 React/Redux/GraphQL/React-Native snippets

ES7 React/Redux/GraphQL/React-Native snippets ES7 React/Redux/GraphQL/React-Native snippets ES7 React/Redux/GraphQL/React-Native snippets

ES7 React/Redux/GraphQL/React-Native snippets contains simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

Icon Fonts

Icon Fonts Icon Fonts Icon Fonts

Icon Fonts contains snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!

Surround

SurroundSurroundSurround

Surround is a simple yet powerful extension to add wrapper templates around your code blocks.


Other

Auto Rename Tag

Auto Rename Tag Auto Rename Tag Auto Rename Tag

Auto Rename Tag as the name suggests, auto rename paired HTML/XML tag.

Highlight Matching Tag

Highlight Matching Tag Highlight Matching Tag Highlight Matching Tag

Highlight Matching Tag highlights matching closing or opening tag

indent-rainbow

indent-rainbow indent-rainbow indent-rainbow

indent-rainbow makes indentation easier to read. This extension colorizes the indentation in front of your text alternating four different colors on each step.

Live Server

Live Server Live Server Live Server

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

Markdown All in One

Markdown All in One Markdown All in One Markdown All in One

Markdown All in One is All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

markdownlint

markdownlint markdownlint markdownlint

markdownlint provides Markdown linting and style checking for Visual Studio Code.

Markdown Shortcuts

Markdown Shortcuts Markdown Shortcuts Markdown Shortcuts

Markdown Shortcuts provide Shortcuts for Markdown editing.

npm Intellisense

npm Intellisense npm Intellisense npm Intellisense

npm Intellisense is a visual Studio Code plugin that autocompletes npm modules in import statements

Polacode

Polacode Polacode Polacode

Polacode 📸 makes sharing code as a picture easier.

Peacock

Peacock Peacock Peacock

Peacock subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

Search node_modules

Search node_modulesSearch node_modulesSearch node_modules

Search node_modules enables to quickly search the node_modules folder.

Todo Tree

Todo Tree Todo Tree Todo Tree

Todo Tree show TODO, FIXME, etc. comment tags in a tree view.

Turbo Console Log

Turbo Console Log Turbo Console Log Turbo Console Log

Turbo Console Log enables automating the process of writing meaningful log messages.

Version Lens

Version Lens Version Lens Version Lens

Version Lens shows the latest version for each package using code lens.


Themes

Dracula Official

Dracula Official Dracula Official Dracula Official

Dracula Official is the official Dracula Theme. A dark theme for many editors, shells, and more.

Material Icon Theme

Material Icon Theme Material Icon Theme Material Icon Theme

Material Icon Theme provides material design icons for Visual Studio Code

Material Theme

Material Theme Material Theme Material Theme

Material Theme is one of the most epic theme now for Visual Studio Code


Uncategorized

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 Bracket Pair Colorizer 2 Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 is a customizable extension for colorizing matching brackets

Better Comments

Better Comments Better Comments Better Comments

Better Comments improves your code commenting by annotating with alert, informational, TODOs, and more!

Bookmarks

Bookmarks Bookmarks Bookmarks

Bookmarks enables you to mark lines and jump to them

Code Spell Checker

Code Spell Checker Code Spell Checker Code Spell Checker

Code Spell Checker is a spelling checker for source code

Git History

Git History Git History Git History

Git History enables you to view git log, file history, compare branches or commits

GitLens — Git supercharged

GitLens — Git supercharged GitLens — Git supercharged GitLens — Git supercharged

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

Path Intellisense

Path Intellisense Path Intellisense Path Intellisense

Path Intellisense is a Visual Studio Code plugin that autocompletes filenames.

Prettier - Code formatter

Prettier - Code formatter Prettier - Code formatter Prettier - Code formatter

Prettier - Code formatter is the VS Code plugin for prettier/prettier

Additional Resources

Changelog

2020-11-03

  • Added Auto Close Tag, Search node_modules.

2020-10-15

  • Added Microsoft Edge Tools for VS Code, JavaScript Booster

2020-10-13

  • Added Surround

2020-06-13

  • Added Docker, PowerShell, Kubernetes

2020-05-03

  • Added Better Align

2020-04-25

  • Added Data Preview, XML Tools

Abhith Rajan

Written by Abhith Rajan
Abhith Rajan is an aspiring software engineer with more than nine years of experience and has a proven successful track record of delivering technology-based products and services.
Connect

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Related ArticlesView All

Related VideosView All

Profiling and Dynamic Program Analysis in Rider

Related StoriesView All

Related Tools & ServicesView All

free-for.dev

Free for developers

Free For Dev is a GitHub repo listing out free services for developers