DEV Community

Cover image for Go in VSCode: Font ligatures with Cascadia Code
Vuong
Vuong

Posted on

9 2 1 1 1

Go in VSCode: Font ligatures with Cascadia Code

Have you seen this below style in VSCode before?
image
It might be called as Cursive fonts, Stylistic italic, ...

I decided to write this article after figure out how it can work, and it was not really have an existing article yet.

It works if following these general parts:

  • A font supports ligatures and its configuration
  • VSCode text mate rules configuration

Font ligatures is a great feature in VSCode, it has convinced me to switch from Sublime Text to VSCode in the past.

The good fonts support font ligatures and free are Fira Code, Cascadia Code. The current one I'm using is Cascadia Code because it's nice, and it gets updates frequently along with Windows Terminal — a new powerful terminal app on Windows.

Cascadia Code

We can get the installation via so many ways: brew, scoop, choco, download directly from release page on its GitHub page.

After get installed in your OS system, add this configuration to your VSCode



{
    // first item for Windows, next item for macOS
    // because I use sync settings for multiple OS
    "editor.fontFamily": "'Cascadia Code PL', 'CascadiaCodePL', Consolas",
    // setting font ligatures as https://github.com/microsoft/cascadia-code#font-features
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
    // this is optional, it makes the weight of default font become lighter.
    // Otherwise if we set font to 'Cascadia Code PL SemiLight' as it would be the same but it could'nt work with font ligatures.
    // "editor.fontWeight": "350"
}


Enter fullscreen mode Exit fullscreen mode

Text mate rules

Text mate rules configuration is textMateRules — a child of editor.tokenColorCustomizations in VSCode settings, it helps to set colors and styles using textmate theming rules (as VSCode explained)

We have to add this below configuration into settings to make some specific parts in code file get formatted by Stylistic/Cursive fonts, as Cascadia Code, it should be done with italic style as well.



{
  "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    //following will be in italic (=FlottFlott)
                    "comment",
                    "entity.name.type.class", //class names
                    "keyword", //import, export, return…
                    "constant", //String, Number, Boolean…, this, super
                    "storage.modifier", //static keyword
                    "storage.type.class.js", //class keyword
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be excluded from italics (VSCode has some defaults for italics)
                    "invalid",
                    "keyword.operator",
                    "constant.numeric.css",
                    "keyword.other.unit.px.css",
                    "constant.numeric.decimal.js",
                    "constant.numeric.json"
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    }
}


Enter fullscreen mode Exit fullscreen mode

Then it should be done, the result will be shown if you open a .go file, like the cover of this article.

If you like the theme, it's here: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GLHF!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay