How to Check Typo

Introduction

Let me share something that happened recently: the day after our project went live, the big boss sent over a screenshot. In the screenshot, the label on a search box said: “Search Applicaiton”. So of course, I quickly tracked down where it was, fixed it, and submitted the patch.

Why do we need to fix typos?

• They shouldn’t exist in the first place
• To avoid misleading users
• To prevent unexpected bugs

After submitting this typo fix, I started thinking: can we use a tool to catch these stragglers? I asked ChatGPT, and it recommended CSpell.

What is CSpell

CSpell was originally a VS Code extension. Back when we first started using VS Code, it didn’t have a spell checker. As someone with spelling difficulties, I found this to be a major obstacle, so this extension was created. Later, based on user suggestions, CSpell was separated out from the extension and turned into its own library and CLI tool.
https://cspell.org/

Installing CSpell

• Install via npm/yarn/pnpm:

  1	npm install --save-dev cspell

  I personally chose to install it globally so I can use it from any directory:

  1	npm install -g cspell

• Create a configuration file (cspell.config.json or cspell.config.yaml)

  In the official documentation Create a configuration file., you can see the supported formats and locations for config files.

Basic Usage

• Command line usage examples

  1

  cspell .

• Specifying multiple file types

  1	cspell "src/**/*.{js,ts,vue,jsx}"

• Check all .md files in the source directory

  1	cspell 'source/**/*.md'

Run results:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

cspell 'source/_posts_i18n/en/*.md'
18/30 source/_posts_i18n/en/hexo-lazyload-element.md 3.92ms X
source/_posts_i18n/en/hexo-lazyload-element.md:26:20 - Unknown word (embeded) fix: (embedded)
source/_posts_i18n/en/hexo-lazyload-element.md:82:14 - Unknown word (htttps)
19/30 source/_posts_i18n/en/how-do-i-learn-to-be-a-better-developer.md 5.28ms X
source/_posts_i18n/en/how-do-i-learn-to-be-a-better-developer.md:38:47 - Unknown word (Haha)
25/30 source/_posts_i18n/en/progressive-image-loading.md 5.58ms X
source/_posts_i18n/en/progressive-image-loading.md:110:182 - Unknown word (swith) fix: (switch)
source/_posts_i18n/en/progressive-image-loading.md:124:418 - Unknown word (noticable) fix: (noticeable)
source/_posts_i18n/en/progressive-image-loading.md:141:34 - Unknown word (comsumes) fix: (consumes)
source/_posts_i18n/en/progressive-image-loading.md:163:3 - Unknown word (Cavas)
source/_posts_i18n/en/progressive-image-loading.md:198:6 - Unknown word (hilighted) fix: (highlighted)
source/_posts_i18n/en/progressive-image-loading.md:221:5 - Unknown word (canvs)
29/30 source/_posts_i18n/en/thoughts.md 2.57ms X
source/_posts_i18n/en/thoughts.md:113:11 - Unknown word (IELTS)
30/30 source/_posts_i18n/en/ways-of-image-compression-for-web-developers.md 2.07ms X
source/_posts_i18n/en/ways-of-image-compression-for-web-developers.md:29:32 - Unknown word (Chome)
CSpell: Files checked: 30, Issues found: 11 in 5 files.

Configurations

Read: https://cspell.org/docs/Configuration

The configuration I used:

1
2
3
4
5
6
7
8
9
10

module.exports = {
  language: ["en", "en-GB"],
  ignorePaths: [
    "**/node_modules/**",
  ],
  words: [
    "lynan",
    "webp"
  ],
};

Integrate into workflow

We can integrate cspell at different stages.

For example, prebuild has the advantage that if the cspell check fails, the build process will be terminated until the error is fixed.

1
2
3

{
  "prebuild": "cspell . && tsc -b && vite build"
}

Also try: VS Code extension, which checks spelling errors as you type.

CSpell Bundled Dictionaries - Code Spell Checker

Check Multiple Repos

As mentioned at the beginning, I want to check multiple projects for any remaining typos. To do this, I need to:

1. Place all the repositories that need to be checked into a single parent folder;
2. Configure cspell.config.js in this parent folder;
3. Run CSpell from this parent folder.

1
2
3
4
5
6

.
└── Directiory/
    ├── cspell.config.js
    ├── repoA
    ├── repoB
    └── repoC