‘Why do people pay more for a room with a good view?’ a friend asked me recently. ‘I don’t care what’s outside my window. Looking out on a natural landscape brings me no more joy than looking out on a dirty brick wall.’
The pragmatists among you might feel about the software you use to write code. Visual Studio Code is a practical tool, after all, so who cares if — visually — it is the software equivalent of a dirty brick wall?
Well, I do. In the same way that working a nice place makes me feel more production, if I enjoy the look of my code, I also enjoy writing it, editing it and painstakingly debugging it. If visuals are important to you too, then you’ve come to the right place. This article will guide you through a handful of the best themes, extensions and settings VS Code has to offer. (And if your favourite aesthetic extension is missing from this list, let me know in the comments!)
Matching Bracket Colours
ESLint, Prettier and Beautify
— Line Wrapping
My Top 5 Themes
— Ayu One Dark Pro
— Night Owl
— Monokai Pro
— Atom One Dark
My Top 5 Icon Themes
— City Lights
— Nomo Dark
— Easy Icon Theme
— Keen Neutral Theme
If you want
=== to look more like ≡,
>= to look more like ⩾, or
!== to look more like ≠, then there’s a font for you.
It’s called FiraCode, and to enable it you need to:
- Install the FiraCode Font locally on your computer. (Click here, then scroll down in
README.MDand click ‘Download’. If in doubt about what font type to install, I’d recommend the TTF versions).
- Add the following code to
"editor.fontFamily": "Fira Code",
When you reload VS Code, the ligatures in your code will now be joined into nice-looking symbols!
Matching Bracket Colours
When you have a lot of parentheses, square brackets and braces, it can be difficult to see where each block of code opens and closes.
The Bracket Pair Colorizer by Coenraads solves this problem. The author has recently released a second version of the extension called Bracket Pair Colorizer 2, which is supposed to bring improvements in speed and accuracy. It’s currently in beta mode, but so far it’s worked well for me.
Bracket Pair Colorizer 2 — Visual Studio Marketplace
Extension for Visual Studio Code — A customizable extension for colourising matching brackets
ESLint, Prettier and Beautify
These three popular extensions can significantly improve the appearance and formatting of your code, but the trick is getting them to work together.
If you install all three without careful use of the settings, there’s a good chance these extensions will override each other in unpredictable ways, and that’s not what we want. But with the right settings in
settings.json (or an extension like Formatting Toggle) we can benefit from each one without the fear of unpredictable behaviour.
In my previous article on VS Code, I wrote about both ESLint and Prettier, with a focus on their more practical functionality. ESLint is primarily a linter (helping you spot errors) and Prettier is mainly a formatting tool, but there’s some crossover in terms of what they do. Finally, Beautify is another formatting tool, but it covers a few circumstances that Prettier doesn’t.
To use the ESLint extension, you’ll first want to install globally on your computer by typing
npm i -g eslint in the terminal. Then you can install the extension here.
Finally, to add it to a particular project (allowing you to control the rules more precisely), navigate to the project folder and type
npm i eslint .
I recommend adding the following code to
Only Windows users need to worry about the
"files.eol": "\n" entry. To find out why, click here.
ESLint — Visual Studio Marketplace
You don’t need to use any fancy terminal commands to install Prettier. Instead, you can grab it straight from the extension marketplace.
Prettier — Code formatter — Visual Studio Marketplace
Extension for Visual Studio Code — VS Code plugin for prettier/prettier
I like the following settings. The first one makes sure Prettier works smoothly with ESLint; the second means Prettier will automatically format code every time you save.
Beautify — Visual Studio Marketplace
Extension for Visual Studio Code — Beautify code in place for VS Code
That’s where a formatter like Beautify can fill the gap. Install the extension, and add the following code to ensure that Beautify only formats languages that Prettier doesn’t already cover:
"html": ["html", "php", "erb"],
This is part visual feature, part handy navigation tool. I like seeing — at a glance — exactly where a given file is within the broader folder structure.
Breadcrumbs are built into VS Code, but they’re turned off by default. Simply add
"breadcrumbs.enabled": true to
settings.json to use them.
To prevent the dreaded horizontal scroll, you can turn on line wrapping by adding
"editor.wordWrap": "on" to
My 5 Top Themes
And now for the one you’ve all been waiting for. I realise theme choice is a highly subjective and sometimes contentious issue, so fasten your seat belts. Here’s a list of my favourite five themes.
(I’ve never spent long using a light theme, so you’ll have to forgive me for leaving those off the list)!
Ayu One Dark Pro
This is the theme I am using at the moment, and it is probably my overall favourite. I use the ‘Mirage’ variant.
Ayu One Dark Pro — Visual Studio Marketplace
Extension for Visual Studio Code — Ayu Dark/Mirage with One Dark Pro
This one’s got more of a nighttime feel than Ayu One Dark Pro, but they’re not too dissimilar.
Night Owl — Visual Studio Marketplace
Extension for Visual Studio Code — A VS Code theme for the night owls out there. Works well in the daytime, too…
This is a firm favourite among the VS Code community, and frankly, there’s little not to like. It’s got nine different options to choose from, and I especially like the ‘Ocean’ and ‘Palenight’ variants.
Material Theme — Visual Studio Marketplace
Extension for Visual Studio Code — Material Theme
Monokai is another popular choice, and this theme is the latest version. Its default variant is an unusual coffee colour, but it works very well.
Monokai Pro — Visual Studio Marketplace
Extension for Visual Studio Code — Beautiful functionality for professional developers, from the author of the original…
Atom One Dark Theme
This one may look familiar to VS Code users switching over from Atom. I think the text colours in this one are especially nice — and as I write this article, I’m tempted to switch over!
My 5 Top Icon Themes
Icon themes control the icons in your folder explorer (usually on the left side of the screen). Here is a selection of five of my favourites.
This is my favourite icon theme. Not only do the icons look great, by they can be toggled between colour and monochrome variants. I use the monochrome version. It looks classy, and it’s not distracting.
City Lights Icon package — Visual Studio Marketplace
Extension for Visual Studio Code — The City Lights icon pack is a gorgeous set of icons which you can toggle by color…
An icon theme built to work well with the Material Theme.
Material Icon Theme — Visual Studio Marketplace
Extension for Visual Studio Code — Material Design Icons for Visual Studio Code
For more of a classic look, try the Nomo Dark Icon Theme.
Nomo Dark Icon Theme — Visual Studio Marketplace
Extension for Visual Studio Code — Nomo Dark Icon Theme
Easy Icon Theme
This is quite a minimalist coloured icon theme. If you’re after something subtle — but not too subtle — try this.
Easy Icon Theme — Visual Studio Marketplace
Extension for Visual Studio Code — A simple icon pack, made to be easy to customise
Keen Neutral Icon Theme
A very minimalist icon theme. A good choice for someone who finds the icons a bit distracting.
Overall, I hope this article has helped you customise your version of Visual Studio Code. If you’d like to share your own VS Code setup, feel free to post it in the comments!