VSCode如何配置ESLint以实现代码规范检查？【教程】

vscode需安装ESLint扩展并配置本地eslint包才能启用检查功能。必须在项目中npm install eslint –save-dev，确保.eslintrc.js存在且插件已安装，设置eslint.packageManager匹配包管理器，并开启”editor.codeActionsOnSave”: {“source.fixAll.eslint”: true}以支持保存时自动修复。

vscode 本身不自带 eslint 检查能力，必须安装扩展并正确连接项目本地的 eslint 包——否则即使装了插件，也会提示“eslint not found”或根本无反应。

安装 ESLint 扩展与本地依赖

VSCode 的 ESLint 功能由 ESLint 官方扩展（ID：dbaeumer.vscode-eslint）提供，但它只负责调用，不附带检查器本身。

• 在 VSCode 扩展市场搜索并安装 ESLint（作者：microsoft）
• 在项目根目录下运行：npm install eslint --save-dev（推荐使用本地安装，避免全局版本冲突）
• 若已有 eslint 配置文件（如 .eslintrc.js 或 package.json 中的 eslintConfig），确保它存在且语法合法

确保 VSCode 能定位到项目级 ESLint

扩展默认会优先查找工作区根目录下的 node_modules/.bin/eslint。如果找不到，就会回退到全局安装，而多数团队禁止全局 ESLint，导致静默失效。

• 打开 VSCode 设置（Ctrl+, 或 Cmd+,），搜索 eslint.packageManager
• 设为 npm（或 yarn / pnpm，需与项目一致）
• 确认工作区设置中未禁用："eslint.enable": true（默认开启）
• 如仍报错 ESLint not found，在 VSCode 终端执行 npx eslint --version 验证是否可运行

处理常见报错：Parsing Error: Cannot find module ‘eslint-plugin-react‘

这类错误不是 VSCode 配置问题，而是 ESLint 运行时加载插件失败，通常因插件未安装或路径解析异常。

• 检查 .eslintrc.js 中 plugins 和 extends 引用的包是否已安装，例如用了 react 规则但没装 eslint-plugin-react
• 运行 npm list eslint-plugin-react 确认安装层级（必须在当前工作区 node_modules 下）
• 若用 monorepo，可能需在 workspace 根或对应 package 下单独安装插件
• 重启 VSCode 或点击右下角 ESLint 状态栏 → “Restart ESLint Server”

启用自动修复与保存时校验

ESLint 可在保存时自动修复部分问题（如引号、分号、空格），但需显式开启，且仅对 --fix 支持的规则生效。

• 在 settings.json 中添加："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 如只想对 JS/TS 文件启用，加条件："editor.codeActionsOnSave": { "source.fixAll.eslint": true, "enableFortypescript": true }
• 注意：某些规则（如 no-console）无法自动修复，只会标红提示
• 若保存后无反应，检查当前文件是否被 .eslintignore 忽略，或文件后缀未被 ESLint 默认支持（如 .tsx 需配置 overrides）

最常被忽略的是工作区级 node_modules 的存在性与 ESLint 插件的版本兼容性——比如 eslint@8.x 需搭配 eslint-plugin-react@7.30+，低版本插件会直接报 Cannot read Property 'visitJSXElement' of undefined 这类难以定位的错误。