轻松检查 Typo

8月24日，2025

前端

大约 875 个字

阅读

引言

讲个最近发生的事：项目上线第二天，大老板发了一张截图，截图上有个搜素框的标签文案是：“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'

运行结果：

cspell 'source/_posts_i18n/en/*.md'

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

我用到的配置：

cspell.config.js

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

key	用途
language	指定语言
ignorePaths	忽略检查的目录
words	自定义的词汇

集成到工作流中

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

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

package.json

1
2
3

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

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

CSpell Bundled Dictionaries - Code Spell Checker

检查多个仓库

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

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

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

JavaScript 工具