by Daniel Deutsch

Favorite Visual Studio Code Extensions of 2017

TF1Pfi97jaa58rd96rAgO9FvPkrz8TNM4A1a
Photo by Kevin on Unsplash — https://unsplash.com/photos/w7ZyuGYNpRQ

Here is a list of some extensions I come to enjoy with Visual Studio Code (VSCode). Since I work a lot in the front-end, most of these extensions will be useful for web developers. I have been working previously with Atom, Visual Studio and Webstorm but VSCode suits me best and is just incredible. The developer did a great job ( and still do! ). Try it for yourself and enjoy!

“To enjoy life, you don’t need fancy nonsense, but you do need to control your time and realize that most things just aren’t as serious as you make them out to be.” ― Timothy Ferriss

HTML Extensions

Auto Close Tag

Automatically add an HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

ZLFNZjla4HzI94AlQNxR0clklBRvlDCSSBoX

See more

Auto Rename Tag

Automatically rename a paired HTML/XML tag, same as Visual Studio IDE does.

5lS4Jpanix2vwzO60kfeKNsKpmTrpPvIY2FR

See more

HTML Snippets

This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags, Colorization and Snippets.

iVkIkUJuKHCU2cbJZenkvPc1tQelxCsweAcF

See more

Markdown Extensions

Auto-Open Markdown Preview

This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. If you feel annoying to type “Ctrl+K V” or “⌘+K V” (preview side-by-side) many times, this extension helps you.
See more

Markdown TOC

Generate TOC (table of contents) of headlines from a parsed markdown file.
See more

Markdown Theme Kit

A set of themes based on SublimeText-Markdown/MarkdownEditing.
See more

Code Spell Checker

A basic spell checker that works well with camelCase code.
See more

JavaScript Extensions

Babel ES6/ES7

Adds JavaScirpt Babel es6/es7 syntax coloring.
See more

Debugger for Chrome

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

vyZ7bM0dOPg1YEyVpGqaVsGW8A0a7rq3b1bU

See more

ESLint

Integrates ESLint into VS Code.
See more

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
See more

Code Spell Checker

A basic spell checker that works well with camelCase code.
See more

Node.js Modules Intellisense

Visual Studio Code plugin that autocompletes JavaScript / TypeScript modules in import statements.

sCrQ2wKS-zxM7PiDbdX45pKq7cqI6Dihw5eU

See more

React-Native/React/Redux snippets for ES6/ES7

See more

TSLint

Integrates the tslint linter for the TypeScript language into VS Code.
See more

vscode-styled-components

Syntax highlighting for styled-components.
See more

GraphQL for VSCode

GraphQL syntax highlighting, linting, auto-complete, and more!
See more

yarn

yarn commands for VSCode.
See more

General Extensions

Color Highlight

vscode-ext-color-highlight. This extension styles css/web colors found in your document.
See more

Custom CSS and JS Loader

Custom CSS to your VS Code. Based on Roberto Huertasm’s vscode-icons.

xUYM4P6SmYxosSE4yQ6kNCkEnaDSOCT0fOR1

See more

EditorConfig for VS Code

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.
See more

File Templates

Visual Studio code extenstion that allows to quickly create new files based on defined templates.
See more

Git History (git log)

View git log along with the graph and details. View the history of a file (Git log) or the history of a line in a file (Git Blame). View a previous copy of the file. Compare a previous version with the version in the workspace or another. View commit log details for a selected commit. Compare commits.

e5UGQg9a0F30-oTVtKQA5bnDKIZ8DCOatgVh

See more

Guides

A Visual Studio Code extension for more guide lines.

xI4qAfwGK5qWdzNVlbXlGHrEY3DWiWIE1k7O

See more

Material Icon Theme

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
See more

Rainbow Brackets

Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets.
See more

Prettier

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
See more

Project Manager

Manage your projects right inside Visual Studio Code. Easily access and switch between them.
See more

Theme — Seti-Monokai

Seti Monokai color scheme.
See more

WakaTime

Metrics, insights, and time tracking automatically generated from your programming activity.
See more

Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
See more

Thanks for reading my article! Feel free to leave any feedback!

Daniel is a LL.M. student in business law, working as a software engineer and organizer of tech related events in Vienna. His current personal learning efforts focus on machine learning.

Connect on: