轻松检查 Typo

引言

讲个最近发生的事：项目上线第二天，大老板发了一张截图，截图上有个搜素框的标签文案是：“Search Applicaiton”。于是乎赶紧搜索它在哪，修复，提交之。

为什么需要修复 Typo 错误？

• 它们本就不该出现
• 避免误导
• 避免意外的 Bug

提交完这个 typo 修复我在想，能否使用工具来检查这些漏网之鱼呢？问了一下 ChatGPT，它向我推荐了 CSpell。

CSpell 简介

CSpell 最初是 VS Code 的一个扩展。我们刚开始使用 VS Code 时，它​​并没有拼写检查器。作为一个拼写有障碍的人，我发现这是一个很大的障碍，于是这个扩展就诞生了。在用户的建议下，cspell 被从扩展中分离出来，并加入到它自己的库和命令行工具中。
https://cspell.org/

安装 CSpell

• 使用 npm/yarn/pnpm 安装

  1	npm install --save-dev cspell

  我选择安装到全局，这样我可以在任意目录下使用它。

  1	npm install -g cspell

• 创建配置文件（cspell.config.json 或 cspell.config.yaml）

  在官方文档 Create a configuration file. 中可以看到受支持的配置文件格式和位置。

基本用法

• 命令行使用示例

  1

  cspell .

• 指定多个文件类型

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

• 检查 source 目录下的所有 .md 文件

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

  运行结果：

  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.

配置详解

详细请阅读：https://cspell.org/docs/Configuration

我用到的配置：

1
2
3
4
5
6
7
8
9
10

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

集成到工作流中

我们可以在不同的阶段集成 cspell。

例如 prebuild，这样做的好处是如果 cspell 检查未通过，构建流程即终止，直到错误被修复。

1
2
3

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

也可尝试：VS Code 拓展，在输入时即时检查拼写错误。

CSpell Bundled Dictionaries - Code Spell Checker

检查多个仓库

如开头提到的，我想统一检查一下我的多个项目中是否还有 Typo 错误，那么我需要：

1. 将这些需要被检查的仓库放到同一个父级文件夹下；
2. 在这个父级文件夹下配置cspell.config.js
3. 在这个父级文件夹下运行 cpell

1
2
3
4
5
6

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