My essential front-end extensions for Visual Studio Code
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.
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.
Because who doesn’t want to type
section + tab and have an opening and closing tag ready to use?
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.
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.
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.
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.
This brings super clean and pretty icons to the file viewer so you can tell what types of files are what quickly.
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.
This extension allows me to quickly switch between projects AND open a new terminal window (
cmd +` ).
Similar to the ESLint extension, make sure your Sass is up to par with the standards you set forward in your
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.