Fond of VS Code on macOS but missing a proper spell checker? Here’s how to leverage the macOS system dictionary in VS Code using the Spell Right extension.

Knowing Your Shit

A good blog not only needs great content (I hope we’re able to meet that bar) but it also needs spot-on spelling because

Good spelling is the difference between knowing your shit and knowing you’re shit.

The same is also true for grammar and punctuation; the above is actually a slight variation of a punchy comment on the aforementioned I’ve seen on The Internet™.

VS Code…

As a (hopefully) frequent reader of this blog, you may have noticed that I’m quite fond of Visual Studio Code. I even installed it on my Chromebook; twice in fact.

After initial scepticism, VS Code has become my go-to tool of choice for all things blogging, allowing me to evolve my workflow into a GitOps centric one where I can effectively and efficiently author “articles-as-code”. In short: it Worx for Me!™

…and Spelling

However, one thing has always bugged me about VS Code: The lack of a decent spell checker. Especially one that seamlessly integrates with the native macOS system dictionary. And it seems that I’m not the only one missing this feature.

There’s a GitHub issue dating back to 2016 requesting exactly that. Despite the issue now being marked as closed, there is still no out-of-the-box spell checking available that integrates with the system dictionary, as of 2020-10-18.

But then I prefer to spell check my articles. So, for years, my work-around workflow used to be

1. Write the article in VS Code
2. Save it to disk
3. Open the exact same article in Atom (or any other app that provides native spell checking by leveraging the OS dictionary integration)
4. Spell check the article
5. Save it to disk
6. Go back to step 1 until the article is finished and free of spelling errors

Now, imagine what happened when I accidentally skipped steps 2 or 5. I either got a spell checked article that wasn’t what I had wri. Or something that I had written but was full of speling mistekas.

The Standard Solution

It’s not that there aren’t any readily available third party solutions out there. In fact, the standard solution to my problem, I was able to find online, most frequently was

Just install one of the many spell checker extensions available on the VS Code marketplace.

Merely judging by the download numbers (extremely reliable, I know) of the popular Code Spell Checker extension (alongside one of its many locales) that’s exactly what a fair amount of users end up doing.

It does what it says on the tin. Spell checking. And that’s great, However, it comes with its own dictionary.

Native Spell Checking Integration

While Code Spell Checker may work for code, I prefer the system dictionary integration when it comes to natural language writing. Thankfully, the VS Code GitHub issue also contains a reply that points to a very viable solution.

Just install the Spell Right extension from the VS Code marketplace.

And I did. Now, whenever I happen to misspell a word, Spell Right draws my attention to it by adding a wiggly line underneath it. Clicking on the word or moving the cursor to it reveals a light bulb as below

Clicking on the light bulb or pressing ⌘ + . then opens the suggestions as below

Finally. Spell checking. In VS Code. As I type along. Using the macOS system dictionary.

Bonus: Leverage OS Locales

But the extension also has another neat trick up its sleeve.

With the right combination of settings, Spell Right is able to use OS locales. (the specific settings you’ve told your system to adopt, such as en-GB).

The documentation mentions that this can be be achieved by deliberately leaving the value of the spellright.language settings parameter empty as

“In case language parameter is not set then language from OS locales is used.” — Spell Right Documentation

However, (and also mentioned in the docs to be fair) this also requires to turn the spellright.groupDictionaries settings off as well (it’s on by default), in order to use locales in the first place.

Bonus 2: Default for Workspaces

The above settings can be applied at both a user and a workspace level. After some experimentation, I eventually settled for the following Spell Right settings in my user settings.json

{
    "spellright.documentTypes": [
        "markdown",
        "latex",
        "plaintext",
        "jsonc"
    ],
    "spellright.groupDictionaries": false,
    "spellright.language": [],
}

Spell checking is now enabled by default in all workspaces for Markdown, LaTeX, plain text, and JSONC files, leveraging the OS locale.

This is most notable, when opening up a new workspace and seeing the now familiar Spell Right “eye” symbol with my OS locale as highlighted below

Finally. Spell checking. In VS Code. As I type along. Using the macOS system dictionary. In all workspaces by default.

So, How do You Spell Check?!

While the above Worx for Me!™ when it comes to spell checking in VS Code that uses the macOS system dictionary, you may have an alternative or better way.

Think this is all rubbish, incomplete, or massively overcomplicated?! Feel free to reach out to me on LinkedIn and teach me something new!

As always, prove me wrong and I’ll buy you a pint!