Issue #8  (Editor Fonts and Ligatures)06/15/22

Advertisement
Get a weekly dose of tools, articles, and other resources covering remote work, productivity, career well-being, and lots more.

Every year we get new options for coding fonts to consider in our developer setups. If you're interested in changing the default font and related options in VS Code, you can do so via a number of values in the JSON settings. Some of these are also available in the UI settings view, but the full range of options is only available via the JSON view.

Open your JSON settings in split view and search for "editor.fontFamily". Starting there in your VS Code default settings, you'll see four key/value pairs with descriptions in the comments explaining various ways you can adjust the default font in VS Code.

  • fontFamily
  • fontLigatures
  • fontSize
  • fontWeight
Default font settings in VS Code

You can copy any of these key/value pairs over to your custom settings file and make the adjustments you need. On my system the default value for the font family is Consolas, which I'm generally happy with. You can test drive different fonts on a website like this one, which includes popular choices like Fira Code, JetBrains Mono, Inconsolata, and lots more.

Once you've selected the font you want, install it on your system then make the necessary adjustments in your custom settings, as shown below:
 
Custom font settings in VS Code

In my example, I'm trying out Fira Code for the first time. I didn't like the weight of the regular version of the font, nor did I like it when I set fontWeight to "bold". But it looked much nicer when I used a normal font weight using "Fira Code Medium", which is one of the versions included when you install the font.

The fontLigature setting, if set to "true" allows the font to use ligatures, which enables common multiple character patterns to be combined into a single symbol. The screenshot below includes some examples that are common in programming:
 
Fong Ligatures for programming

I don't think the ligatures are for everyone. Personally, I like the natural multi-character version of these symbols. But maybe you'll find these useful.

The four font-related settings I mentioned here are just a few ways you can customize the font in VS Code. I'll discuss further settings you can adjust in future tips.

Now on to this week's hand-picked links!
 

VS Code Tools

SonarLint — Open-source extension for VS Code, Eclipse, JetBrains, etc., that identifies and helps you fix quality and security issues as you code.

code-server — Run VS Code on any machine anywhere and access it in the browser.

Markmap — VS Code extension that integrates markmap, a tool that visualizes your Markdown, into VS Code.

Tailwind Docs — Easily access the Tailwind CSS documentation from within VS Code.

VS Code Articles

Sunsetting Atom — From the GitHub blog, and to the surprise of nobody, since GitHub is now owned by Microsoft, who also owns VS Code. Official sunset date is December 15, 2022.

I’m Switching From VS Code To VS Codium — As the author explains, VS Codium is to VS Code what Chromium is to Google Chrome.

VS Code Updates (May 2022) — Some notable changes include deprecated extension warnings, extension sponsorship, web localization, broken Markdown links, and lots more.

Bytes — A JavaScript newsletter that's entertaining and informative with lots of coding tidbits, news, and tools.   Sponsor 

The Alternatives

Split Vim Workspace Vertically or Horizontally — In case you didn't know, Vim allows you to have multiple horizontal or vertical splits in your active workspace.

ThemeMirror — A gallery of beautiful light and dark themes for CodeMirror, the popular extensible code editor component for web pages.

Molecule — A lightweight Web IDE UI framework built with React.js and inspired by VS Code.


Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.