相见恨晚！vscode 插件 code spell checker，解决最难发现的 bug ——单词拼写错误

背景

昨天修改一个 css 类名样式不生效的问题，因为用的是 UI 组件库，原本以为是组件库的原因，看了人家官方文档，又反复用 devtool 进行调试，最终发现是因为我把 blog 拼成了 bolg，真是要吐血，这也是我第 n 次犯这种低级错误了，本来人就菜，在这种错误上浪费这么多时间实在是让人脑壳痛。于是我痛定思痛，看了很多教程和文档寻找各种办法，最终找到了一个人气 vscode 插件 code spell checker，在 vscode 的插件市场有 1000 多万的安装量。我使用之后真的衷心感到相见恨晚啊。下面我就重点介绍一下他的安装和使用。

官方教程网址

首先介绍一下人家的 npm package 地址，因为教程总是有时效性，但是人家的官方网址会一直更新，所以你可以先浏览一下我这篇文章，看看这款插件适不适合你，我会大概介绍一下怎么使用，会涵盖大部分开发中需要的内容，如果你有更多的需求呢，可以再去看人家的英文官方文档，毕竟人家讲的会比较细致和全面。

安装

直接去 vscode 的插件商城去安装 code spell checker，默认就会生效，然后如果有单词拼写错误就会在文件和 PROBLEM 选项框中都提示，颜色默认是蓝色。例如：

使用

默认会自动识别单词的拼写，支持驼峰命名法。如果编译器可能有点卡，可以在命令行手动检查：
先全局安装：

npm install -g cspell

对当前目录中所有的文件进行检查

cspell "**"

对 src 下所有 js 文件进行检查

cspell "src/**/*.js"

配合 git

只进行对更改的文件进行检查，适合工程化环境，在多人协作项目引入 code spell checker 插件只会检查那些本地发生更改的部分，执行配置命令：

git diff --name-only | npx cspell --file-list stdin

各种情景的取消拼写检查

不想进行拼写检查

直接去插件商城把该插件 disable 掉。

取消对单个文件的检查

如果想单纯取消对某个文件进行拼写检查，例如给 vscode 的 settings.json 取消拼写检查，可以直接在文件代码开头写上注释，支持好几种：

/* cspell:disable */
/* spell-checker: disable*/
/* spellchecker: disable */

因为不同文件的注释方式不一样，所以不一定是要 /* xxx */ 的方式只要是注释后面有相应的类似 cspell:disable 的方式都可以，比如 js 中//cspell:disable ，html 中<-- spell:disable-->等等都可以

取消对单个文件中某些单词的注释

cspell: ingore 注释，适用对一些文件中引入的库名字做一些拼写忽略，或者自定义字段忽略。
例如：

// cspell:ignore Pinia,zaallano, wooorrdd

json 文件统一配置

插件支持识别本地自定义的一个 cspell.json 配置文件，建议开发中这么使用。建议放在.vscode 文件夹中，或者在项目根目录下，最好在.gitignore 中进行忽略该文件，这样就不会提交到代码仓库,只在本地生效。例如：

// cSpell 配置
{
  // 配置文件版本
  "version": "0.2",

  // 当前生效的语言
  "language": "en",

  // 自定义正确的单词，通常是一些库名字和专有api,
  "words": [
    "vfonts",
    "Lato",
    "Pinia",
    "pinia",
    "ionicons",
    "homebg",
    "vicons",
    "Chatbubble"
  ],

  //确实是单词，但是自认为在项目中一定是错的，设定后就会报错，例如单词the容易写成hte,blog写成blg
  "flagWords": ["hte", "blg"],

  //忽略检查的路径，例如忽略安装的包中的所有代码的检查，忽略svg图片，package.json,readme.md中的单词的检查，还是很有用的
  "ignorePaths": ["node_modules/**", "**/*.{svg,txt,json,md}"]
}

字典支持

该插件还支持一些字典，就是说字典里的单词可以都认为是单词，跳过检查。可以自己写一个字典，也可以用别人的字典。这里推荐一个 github 上的 字典库里面有好多现成的，支持在线安装比如说 vue 的

例如：安装 vue 的字典

可以直接看官方文档地址，也可以跟着我一起进行操作。

全局安装并添加到 cspell 全局设置。

npm install -g @cspell/dict-vue
cspell link add @cspell/dict-vue

此包中的 cspell-ext.json 文件应添加到 cspell.json 文件的导入部分。

{
  // …
  "import": ["@cspell/dict-vue/cspell-ext.json"]
  // …
}

有收获的话可以点个赞哟。