VS Code Code Spell Checker 插件详解

Code Spell Checker 是 VS Code 中一款非常实用的代码拼写检查插件。它能帮你检查代码变量名、注释甚至文档中的英文拼写错误，并用波浪线标出，从而避免一些因拼写错误导致的低级 Bug。下面我来为你详细介绍一下这款插件。

🔍 VS Code Code Spell Checker 插件详解

1. 核心功能与价值

Code Spell Checker 是一款专为程序员设计的智能拼写检查工具，它能够精准识别代码中的拼写错误并通过红色波浪线进行标记。这款插件支持30多种编程语言和50多种词典，甚至包括一些专业领域的术语（如医学、古希腊语等），并能智能识别驼峰命名(camelCase)和蛇形命名(snake_case)。

对于开发人员来说，它主要解决了以下几个痛点：

• 防止变量名拼错导致程序崩溃：例如将 length 误写为 lenght，这类错误在运行时可能难以调试。

• 提升代码可读性和专业性：准确的拼写使代码更易于理解和维护，避免出现 undefined 变成 undefind，console.log 写成 consle.log 这类"小学生级"错误。

• 支持技术文档的拼写检查：无论是代码注释还是Markdown文档，都能进行准确的拼写检查。

2. 安装与基本使用

安装步骤

1. 在 VS Code 中打开扩展面板 (Ctrl+Shift+X 或 Cmd+Shift+X)。

2. 搜索 "Code Spell Checker"。

3. 找到由 Jason Dentinger 开发的插件，点击安装。

4. 安装完成后，重启 VS Code 以使插件生效。

基本使用

安装后，插件会自动开始检查当前打开的文件。拼写错误的单词下方会显示波浪线（通常为蓝色或绿色）。

3. 配置与自定义

Code Spell Checker 提供了丰富的配置选项，可以通过 VS Code 的设置 (Ctrl+, 或 Cmd+,) 进行修改，推荐直接编辑 settings.json 文件。

以下是常用的配置示例：

json

{
  // 设置要检查的语言
  "cSpell.language": "en, zh-CN",
  
  // 添加自定义单词（全局）
  "cSpell.userWords": ["myCustomWord", "anotherTerm"],
  
  // 添加工作区特定单词
  "cSpell.words": ["vfonts", "Pinia", "homebg"],
  
  // 忽略的单词
  "cSpell.ignoreWords": ["tempVar", "dummyData"],
  
  // 启用检查的文件类型
  "cSpell.enabledLanguageIds": [
    "typescript",
    "javascript",
    "html",
    "markdown",
    "python"
  ],
  
  // 忽略的文件路径
  "cSpell.ignorePaths": ["node_modules/**", "**/*.json"],
  
  // 启用复合词
  "cSpell.allowCompoundWords": true,
}

你也可以在项目根目录创建 cspell.json 文件进行项目级配置，建议通过 .gitignore 忽略该文件，使其仅在本机生效。

json

// cspell.json 示例
{
  "version": "0.2",
  "language": "en",
  "words": ["vfonts", "Lato", "Pinia", "ionicons"],
  "flagWords": ["hte", "blg"],
  "ignorePaths": ["node_modules/**", "**/*.svg", "package.json"]
}

4. 高级用法与技巧

4.1 注释指令控制

你可以在代码中使用特定注释来临时控制插件的检查行为，这在处理大量缩写或特定术语时非常有用。

javascript

// 禁用当前文件的拼写检查
/* cspell:disable */

// 忽略特定单词
// cspell:ignore zaallano, wooorrdd

// 启用复合词
// cSpell:enableCompoundWords

// 使用正则表达式忽略特定模式（如忽略16进制数值）
// cSpell:ignoreRegExp 0x[0-9a-f]+

不同语言注释语法不同，但指令是相同的：

• JavaScript/TypeScript: // cspell:disable

• HTML: <!-- cspell:disable -->

• Python: # cspell:disable

4.2 使用专业词典

插件支持安装专业词典，以适应不同技术栈的需求。

例如，安装 Vue 专用词典：

bash

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

然后在 cspell.json 中添加：

json

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

4.3 命令行使用

你可以全局安装 cspell 命令行工具，在构建流程或CI/CD中集成拼写检查。

bash

# 全局安装
npm install -g cspell

# 检查所有文件
cspell "**"

# 检查src目录下所有JS文件
cspell "src/**/*.js"

# 与Git集成，只检查更改的文件
git diff --name-only | npx cspell --file-list stdin

5. 常见问题与解决方案

1. 插件未生效怎么办？

   • 尝试重启 VS Code。

   • 检查是否在设置中禁用了插件 ("cSpell.enabled": false)。

2. 如何取消误添加的单词？

   • 如果添加到工作区词典：在项目的 .vscode/settings.json 中删除对应单词。

   • 如果添加到用户词典：在 VS Code 用户设置的 settings.json 中删除对应单词。

3. 如何针对特定文件类型禁用？

   • 修改 cSpell.enabledLanguageIds 设置，移除不希望检查的文件类型。

4. 插件导致性能下降怎么办？

   • 通过 cSpell.ignorePaths 忽略不需要检查的大文件夹（如 node_modules）。

   • 减少同时启用的语言数量。

6. 为什么选择 Code Spell Checker

• 零隐私泄露：所有检查均在本地完成，不会将你的代码发送到网络。

• 低误报率：智能识别代码命名规范，能正确拆分 camelCase 和 snake_case，例如将 HTMLInput 识别为 "HTML" + "Input"。

• 开源免费：在 GitHub 上拥有超过 3.4K 星，可免费使用，也可赞助支持开发者。

• 高度可定制：支持自定义词典、忽略规则和多种语言，适应不同项目需求。

总结

Code Spell Checker 是 VS Code 生态中一款不可或缺的插件，尤其适合非英语母语的程序员。它不仅能帮助避免因拼写错误导致的低级 Bug，还能提升代码质量和可读性。通过合理的配置和自定义，你可以让它完全适应你的项目需求，成为开发过程中得力的助手。

提示：如果你在处理一个大量使用非标准缩写的老旧项目，觉得拼写检查过于干扰，可以暂时全局禁用它 ("cSpell.enabled": false)，但不建议长期关闭。