My essential front-end extensions for Visual Studio Code

minute read. Posted on May 14, 2017 in CSS JavaScript

I’ve recently switched from Sublime Text to Visual Studio Code as my primary code editor. As such, I’ve personalized it to feel like home. Here are the most important extensions I use as a front-end developer.

Afterglow Remastered

This is the color theme I’ve been rocking in Sublime Text for a while, so I was pretty happy to discover it had been ported over to Visual Studio Code.

Auto Close Tag

Because who doesn’t want to type section + tab and have an opening and closing tag ready to use?

AutoFileName

import thang from 't ?. No more having to traverse directories to remember what a JavaScript file is called.

Babel ES6/ES7

I don’t know about you, but when I write an arrow function I want it to look as sexy as a normal function. This brings that to VS Code.

Debugger for Chrome

Honestly, I haven’t been able to use this extension to its fully (ahem) extent due to the way I compile my files with Webpack. But this is a super sweet looking extension that does great things, nonetheless.

ESLint

Instead of pushing your code and getting angry that you forgot to run your linter and it failed the CI build, use this extension to see right inline what doesn’t pass your linter config.

Git History (git log)

WHO WAS THE CHUCKLEHEAD THAT WROTE THIS?!?!

If that’s ever crossed your mind, this plugin is for you. See file by file, line by line who the last modifier was.

Material Icon Theme

This brings super clean and pretty icons to the file viewer so you can tell what types of files are what quickly.

PostCSS Sorting

I don’t use PostCSS in any of my projects, but that’s okay because this extension just tells me when I screw up my SCSS property order (based on your .sass-lint.yml) in real time.

Project Manager

This extension allows me to quickly switch between projects AND open a new terminal window (cmd +` ).

Sass Lint

Similar to the ESLint extension, make sure your Sass is up to par with the standards you set forward in your .sass-lint.yml.

Sublime Text Keymap

I was too used to Sublime Text’s keyboard shortcuts that I had to install this. cmd + 4 now opens the fourth tab I have open, like I was used to in Sublime.