Add a docs-spellcheck linter
Created by: coliff
I love that this project includes many tests and linters meaning that any broken links, invalid HTML or CSS/JavaScript bugs are caught before a PR can be made.
I think it'd be helpful to add a docs-spellcheck linter so that any spelling errors are caught before being merged. I propose to use the popular cSpell project as it is customizable, easy to use, has useful built-in dictionaries and has a VS Code extension, GitHub Action and CLI options.
There are some Bootstrap terms/words in the docs which show as false positives so we can add a custom dictionary which is automatically read if file is called .cspell.json
(cspell.json
also works but having a . at the beginning keeps all the configs together). That file would look something like this:
{
"version": "0.2",
"words": [
"affordance",
"allowfullscreen",
"autohide",
"autohiding",
"autoplay",
"autoplays",
"blazingly",
"Blockquotes",
"Bootstrappers",
"borderless",
"browserslist",
"browserslistrc",
"btncheck",
"btnradio",
"callout",
"callouts",
"clearfix",
"Codesniffer",
"colorspace",
"combinator",
"Contentful",
"Cpath",
"Crossfade",
"cssgrid",
"Csvg",
"Datalists",
"Deque",
"discoverability",
"docsearch",
"docsref",
"dropend",
"dropleft",
"dropright",
"dropstart",
"dropup",
"errorf",
"favicon",
"favicons",
"flexbox",
"fullscreen",
"fusv",
"getbootstrap",
"globby",
"Grayscale",
"Hoverable",
"hreflang",
"hstack",
"jsdelivr",
"Jumpstart",
"keyframes",
"libera",
"Libsass",
"lightboxes",
"Lowercased",
"markdownify",
"mediaqueries",
"minifiers",
"monospace",
"mouseleave",
"navbars",
"navs",
"Neue",
"noindex",
"Noto",
"offcanvas",
"popperjs",
"prebuild",
"precompiled",
"prefersreducedmotion",
"prepended",
"printf",
"rects",
"relref",
"rgba",
"roboto",
"RTLCSS",
"ruleset",
"screenreaders",
"scrollbars",
"scrollspy",
"Segoe",
"sirv",
"srcset",
"Stylelint",
"subnav",
"svgo",
"tabbable",
"textareas",
"toggleable",
"touchend",
"twbs",
"unitless",
"Unported",
"unstylable",
"unstyled",
"Uppercased",
"urlize",
"vbtn",
"viewports",
"vstack",
"walkthroughs",
"WCAG",
"webfont",
"zindex",
"بالعالم",
"مرحبا"
],
"language": "en,en-US",
"ignorePaths": [
".cspell.json"
]
}
We can install cSpell CLI by adding "cspell": "^5.9.0"
, to devDependencies and then in the scripts in package.json
we can add something like:
"docs-spellcheck": "cspell \"site/**/*.md\"",
(I set it to scan just markdown files and not the examples HTMLs so the Arabic/RTL files are ignored).
Alternatively the spellcheck could just be done via GitHub Action - or just ask everyone contributing to install this extension for real-time spellcheck in VS Code. :-) https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker