Best Visual Studio Code Extensions

Follow @AbhithRajanby Abhith RajanFebruary 12, 2019 · 5 min read · Last Updated: January 29, 2020

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,

I have created an Extension Pack for Visual Studio Code which includes all the listed extensions. You can install it from marketplace.

Azure

Azure Pipelines

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

Debuggers

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.

JavaScript

JavaScript (ES6) code snippets

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

Import Cost

Import Cost display import/require package size in the editor

Programming Languages

C#

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

ESLint

ESLint integrates ESLint JavaScript into VS Code.

SQL Server (mssql)

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

TSLint

TSLint support for Visual Studio Code

Vetur

Vue tooling for VS Code

Snippets

Angular Snippets (Version 8)

Angular Snippets (Version 8) by John Papa

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

Icon Fonts

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

Other

Auto Rename Tag

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

Highlight Matching Tag

Highlight Matching Tag highlights matching closing or opening tag

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 launch a development local Server with live reload feature for static & dynamic pages

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 provides Markdown linting and style checking for Visual Studio Code.

Markdown Shortcuts

Markdown Shortcuts provide Shortcuts for Markdown editing.

npm Intellisense

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

Polacode

Polacode 📸 makes sharing code as a picture easier.

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.

Todo Tree

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

Turbo Console Log

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

Version Lens

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

Themes

Dracula Official

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

Material Icon Theme

Material Icon Theme provides material design icons for Visual Studio Code

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 is a customizable extension for colorizing matching brackets

Better Comments

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

Bookmarks

Bookmarks enables you to mark lines and jump to them

Code Spell Checker

Code Spell Checker is a spelling checker for source code

Git History

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

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 is a Visual Studio Code plugin that autocompletes filenames.

Prettier - Code formatter

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

vscode ide awesome-list

Written by Abhith Rajan Follow @AbhithRajan
Abhith Rajan is an aspiring software engineer with more than 7 years of experience and proven successful track record of delivering technology-based products and services.
Buy me a coffee ☕

function AskForFeedback() {
    const [isHelpful, setIsHelpful] = React.useState();
    let note;
    if (isHelpful === "yes") {
      note = (
        <div className="notification is-success is-light">
          <h5>
            👊 that ⭐️ button on the official{" "}
            <a
              href="https://github.com/Abhith/abhith.net"
              target="_blank"
              rel="noopener noreferrer"
            >
              GitHub repo
            </a>
          </h5>
          <p>
            Please leave a comment below! <br />
            &#123; thank you ♥ &#125; is enough
          </p>
        </div>
      );
    } else if (isHelpful === "no") {
      note = (
        <div className="notification is-warning is-light">
          <h4>Sorry about that!</h4>
          <p> TODO(abhith): let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <>
          <h4>Your opinion matters</h4>
          <p>Please share your thought about this article </p>
        </>
      );
    }
    return (
      <div className="content">
        <h3>Was this article helpful?</h3>
        <div className="buttons is-centered">
          <button
            className="button is-success is-light"
            onClick={() => setIsHelpful("yes")}
          >
            👍 Yes
          </button>
          <button
            className="button is-warning is-light"
            onClick={() => setIsHelpful("no")}
          >
            👎 No
          </button>
        </div>
        {note}
      </div>
    );
  }

function AskForFeedback() {
    const [isHelpful, setIsHelpful] = React.useState();
    let note;
    if (isHelpful === "yes") {
      note = (
        <div className="notification is-success is-light">
          <h5>
            👊 that ⭐️ button on the official{" "}
            <a
              href="https://github.com/Abhith/abhith.net"
              target="_blank"
              rel="noopener noreferrer"
            >
              GitHub repo
            </a>
          </h5>
          <p>
            Please leave a comment below! <br />
            &#123; thank you ♥ &#125; is enough
          </p>
        </div>
      );
    } else if (isHelpful === "no") {
      note = (
        <div className="notification is-warning is-light">
          <h4>Sorry about that!</h4>
          <p> TODO(abhith): let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <>
          <h4>Your opinion matters</h4>
          <p>Please share your thought about this article </p>
        </>
      );
    }
    return (
      <div className="content">
        <h3>Was this article helpful?</h3>
        <div className="buttons is-centered">
          <button
            className="button is-success is-light"
            onClick={() => setIsHelpful("yes")}
          >
            👍 Yes
          </button>
          <button
            className="button is-warning is-light"
            onClick={() => setIsHelpful("no")}
          >
            👎 No
          </button>
        </div>
        {note}
      </div>
    );
  }

Was this article helpful?

Your opinion matters

Please share your thought about this article

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

Best Visual Studio Extensions

March 17, 2020 · 4 min read

My favorite extensions for Visual Studio 2019

by Abhith Rajanin visual-studio,ide,awesome-list

The Best Extensions for Visual Studio 2010

September 30, 2018 · 2 min read

List of extensions which improves default experience of Visual Studio 2010

by Abhith Rajanin visual-studio,ide,awesome-list

Visual Studio keeps crashing - First Aid

November 20, 2017 · 4 min read

Things you can try to solve the random crashes of Visual Studio.

by Abhith Rajanin visual-studio,ide,debug

Best Laptop for Programming Under $2500 Dollars 2019

June 08, 2019 · 3 min read

Best laptop under 2500$ in 2019 with min spec of i7-9750H, RTX-2060 and Thunderbolt 3 support.

by Abhith Rajanin awesome-list,laptop,shopping-guide

Best Font for Visual Studio

January 15, 2018 · 2 min read

Looking for the best font for programming? Checkout the top three here.

by Abhith Rajanin visual-studio,ide,awesome-list

Git branch not showing in Visual Studio Team Explorer

October 11, 2017 · 2 min read

If you are having trouble to see the newly created (remote) git branches in the Visual Studio Team Explorer, try the workaround provided in this article.

by Abhith Rajanin git,visual-studio,ide

Related Services

Free for developers

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

awesome-list

Best Visual Studio Code Extensions

Azure

Azure Pipelines

Debuggers

Debugger for Chrome

JavaScript

JavaScript (ES6) code snippets

Import Cost

Programming Languages

C#

ESLint

SQL Server (mssql)

TSLint

Vetur

Snippets

Angular Snippets (Version 8)

Document This

ES7 React/Redux/GraphQL/React-Native snippets

Icon Fonts

Other

Auto Rename Tag

Highlight Matching Tag

indent-rainbow

Live Server

Markdown All in One

markdownlint

Markdown Shortcuts

npm Intellisense

Polacode

Peacock

Todo Tree

Turbo Console Log

Version Lens

Themes

Dracula Official

Material Icon Theme

Material Theme

Uncategorized

Bracket Pair Colorizer 2

Better Comments

Bookmarks

Code Spell Checker

Git History

GitLens — Git supercharged

Path Intellisense

Prettier - Code formatter

Was this article helpful?

Your opinion matters

Related Posts

Related Stories

Related Services

Free for developers