My favourite VSCode plugins

November 06, 2016 0 Comments VSCode, Code, packages, plugins

A while ago I published a comprehensive list of my favourite Atom Editor plugins, I've since moved to VSCode for the majority of my development so I thought I'd gather together a similar list for it.


Auto-close-tag

Automatically add HTML/XML close tag, same as Visual Studio IDE does.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install auto-close-tag

Features

  • Automatically add closing tag when you type in the closing bracket of the opening tag
  • After closing tag is inserted, the cursor is between the opening and closing tag
  • Set the tag list that would not be auto closed
  • Automatically close self-closing tag
  • Support auto close tag as Sublime Text 3
  • Use Keyboard Shortcut or Command Palette to add close tag manually

auto-close-tag


Autoimport

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install autoimport

autoimport


Code Settings Sync

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install code-settings-sync

Features

  • Use your github account token and GIST.
  • Easy to Upload and Download on one click.
  • Upload Key : Shift + Alt + U
  • Download Key : Shift + Alt + D
  • Use Other User's Public GIST to completely sync your settings with them.
  • Show a summary page at the end with details.
  • Auto Download Latest Settings on Startup.
  • Auto upload Settings on file change.

It Syncs

  • Settings File
  • Keybinding File
  • Launch File
  • Snippets Folder
  • VSCode Extensions

Document This

"Document This" is a Visual Studio Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install docthis

Document This


Flow Language Support

This extension adds Flow support for VS Code. Flow is a static type checker, designed to find type errors in JavaScript programs.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install flow-for-vscode


Git Blame

See Git Blame information in the status bar for the currently selected line.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install gitblame

git blame


Git Lens

Provides Git information (most recent commit, # of authors) in CodeLens, on-demand inline blame annotations, a blame explorer, and commands to compare changes w/ the working tree or previous versions

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install gitlens

GitLens

Provides Git information (most recent commit, # of authors) in CodeLens, on-demand inline blame annotations, status bar blame information, a blame explorer, and commands to compare changes with the working tree or previous versions.

Features

  • Provides CodeLens on code blocks:

    • Recent Change - author and date of the most recent check-in for that block

      Clicking on the CodeLens opens a Blame history explorer with the commits and changed lines in the right pane and the commit (file) contents on the left

    • Authors - number of authors of a block and the most prominent author (if there are more than one)

      Clicking on the CodeLens toggles Git blame annotations on/off

  • Provides on-demand inline blame annotations with multiple styles

  • Provides Git blame information about the selected line in the status bar
  • Provides a Git blame history explorer to visualize the history of a file or block
  • Provides ability to compare diffs with the working tree as well as with previous versions
  • Provides many configuration settings to allow the customization of almost all Features

git lens


Git History

View git log, file or line History

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install githistory

Features

  • View Git History with graph and details (latest feature)
  • View the details of a commit, such as author name, email, date, committer name, email, date and comments.
  • View a previous copy of the file or compare it against the local workspace version or a previous version.
  • View the changes to the active line in the editor (Git Blame).
  • Configure the information displayed in the list
  • Use keyboard shortcuts to view history of a file or line

git history


Go

Rich Go language support for Visual Studio Code

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install Go

Features This extension adds rich language support for the Go language to VS Code, including:

  • Completion Lists (using gocode)
  • Signature Help (using godoc)
  • Snippets
  • Quick Info (using godef)
  • Goto Definition (using godef)
  • Find References (using guru)
  • File outline (using go-outline)
  • Workspace symbol search (using go-symbols)
  • Rename (using gorename)
  • Build-on-save (using go build and go test)
  • Lint-on-save (using golint or gometalinter)
  • Format (using goreturns or goimports or gofmt)
  • Generate unit tests squeleton (using gotests)
  • Add Imports (using gopkgs)
  • [partially implemented] Debugging (using delve)

go


Javascript ES6 Snippets

Code snippets for JavaScript in ES6 syntax

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install JavaScriptSnippets

Supported languages (file extensions) JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)


Language Stylus

Stylus language support

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install language-stylus

Features

  • Syntax highlighting
  • Symbols provider
  • Completion for selectors, properties, values, variables, functions etc.

stylus


NPM Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install npm-intellisense

npm intellisense

Path Intellisense

Visual Studio Code plugin that autocompletes filenames

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install path-intellisense

Path Intellisense


React Code Snippets

Code snippets for Reactjs development in ES6 syntax

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install ReactSnippets

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • JSX after installing the corresponding extension

React Code Snippets


Seti icons

Icons for VS Code

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install seti-icons

seti icons


Sort Lines

Sorts lines of text

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install sort-lines

Features

Sort lines of text in Visual Studio Code. The following types of sorting are supported:

  • Sort lines - Regular character code based sort (F9)
  • Sort lines (case insensitive) - Case insensitive sort
  • Sort lines (reverse) - Reverse character code based sort
  • Sort lines (unique) - Regular character code keeping only unique items

Sort Lines


Firewatch Theme

A Firewatch theme for Visual Studio Code ported from Sublime Text Port

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install theme-firewatch

Firewatch


Babel ES6/ES7

Adds JS Babel es6/es7 syntax coloring

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-babel-coloring

Babel ES6/ES7


Color Highlight

Highlight web colors in your editor

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install color-highlight

Color highlight


ESLint

Integrates ESLint into VS Code.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-eslint


Jumpy

Jumpy provides fast cursor movement, inspired by Atom's package of the same name.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-jumpy

jumpy


SVGViewer

SVG Viewer for VSCode.

Installation

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-svgviewer

SVGViewer SVGViewer2