avatarWesley Smits

Summary

The web content provides guidance on customizing Visual Studio Code (VS Code) with themes, fonts, and icons to enhance the editor's visual appeal and user productivity.

Abstract

The article "How To Make Visual Studio Code Look Amazing" on the undefined website discusses various ways to personalize and improve the visual experience of VS Code. It emphasizes the importance of a visually pleasing editor for productivity and eye comfort. The author highlights popular themes, fonts with ligatures, and icon packs available in the VS Code marketplace. The themes mentioned include One Dark Pro, GitHub Theme, Dracula Official, Night Owl, and others, each with its unique aesthetic and user base. The font recommendations, such as JetBrains Mono and Fira Code, focus on monospaced fonts with developer-friendly ligatures. The article also covers icon themes like Material Icon Theme and vscode-icons, which help differentiate file types in the editor. Personal preferences and the impact of these customizations on coding efficiency are discussed, with the author sharing their personal theme setup and encouraging readers to experiment with the suggested options.

Opinions

  • The author expresses a personal preference for JetBrains Mono due to its clarity and readability.
  • The use of code-specific ligatures is advocated for reducing eye fatigue and improving code readability.
  • The Material Icon Theme is recognized as the most downloaded extension on the VSCode Marketplace, indicating its widespread approval among users.
  • Night Owl is recommended for its accessibility features, including considerations for color-blindness and low-light environments.
  • The author reveals a recent switch to the City Lights Icon package and the Night Owl theme, suggesting a continuous exploration of new visual setups.
  • The SynthWave '84 theme is described with enthusiasm for its vibrant, retro-inspired aesthetic.
  • The article concludes with an invitation for readers to share their preferred VS Code setups and to support the author's content by subscribing to Medium or following on social media platforms.

VISUAL STUDIO CODE

How To Make Visual Studio Code Look Amazing

Create a visually pleasing, consistent editor which prevents eye fatigue and keeps you productive

Visual Studio Code is an amazing editor with a large marketplace of extensions to tweak the editor to your use cases. The marketplace currently offers 8.000+ themes to create a visually pleasing editor which is just right for you.

These themes help can adjust the colors of the interface, the icons used to display file types, and more.

Today I want to highlight some of the most popular themes in the marketplace. Also, I will share my personal theme set-up at the end.

Font & Ligatures

Having the right font can be surprisingly effective at increasing your productivity and reducing eye fatigue. There are numerous fonts available that are made especially for developers.

These are usually monospaced fonts. A monospaced font is a font whose characters each occupy the same amount of horizontal space.

Another common addition is the addition of code-specific ligatures. Ligatures are characters consisting of two or more joined symbols. There are two reasons to use code ligatures.

  1. Our brains see a multi-character sequence such as === as three separate characters. This makes our eyes scan all three characters and costs energy to process.
  2. Certain character combinations allow for whitespace correction, this once again makes the ligatures more apparent to the eyes to scan and process.
Ligatures example from Jetbrains Mono — https://www.jetbrains.com/lp/mono/

There are two very popular developer fonts I would like to highlight here

  1. JetBrains Mono
  2. Fira Code

Both fonts are amazing in their own right and are both free to use.

PersonaI preference: have a personal preference for JetBrains Mono. The letters have increased height, more clearcut shapes, and are generally easier to read. I suggest you download and experiment with each font for some time to see if they are right for you.

Using your preferred font in VS Code

  1. Download the font from the above links to your computer and install them locally. I would recommend installing the TTF fonts from the downloaded .zip file.
  2. Open your VS Code’s settings.json file through the command palette (⇧⌘P). Type in settings and select “Preferences: Open User Settings (JSON)”.
  3. Add the following two lines of code to the settings.json to select your preferred font and enable font ligatures. This lets the font fallback on several monospace fonts.

Icon Themes

Visual Studio Code shows an icon before every item in the folder explorer. This icon indicates the type of item. This way you can quickly distinguish the difference between folders, javascript files, and HTML files for example.

These icons can be customized, there are many great packages to download from the marketplace depending on your preference. Let’s go through a couple of popular options.

1. Material Icon Theme — 14.5 million installs

The material icon theme is the most downloaded extension on the VSCode Marketplace. It features a beautiful set of clear icons and deserves all the praise it gets.

2. Monokai Pro — 1.7 million installs

Monokai Pro is both a color- and icon theme together. They can be toggled independently from each other, however. Both the color theme and icons look beautiful and allow you to focus on your code.

3. vscode-icons — 12.1 million installs

vscode-icons is an amazing set of icons that brings immediate clarity to your sidebar. I used this icon set from the first release of VSCode until about a month ago. If you’re unsure about which icon set to take, use this set. It blends in well with any color theme and every icon is straightforward and clear.

4. City Lights Icon package — 96k installs

The city lights icon package features two icon themes for color and monochrome variants. I recently discovered this icon theme through a friend of mine and have been using it for about a month. The monochrome variant is so clean and blends in really nicely with the night owl theme in my opinion.

Colour Themes

Colour themes are by far the biggest visual change you can make to your editor and are highly personal. Nevertheless, I want to name a couple of great choices here that have gained a lot of popularity in the VSCode community.

1. One Dark Pro — 6.2 million installs

One Dark Pro is an exact match of the One Dark theme from Atom. It is the most popular theme on the VSCode marketplace. This theme brings nostalgia for a lot of developers who used Atom in the past.

This theme deserves its popularity. The colors are beautiful and do not distract you from the code.

2. Github Theme — 5.4 million installs

GitHub released a set of its own themes. They have a dark and light theme, and both have a default, high contrast, and color-blind mode.

If you’re a long-time GitHub user and love their color theme then you should definitely try out this theme.

3. Dracula Official — 4.4 million installs

Dracula Official is a very popular theme across many different editors, shells, and other tools. The idea is to create a consistent color theme in all of your workflows. It’s a beautiful dark color theme inspired by the night (hence the vampire theme) :)

For more info on this theme check their website.

4. Night Owl — 1.6 million installs

Night owl is a beautiful dark theme that was specially made for people coding late into the night. According to the author: “Colour choices have taken into consideration what is accessible to people with color-blindness and in low-light circumstances. Decisions were also based on meaningful contrast for reading comprehension and for optimal razzle-dazzle.

I only discovered this theme a month ago and have been using it ever since.

5. One Monokai — 1.5 million installs

The One Monokai theme is a cross between the One Dark Theme and Monokai.

6. Shades of Purple — 1.3 million installs

Shades of Purple is a beautiful theme featuring bold shades of purple. The code basically jumps off your screen with this theme. I know several people who swear by this theme. I’d recommend you give it a shot.

7. SynthWave ’84–1 million installs

This creative theme is influenced by music and the cover artworks of Synthwave bands like Timecop 1983 FM-84, and The Midnight.

It’s very radiant and the code literally glows on your screen. If you’re into the 80’s style, this theme might be right up your alley!

8. Tokyo Night — 650k installs

A clean Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night. This theme is very clean and looks great.

9. Kanagawa — 100k installs

This is a VSCode port of the KANAGAWA.nvim color scheme. It is a dark theme inspired by the colors of the famous painting by Katsushika Hokusai.

10. Bracket Lights Pro — 65K installs

Conclusion

Visual Studio Code has plenty of customization options to make it more aesthetically pleasing for anyone. Let me know in the comments which set-up you liked best or which you are already running!

If you like my content and want to support my efforts, consider becoming a Medium subscriber through my affiliate link. It will cost you nothing extra, but Medium will give parts of the proceeds to me for referring you.

And if you want, you can connect with me on LinkedIn or Twitter!

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.

Visual Studio Code
Vscode Theme
Programming
Front End Development
Technology
Recommended from ReadMedium