Skip to main content

My favourite VSCode plugins

11/6/20168 Min Read

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](ext install 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

Tags:  code
© 2021 by Madole. All rights reserved.
GitHub Repository
Last build: 08.10.2021