Write better prose in VSCode

I’ve tried a ton of Markdown editors for MacOS. Ulysses, Bear, Obsidian, SimpleNote. Many of them are actually pretty great, but whether through my own ignorance or limitations of the applications themselves, they just never really felt right. My use case for these tools is also a bit more esoteric: I have a custom static site generator and have my Markdown files colocated next to my Svelte files.

It should also come as no surprise that my most-used application on my computer is my code editor, so it makes the most sense for me to try to improve my writing experience in VSCode itself, rather than use a different application altogether.

Here are a few tips that help me write better prose in VSCode.

1. Change your color theme for Markdown files

Unless I’m coding outside on a bright day, I’m using Dracula as my editor’s theme. It’s not just my editor either, I’ve got iTerm, Vim, Firefox, and a bunch of other applications using Dracula. Anything that can be themed with Dracula likely is.

…except when I’m writing. I don’t know why, but writing simply must be done with a light theme. I particularly enjoy Alabaster by Nikita Prokopov. Unfortunately, you can’t set color themes in VSCode per file extension (unlike other settings I’ll mention later), but there is a solution:

Theme by language is a VSCode extension that allows you to change your color theme by language type. Simply open a Markdown file, press ⌘ + Shift + P to open the command palette, type Set theme for current file language, and hit enter. Or, if you want to add these directly to your settings.json file, it might look something like this:

{
    "workbench.colorTheme": "Dracula",
    "theme-by-language.themes": {
        "markdown": "Alabaster"
    },
}

2. Change your font for Markdown files

I use Fira Code for code and Writer for prose, both by the aforementioned Nikita Prokopov.

(As an aside, it seems I owe quite a bit of my day-to-day visual aesthetic happiness to Nikita, so thanks a lot.)

Unlike the color theme though, we can change our fonts per language directly in our settings.json:

    "[markdown]": {
        "editor.fontFamily": "Writer",
        "editor.fontSize": 14,
        "editor.lineHeight": 20,
    },

While I quite like my settings, adjust this to your liking. There are no wrong answers here.

3. Write in Zen Mode

VSCode has a Zen Mode that you can get to by pressing ⌘ + K, Z. It creates a focused, mostly-distraction-free workspace that I find pleasing. For good measure, I also navigate to VSCode’s settings (⌘ + ,), search the term “zen”, and make sure the following items are also checked:

• Hide activity bar
• Hide line numbers
• Hide status bar
• Hide tabs

I also have an extension called Toggle Zen Mode that adds a button to turn Zen Mode on and off, because I frequently fudge the ⌘ + K, Z combination and leave random z’s in my writing. If you catch a spare z here, that’s why.

My attention span is far too short for distractions, so I find Zen Mode to be really helpful.

These three changes have made a marked improvement in my writing. Hope you have a wonderful National Nachos Day.