15 must have VS Code plugin for web development (2018)
An opinionated collection of VS-code plugins for web developers.
Published in
2 min readMay 8, 2018
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.
- Auto Close Tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does. - Auto Rename Tag
Automatically rename paired HTML/XML tag, same as VS IDE does. - Beautify
Beautify javascript, JSON, CSS, Sass and HTML in VS Code - Code Spell Checker
A basic spell checker that works well with camelCase code. - 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 - Document This
A VS Code extension that automatically generates detailed JSDoc comments for both TypeScript and JavaScript files. - EditorConfig for VS Code
This plugin attempts to override user/workspace settings with settings found in.editorconfig
files. - 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. - markdownlint
Markdown/CommonMark linting and style checking for Visual Studio Code - npm Intellisense
Visual Studio Code plugin that autocompletesnpm
modules in import statements. - Paste and Indent
This extension adds limited support for pasting and indenting code. Much like SublimeText’s paste_and_indent - SCSS IntelliSense
SCSS IntelliSense (Variables, Mixins and Functions) for all files in the workspace. - Sort JSON objects
Alphabetically sorts the keys in selected JSON objects. - Sort lines
Sort lines of text in VSCode - TSLint
Integrates thetsint
linter for the TypeScript language into VS Code. - vscode-icons [optional]
Brings icons to your VSCode. This will help in distinguishing the files easily.