如何在VSCode中配置ESLint进行代码检查？【教程】

vscode 不自带 ESLint，需手动安装官方扩展并配置本地依赖与规则文件；未正确安装 eslint 或插件、packageManager 设置错误、文件未匹配 glob 等均会导致检查失效。

VSCode 本身不自带 ESLint，必须手动安装扩展并配置项目级规则，否则打开文件时不会触发任何检查。

安装 ESLint 扩展和本地依赖

VSCode 的 ESLint 功能由 ESLint 官方扩展提供，但它只负责调用项目中已安装的 eslint 包，不内置引擎。 如果你只装了扩展但没在项目里装 eslint，编辑器会报错： Failed to load plugin 'xxx' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-xxx'

• 在项目根目录运行：

  npm init -y && npm install eslint --save-dev

• 推荐同时安装常用插件（按需）：eslint-plugin-react、@typescript-eslint/eslint-plugin
• VSCode 中搜索安装扩展：ESLint（作者：microsoft）
• 确保扩展设置中启用了“auto Fix on Save”（如需保存时自动修复）

配置 .eslintrc.* 文件

ESLint 默认查找 .eslintrc.js、.eslintrc.cjs、.eslintrc.json 等，优先级从高到低。推荐用 .eslintrc.cjs（兼容 ES 模块与 CommonJS，尤其在 node ≥14 + TypeScript 项目中更稳）。

• 不要直接复制网上零散规则拼凑，先用官方初始化：

  npx eslint --init

• 回答几个问题后，它会生成基础配置（比如是否用 TypeScript、React、Prettier 等）
• 常见关键字段：
  • env：指定环境（browser: true、node: true）
  • extends：继承预设（eslint:recommended、plugin:react/recommended）
  • plugins：声明插件（["react"]），否则 extends 中的 plugin:xxx 会报错
  • rules：覆盖具体规则（"no-console": "warn"）

VSCode 设置与常见失效原因

即使配置正确，也常因以下原因导致“没反应”：

• eslint.packageManager 设置错误：如果用 pnpm 或 yarn，需在 VSCode 设置中显式指定，否则找不到本地 eslint
• 工作区未启用 ESLint：检查右下角状态栏是否有 ESLint 图标；没有则点击它 → “Enable ESLint for this workspace”
• 文件未被 glob 匹配：默认只检查 */.{js,jsx,ts,tsx}，若你写的是 .vue 或 .svelte，需在 eslint.validate 中补充
• 使用了 overrides 但路径匹配失败：比如 files: ["src/*/"] 写成 files: ["src/**"]，后者不匹配文件

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

与 Prettier 冲突怎么处理？

Prettier 负责格式化，ESLint 负责逻辑/风格检查，二者定位不同，但规则重叠（如引号、分号）会导致冲突。

• 不要用 eslint-config-prettier 关闭所有 ESLint 格式规则（太粗暴），而是配合 prettier 插件做协同：
  • 安装：npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  • 在 .eslintrc.cjs 的 extends 末尾加："plugin:prettier/recommended"
  • 确保 plugin:prettier/recommended 放在 extends 最后——它会把其他规则中和 Prettier 冲突的部分设为 "off"

真正容易被忽略的是：VSCode 的 ESLint 扩展默认只在打开的文件中生效，对未打开的文件（比如刚 git pull 下来的）不会主动扫描。需要手动右键文件 → “ESLint: Fix all auto-fixable Problems”，或配置 eslint.run 为 onSave 或 onType。