Spell Check Django Templates, HTML, Markdown, and RST Files in VS Code


Spelling is important, and something that most developers are less than perfect at (myself included). In the age of spellcheck and autocorrect, it's inexcusable to have spelling or typographical errors in Markdown, RST, or HTML - yet none of the popular editors can intelligently spell-checking those type of formats by default.

Here is my setup that automatically checks spelling of HTML, Django/Jinja templates, reStructuredText (Sphinx), and markdown in VS Code. It's certainly not perfect, but has worked pretty well for my uses over the past few years.

Step One: Install the Spell Right Extension

I have found Spell Right to be the best spelling extension, for two reasons: first it is capable of using regular expressions to customize what it checks, and second because it can use the OS system dictionary and/or a custom workspace dictionary.

https://marketplace.visualstudio.com/items?itemName=ban.spellright

Step Two: Configure Spell Right

Pop open your VS Code settings (JSON) using Ctrl + E then type > Preferences: Open Settings (JSON).

Anywhere in the main { } section add the following:

/** Spelling **/
/** Taken from: https://www.coderedcorp.com/blog/spell-check-vscode/ **/

// Only spell check the following file types, ignore all others.
"spellright.documentTypes": [
    "markdown",
    "restructuredtext",
    "latex",
    "plaintext",
    "html"
],

// Within those file types, ignore the following sections.
"spellright.ignoreRegExps": [
    // ignore code blocks (surrounded by at least one backtick)
    "/`+([\\s\\S\\w\\W]+?)`+/g",
    // ignore code blocks (rst double colon)
    "/::\\n\\n([\\s\\S\\w\\W]+?)(?=\\n\\S)/g",
    // ignore code-blocks (rst double period)
    "/\\.\\. code\\-block::[\\s\\w]*\\n\\n([\\s\\S\\w\\W]+?)(?=\\n\\S)/g",
    // ignore string assignment (e.g. HTML tag properties)
    "/\\w+\\s*\\=+\\s*[\"\\']+.+[\"\\']+/g"
],

// Within HTML files specifically
"spellright.ignoreRegExpsByClass": {
    "html": [
        // ignore Django/Jinja template tags
        "/\\{[\\{\\%\\#].+[\\#\\%\\}]\\}/g",
        // ignore script tag contents
        "/<script.*?>([\\s\\S\\w\\W]*?)</script>/g",
        // ignore style tag contents
        "/<style>([\\s\\S\\w\\W]*?)</style>/g",
        // ignore actual HTML tags, but not the contents.
        "/<[\\s\\S\\w\\W]+?>/g"
    ]
},

// Never check the following file extensions, even if VS Code thinks they are plaintext.
"spellright.ignoreFiles": [
    "**/.gitignore",
    "**/.spellignore",
    "*.toml"
],

Save the file.

Step Three: Profit

Upon re-opening VS Code, it should now correctly spell check your files. Pop open your most neglected HTML page or doc and watch the spelling errors light up!