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.
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.
Certain character combinations allow for whitespace correction, this once again makes the ligatures more apparent to the eyes to scan and process.
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
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.
Open your VS Code’s settings.json file through the command palette (⇧⌘P). Type in settings and select “Preferences: Open User Settings (JSON)”.
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.
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.
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.
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.
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.
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.
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) :)
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.
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.
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!