背景

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

官方网址

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

安装插件

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

使用

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

先全局本地安装，当然也可以安装在项目开发环境中，但是我不太建议，因为如果这样你每一个项目都要装，但是它实际上并不属于项目的代码，不应该提交到github仓库，也不应该出现在项目中，他只是发挥一个辅助作用，这里只介绍全局安装：

bash

复制代码
npm install -g cspell

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

bash

复制代码
cspell "**"

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

bash

复制代码
cspell "src/**/*.js"

配合 git

只进行对更改的文件进行检查，适合那些工程化和团队协作的项目引入， code spell checker 插件只会检查那些发生更改的部分,执行全局生效配置命令行：

bash

复制代码
git diff --name-only | npx cspell --file-list stdin

取消拼写检查

不想进行拼写检查

直接去插件商城把该插件 disable 掉，想用的时候再打开。

取消对单个文件的检查

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

text

复制代码
/* cspell:disable */
/* spell-checker: disable*/
/* spellchecker: disable */

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

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

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

js

复制代码
// cspell:ignore Pinia,zaallano, wooorrdd

json 文件统一配置

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

json

复制代码
// 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 全局设置。

bash

复制代码
npm install -g @cspell/dict-vue
cspell link add @cspell/dict-vue

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

json

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

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

源文：相见恨晚！解决发现的 bug ——单词拼写错误，一款 vscode 插件 code spell checker

如有侵权请联系站点删除！