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 这类难以定位的错误。










