如何设置VSCode中ESLint进行代码审查教程？

本文共计2109个文字，预计阅读时间需要9分钟。

VSCode 配置 ESlint，主要是为了在编写代码时，及时发现潜在的错误和风格问题，提升代码质量和团队协作效率。简单来说，它让代码更规范、更易读、更不易出错。

安装并配置 ESLint，让 VSCode 在你写代码的时候，像一个严格的代码质量监督员一样，随时帮你检查代码，是不是很酷？

解决方案

1. 安装 ESLint 扩展

   在 VSCode 扩展商店搜索 "ESLint"，找到由 Microsoft 官方发布的 ESLint 扩展，点击安装。这是最基础的一步，让 VSCode 具备了使用 ESLint 的能力。

2. 全局或项目安装 ESLint

   你需要安装 ESLint 本身。有两种方式：

   • 全局安装：

     npm install -g eslint (需要 Node.js 和 npm 环境)

   • 项目安装：

     npm install eslint --save-dev

   全局安装方便，但可能不同项目需要不同版本的 ESLint。项目安装更灵活，推荐项目安装。

3. 配置 ESLint

   • 初始化配置： 在项目根目录下运行

     npx eslint --init （如果项目安装 ESLint）或者

     eslint --init （如果全局安装 ESLint）。这个命令会引导你选择代码风格、使用的框架等，并生成一个

     .eslintrc.js 或者

     .eslintrc.json 文件。

   • 手动配置： 如果想更灵活地配置，可以手动创建

     .eslintrc.js 或者

     .eslintrc.json 文件。例如：

   // .eslintrc.js module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": [ "@typescript-eslint" ], "rules": { "semi": [ "error", "always" ], "quotes": [ "error", "single" ], "no-unused-vars": "warn" } };

   这个配置文件定义了代码检查规则，例如：必须使用分号，使用单引号，未使用变量给出警告。

4. VSCode 设置

   打开 VSCode 的设置 (File -> Preferences -> Settings 或者使用快捷键

   Ctrl + ,)，搜索 "eslint.validate"。

   在

   eslint.validate 中添加你要检查的文件类型。例如，如果你想检查 JavaScript 和 TypeScript 文件，可以这样配置：

   "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ]

   有时候，ESLint 扩展可能无法自动找到你的配置文件。你可以手动指定配置文件的路径：

   "eslint.options": { "configFile": ".eslintrc.js" }

5. 保存并测试

   保存你的配置文件和 VSCode 设置。打开一个 JavaScript 或 TypeScript 文件，开始编写代码。如果代码不符合 ESLint 的规则，VSCode 会自动提示错误或警告。

ESLint 规则配置错误怎么办？

ESLint 配置中最常见的问题之一就是规则配置不当。有时候，你可能会发现 ESLint 报出的错误提示并不合理，或者过于严格，影响了你的开发效率。

• 理解规则的含义： 首先，你需要理解每个规则的含义。ESLint 官方文档 (https://www.php.cn/link/a38c30b2766c4353d929a8afe1f2e831) 提供了详细的规则说明。

• 调整规则的级别： ESLint 规则有三个级别：

  off (关闭),

  warn (警告),

  error (错误)。你可以根据自己的需要调整规则的级别。例如，如果你觉得

  no-unused-vars 规则过于严格，可以将其设置为

  warn：

  // .eslintrc.js module.exports = { "rules": { "no-unused-vars": "warn" } };

• 使用

  // eslint-disable-line 临时禁用规则： 有时候，你可能需要在某一行代码中临时禁用 ESLint 规则。可以使用

  // eslint-disable-line <rule-name> 注释来实现。例如：

  const unusedVariable = 123; // eslint-disable-line no-unused-vars

• 使用

  // eslint-disable 和

  // eslint-enable 禁用一段代码的规则： 如果你需要禁用一段代码的规则，可以使用

  // eslint-disable 和

  // eslint-enable 注释。例如：

  // eslint-disable no-unused-vars const unusedVariable = 123; console.log('Hello'); // eslint-enable no-unused-vars

ESLint 总是提示找不到模块怎么办？

ESLint 提示找不到模块，通常是因为 ESLint 无法正确解析你的代码。这可能是因为你的代码使用了 ES6+ 的语法，或者使用了 TypeScript 等其他语言特性。

• 安装相应的 parser： 如果你的代码使用了 ES6+ 的语法，你需要安装

  @babel/eslint-parser 。如果你的代码使用了 TypeScript，你需要安装

  @typescript-eslint/parser。

  npm install @babel/eslint-parser --save-dev npm install @typescript-eslint/parser --save-dev

• 配置 parser： 在

  .eslintrc.js 文件中，配置

  parser 选项。例如，如果你使用了 TypeScript，可以这样配置：

  // .eslintrc.js module.exports = { "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", "project": ['./tsconfig.json'] // 告诉eslint tsconfig.json在哪 }, };

  对于 TypeScript 项目， 务必配置

  parserOptions.project， 否则很多规则无法正常工作。

• 安装相应的 plugins： 如果你的代码使用了 React 等框架，你需要安装相应的 ESLint 插件。例如，如果你使用了 React，你需要安装

  eslint-plugin-react。

  npm install eslint-plugin-react --save-dev

• 配置 plugins： 在

  .eslintrc.js 文件中，配置

  plugins 选项。例如，如果你使用了 React，可以这样配置：

  // .eslintrc.js module.exports = { "plugins": [ "react" ], "extends": [ "eslint:recommended", "plugin:react/recommended" ], "rules": { "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off" } };

  注意：

  react/jsx-uses-react 和

  react/react-in-jsx-scope 这两个规则在新的 React 版本中已经不再需要，可以关闭。

如何让 ESLint 自动修复代码格式？

ESLint 不仅可以检查代码风格，还可以自动修复一些代码格式问题，例如：空格、缩进、分号等。

• 配置

  --fix 选项： 在 VSCode 的设置中，搜索 "eslint.codeActionsOnSave.mode"，将其设置为

  true。这样，每次保存文件时，ESLint 都会自动修复代码格式。

• 使用命令行修复： 你也可以使用命令行来修复代码格式。在项目根目录下运行

  npx eslint --fix . （如果项目安装 ESLint）或者

  eslint --fix . （如果全局安装 ESLint）。

代码检查速度慢怎么办？

ESLint 检查代码的速度可能会受到多种因素的影响，例如：代码量、规则数量、硬件性能等。

• 忽略不需要检查的文件： 在

  .eslintignore 文件中，添加不需要检查的文件或目录。例如：

  node_modules/ dist/ *.min.js

• 减少规则数量： 只启用必要的规则，避免启用过多的规则。

• 升级 ESLint 版本： 新版本的 ESLint 通常会优化性能。

• 使用缓存： ESLint 可以使用缓存来提高检查速度。在

  .eslintrc.js 文件中，配置

  cache 选项：

  // .eslintrc.js module.exports = { "cache": true };

• 检查 VSCode 插件冲突： 有些 VSCode 插件可能会影响 ESLint 的性能，尝试禁用一些插件看看是否有所改善。