15 must have VS Code plugin for web development (2018)

An opinionated collection of VS-code plugins for web developers.

Sujeet Kumar Jaiswal
Sujeet’s Blog
2 min readMay 8, 2018

--

VS Code

Below are the list of VS Code plugins, that I feel will improve the overall productivity. For linting, I have used tslint and scss-lint as I mostly use Typescript & SCSS, but if you use plain JS, feel free to use es-lint.

The order of the plugins are only alphabetical, and does not convey any other meaning.

  1. Auto Close Tag
    Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  2. Auto Rename Tag
    Automatically rename paired HTML/XML tag, same as VS IDE does.
  3. Beautify
    Beautify javascript, JSON, CSS, Sass and HTML in VS Code
  4. Code Spell Checker
    A basic spell checker that works well with camelCase code.
  5. Debugger for Chrome
    A VS Code extension to debug your JavaScript code in Google Chrome browser, or other targets that supports the Chrome DevTools Protocol
  6. Document This
    A VS Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files.
  7. EditorConfig for VS Code
    This plugin attempts to override user/workspace settings with settings found in .editorconfig files.
  8. GitLens- Git supercharged
    GitLens supercharges the Git capabilities build into Visual Studio Code. It helps you to visualise 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.
  9. markdownlint
    Markdown/CommonMark linting and style checking for Visual Studio Code
  10. npm Intellisense
    Visual Studio Code plugin that autocompletes npm modules in import statements.
  11. Paste and Indent
    This extension adds limited support for pasting and indenting code. Much like SublimeText’s paste_and_indent
  12. SCSS IntelliSense
    SCSS IntelliSense (Variables, Mixins and Functions) for all files in the workspace.
  13. Sort JSON objects
    Alphabetically sorts the keys in selected JSON objects.
  14. Sort lines
    Sort lines of text in VSCode
  15. TSLint
    Integrates the tsint linter for the TypeScript language into VS Code.
  16. vscode-icons [optional]
    Brings icons to your VSCode. This will help in distinguishing the files easily.

--

--