by Daniel Deutsch
Favorite Visual Studio Code Extensions of 2017
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.
Auto Rename Tag
Automatically rename a paired HTML/XML tag, same as Visual Studio IDE does.
HTML Snippets
This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags, Colorization and Snippets.
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.
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.
React-Native/React/Redux snippets for ES6/ES7
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.
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.
Guides
A Visual Studio Code extension for more guide lines.
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: