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.
Live Sass Compiler
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.
Auto Rename Tag
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.
Similar to the above but with a minifier instead, save a few bytes on the server here and there.
React and NextJS Snippets
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.