vscode | ide | awesome-list

Best Visual Studio Code Extensions

My favorite extensions for Visual Studio Code

Edson Frainlar
Edson FrainlarFebruary 12, 2019 Ā· 8 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,

Favorites

Info

All the screenshots are from the vscode marketplace. If any link is broken, please let me know.

Angular Snippets (Version X)

Angular Snippets (Version X)Angular Snippets (Version X)

Angular Snippets (Version X) by John Papa

Angular Snippets (Version X)

The version in the title of this extension keeps changing as new Angular version releases, and that happens more frequently than I update this article, so keeping it as X.

Auto Close Tag

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

Auto Close Tag

Import Cost

Import Cost Import Cost

Import Cost display import/require package size in the editor

Import Cost

Package Json Upgrade

Package Json UpgradePackage Json Upgrade

Package Json Upgrade shows available updates in package.json files. Offers quick fix command to update them and to show the changelog.

Package Json Upgrade

colorize

colorizecolorize

colorize is a vscode extension to help visualize css colors in files.

colorize

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.

indent-rainbow

Todo Tree

Todo Tree Todo Tree

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

Todo Tree

Prettier - Code formatter

Prettier - Code formatter Prettier - Code formatter

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

Better Comments

Better Comments Better Comments

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

Better Comments

VSCode Great Icons

VSCode Great IconsVSCode Great Icons

VSCode Great Icons contains a big pack of icons (200+) for your files.

VSCode Great Icons

Markdown Preview Mermaid Support

Markdown Preview Mermaid SupportMarkdown Preview Mermaid Support

Markdown Preview Mermaid Support adds Mermaid diagram and flowchart support to VS Codeā€™s builtin markdown preview.

A mermaid diagram in VS Code's built-in markdown preview

GistPad

GistPadGistPad

GistPad manage your code snippets and developer notes using GitHub Gists and repositories.

GistPad

Git Graph

Git GraphGit Graph

Git Graph lets you view a Git Graph of your repository, and perform Git actions from the graph.

Git Graph

HTML End Tag Labels

HTML End Tag LabelsHTML End Tag Labels

HTML End Tag Labels labels HTML end tags in VSCode.

HTML End Tag Labels

Hungry Delete

Hungry DeleteHungry Delete

Hungry Delete is to delete an entire block of whitespace or tab, and reduce the time programmers need to press backspace.

Hungry Delete

Inline Parameters for VSCode

Inline Parameters for VSCodeInline Parameters for VSCode

Inline Parameters for VSCode does function parameter annotations displaying inline in VSCode.

Inline Parameters for VSCode

Project Manager

Project ManagerProject Manager

Project Manager lets you easily switch between projects.

Project Manager

Regex Previewer

Regex PreviewerRegex Previewer

Regex Previewer is the regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

Regex Previewer

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)

Markdown All in One

GitHub Copilot

GitHub CopilotGitHub Copilot

GitHub Copilot is your AI pair programmer.

Subscription

GitHub Copilot requires a subscription. It is free for verified students and maintainers of popular open source projects on GitHub.

Other Extensions I Use

Azure

Azure Account

Azure AccountAzure Account

Azure Account is a common Sign-In and Subscription management extension for VS Code.

Azure Resources

Azure ResourcesAzure Resources

Azure Resources is an extension for viewing and managing Azure resources..

Bridge to Kubernetes

Bridge to KubernetesBridge to Kubernetes

Bridge to Kubernetes enables rapid Kubernetes development for teams.

Kubernetes

Kubernetes Kubernetes

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


Debuggers

Dapr

DaprDapr

Dapr makes it easy to run, debug, and interact with Dapr-enabled applications.

Microsoft Edge Tools for VS Code

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


Programming Languages

.NET Core Test Explorer

.NET Core Test Explorer.NET Core Test Explorer

.NET Core Test Explorer is the test Explorer for .NET Core (MSTest, xUnit, NUnit).

C#

C# C#

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

Docker

DockerDocker

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

ESLint

ESLint ESLint

ESLint integrates ESLint JavaScript into VS Code.

JavaScript Booster

JavaScript BoosterJavaScript Booster

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

MDX

MDXMDX

MDX Provides syntax highlighting and bracket matching for MDX (JSX in Markdown) files.

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) enables to develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse on VS Code.

Vetur

Vetur Vetur

Vue tooling for VS Code


Snippets

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 contains simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

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

SurroundSurround

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 as the name suggests, auto rename paired HTML/XML tag.

CodeTour

CodeTourCodeTour

CodeTour allows you to record and playback guided tours of codebases, directly within the editor.

Highlight Matching Tag

Highlight Matching Tag Highlight Matching Tag

Highlight Matching Tag highlights matching closing or opening tag

Live Server

Live Server Live Server

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

markdownlint

markdownlint markdownlint

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

Markdown Shortcuts

Markdown Shortcuts Markdown Shortcuts

Markdown Shortcuts provide Shortcuts for Markdown editing.

npm Intellisense

npm Intellisense npm Intellisense

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

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_modules

Search node_modules enables to quickly search the node_modules folder.

Turbo Console Log

Turbo Console Log Turbo Console Log

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

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 is a spelling checker for source code

Git History

Git History Git History

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

Git History

Path Intellisense

Path Intellisense Path Intellisense

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

More

Additional Resources

Changelog

2022-07-27

  • Rewritten after cross checking with what is actually installed on my side currently.

2022-04-18

  • Added Package Json Upgrade.

2022-03-31

  • Added Markdown Preview Mermaid Support.

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


Edson Frainlar

Written byEdson Frainlar
Mission-driven Full-stack Developer with a passion for developing KTern, Dev Collaboration, and teaching. Curious to explore Quantum Information and Computing.
Connect

Is this page helpful?

Related ArticlesView All

Related VideosView All

Get Started Quick with the .NET Coding Pack for VS Code

Profiling and Dynamic Program Analysis in Rider

Related Tools & ServicesView All

vscode.dev

Visual Studio Code for the Web

Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
free-for.dev

Free for developers

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