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 主要是为了在编写代码时，能够及时发现潜在的错误和风格问题，提升代码质量和团队协作效率。简单来说，就是让你的代码更规范，更易读，更不容易出错。
安装并配置 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
：// .eslintrc.js module.exports = { "rules": { "no-unused-vars": "warn" } }; -
使用
// eslint-disable-line
临时禁用规则： 有时候，你可能需要在某一行代码中临时禁用 ESLint 规则。可以使用// eslint-disable-line
注释来实现。例如：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 的性能，尝试禁用一些插件看看是否有所改善。
