VSCode 如何配置 ESLint 进行代码检查 VSCode 配置 ESLint 代码检查的教程-VSCode-PHP中文网

vscode 配置 eslint 主要是为了在编写代码时及时发现潜在错误和风格问题，提升代码质量和团队协作效率；1. 安装 eslint 扩展，通过 vscode 扩展商店搜索并安装由 microsoft 发布的官方 eslint 扩展；2. 全局或项目安装 eslint，推荐使用 npm install eslint --save-dev 进行项目级安装以更好管理版本；3. 配置 eslint，通过 npx eslint --init 初始化或手动创建 .eslintrc.js/.eslintrc.json 文件定义规则、解析器、插件等；4. 在 vscode 设置中配置 eslint.validate 以指定需检查的文件类型，并可设置 eslint.options 指定配置文件路径；5. 针对规则问题可查阅官方文档调整规则级别为 off、warn 或 error，或使用 // eslint-disable-line、// eslint-disable 和 // eslint-enable 临时禁用特定规则；6. 若提示找不到模块，需安装对应 parser 如 @typescript-eslint/parser 或 @babel/eslint-parser，并在配置中指定 parser 和 parseroptions，如 typescript 项目需设置 project 路径；7. 若使用框架如 react，需安装相应插件如 eslint-plugin-react 并在 plugins 和 extends 中配置；8. 启用自动修复功能，可在 vscode 设置中开启 eslint.codeactionsonsave.mode 实现保存时自动修复，或通过命令行执行 npx eslint --fix . 批量修复；9. 针对检查速度慢的问题，可通过添加 node_modules、dist 等路径到 .eslintignore 忽略检查，减少启用规则数量，启用 cache 缓存机制，升级 eslint 版本或排查插件冲突来优化性能。配置完成后，vscode 将实时检查代码并提供错误和警告提示，帮助开发者持续维护高质量代码。

VSCode 如何配置 ESLint 进行代码检查 VSCode 配置 ESLint 代码检查的教程

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

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

解决方案

安装 ESLint 扩展

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

你需要安装 ESLint 本身。有两种方式：
- 全局安装：
```
npm install -g eslint
```
  登录后复制
  (需要 Node.js 和 npm 环境)
- 项目安装：
```
npm install eslint --save-dev
```
  登录后复制
全局安装方便，但可能不同项目需要不同版本的 ESLint。项目安装更灵活，推荐项目安装。

配置 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"
  }
};

登录后复制

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

VSCode 设置

打开 VSCode 的设置 (File -> Preferences -> Settings 或者使用快捷键
```
Ctrl + ,
```
登录后复制
)，搜索 "eslint.validate"。

在
```
eslint.validate
```
登录后复制
中添加你要检查的文件类型。例如，如果你想检查 JavaScript 和 TypeScript 文件，可以这样配置：
```
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]
```
登录后复制
有时候，ESLint 扩展可能无法自动找到你的配置文件。你可以手动指定配置文件的路径：
```
"eslint.options": {
  "configFile": ".eslintrc.js"
}
```
登录后复制
保存并测试

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

ESLint 规则配置错误怎么办？

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

理解规则的含义： 首先，你需要理解每个规则的含义。ESLint 官方文档 (https://www.php.cn/link/a38c30b2766c4353d929a8afe1f2e831) 提供了详细的规则说明。
调整规则的级别： ESLint 规则有三个级别：
```
off
```
登录后复制
(关闭),
```
warn
```
登录后复制
(警告),
```
error
```
登录后复制
(错误)。你可以根据自己的需要调整规则的级别。例如，如果你觉得
```
no-unused-vars
```
登录后复制
规则过于严格，可以将其设置为
```
warn
```
登录后复制
：

代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情
```
// .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 的性能，尝试禁用一些插件看看是否有所改善。