Favorite VS Code Extensions 2017

in #vscode5 years ago


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

Here is a list of some extensions I come to enjoy with VS Code. Since I work a lot in the frontend 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!


📄 Table of contents


“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 HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

animated

See more

Auto Rename Tag

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

animated

See more

HTML Snippets

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

animated

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 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 JS 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.

animated

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.

animated

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 robertohuertasm’s vscode-icons.

img

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.

animated

See more

Guides

A Visual Studio Code extension for more guide lines

img

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:

Coin Marketplace

STEEM 0.18
TRX 0.05
JST 0.022
BTC 17053.54
ETH 1292.04
USDT 1.00
SBD 2.09