Make VSCode Yours

How to take an already great editor and make it better.

“first thing I would do is install a theme that is easy on the eyes and makes coding more interesting”

Visual Studio Code is an incredibly powerful editor thanks to the use of plugins, first thing I would do is install a theme that is easy on the eyes and makes coding more interesting, then install a second one that you enjoy so that if the first one becomes boring or dull you can switch to the second one, this ensures you don’t spend ages looking for a new theme every time you get bored of the current one. My recommendations are Monokai Pro (specifically Filter Spectrum) and Dracula.

After picking a nice theme that makes development easy on the eyes, I would make sure that the git integration is setup correctly, in other words make sure your global user.name and user.email are set so you can use the built in git function from the left sidebar.

As for Plug-Ins I will list the ones I use with a little description of what they do.

This allows you to hot reload your site, your site is added to a localhost, then you can view it in your browser and as soon as you press save it instantly reloads with the updated site.

A SASS Compiler built into your editor means no fiddling with the command line and no need for a GUI Compiler. Just install, open a SASS or SCSS file and click Watch Sass.

Especially useful for Freelancers, install, signup and copy your api key into the wakatime plugin in VSCode and every second you spend coding is tracked with lovely information including what OS, Which Language you were using and what project you were working on.

So simple, I won’t even bother explaining it, I will allow the gif to show exactly what this is for.

Another simple little addition, this clever extension adds a little note after each import letting you know how much space it takes up so you can evaluate whether it’s the right package to be using or whether you’d be better finding a slimmer alternative for your new high speed web app.

This one is really helpful, you can format your documents directly in VSCode, this means no more copy pasting the file into a web browser based formatter and then copy pasting the result back in, just open your command pallete and type format document.

Shave a few ms off that load time.

Similar to the above but with a minifier instead, save a few bytes on the server here and there.

Going to bundle these two together, if you use either of these (or any other framework for that matter) there is likely an intellisense extension to add quick little snippets a few of my favourites are Import Link and Link for NextJS allowing me to import and use Link just by typing imlnk and nlnk

That’s going to be it for this post, I like to keep my setups fairly minimal with as little extra stuff running as possible, the things I do have running tend to just be little time savers and things like that.

Hope you enjoyed this little list.

--

--

--

Skater, Developer, Musician... Full site: https://machooper.com

Love podcasts or audiobooks? Learn on the go with our new app.

Why Everyone is Talking About Isomorphic / Universal JavaScript and Why it Matters

JavaScript Everywhere

React Props And React Context

Feb 23: Inside Cardstack This Week

JS — Callback hell

Let’s replace common list and map usage patterns with Vavr

How To Setup MERN Stack Application (MongoDB, ExpressJS, ReactJS & NodeJS) environment and create…

Javascript for bug bounty hunters — part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mac Hooper

Mac Hooper

Skater, Developer, Musician... Full site: https://machooper.com

More from Medium

Front-End and Back-End Development: What Is the Difference?

The Journey to Juno College

Intro to GET Requests

Week 1: Foundations — WebDev