My Visual Studio Code Set-Up

Introduction

Microsoft’s Visual Studio Code is a great free tool for development — especially for front-end, back-end and TypeScript development. This post will show you some of the extensions I’ve found that have proven to be useful.

Theme & General

Atom One Dark Pro Theme

Atom One Dark Pro looks quite a lot better than the default theme in my opinion.

Path Intellisense

I find the fact that VSCode doesn’t automatically do this a pain in the ass. The extension does a pretty good job at suggesting directories’ and files’ names, and even manages to leave the .ts off the end of files (yes!).

Typescript

Angular Language Service

Angular Language Service makes VSCode the best Angular 2/4 IDE possible. It gives Intellisense an extra kick in effectiveness, and even adds Intellisense and linting to HTML template files.

Auto Import

Write out the class name. CTRL+SHIFT+I. Done. Imported.

Sometimes it doesn’t find the class I actually want, or gets it from somewhere odd, but — most of the time — it’s one of my biggest time savers.

ESLint

Informs me that I’m being an idiot before I ruin everything.

HTML & Front-end

Scss Intellisense

Adds Sass/Scss support. It’s really good, even finding variables across files.

Auto Close Tag

Because I’m lazy.

Auto Rename Tag

Changes the name of the tag at both ends. Saves searching for the other end.

Color Highlight

So I can see all my beautiful colours. It’d be cooler if it highlighted sass variables with their assigned colour, not just the word “pink”.

PHP

PHP Intellisense

Uses PHP Language Server to make Intellisense better… LikeĀ way better.

Git

Git Lens

So I can see who and when the hell broke everything (me). On top of the built-in git, it makes VSCode a powerhouse for git-versioned projects.

Copyright © Matthew Evans 2017