VSCode怎么配置ESLint代码检查_VSCode如何设置JS代码规范自动检测提示【攻略】-VSCode-PHP中文网

eslint插件无反应需检查四项：启用插件开关、确认工作区含配置文件、配置路径与格式正确、配置editor.codeactionsonsave自动修复；混合项目需正确设置解析器支持jsx。

vscode怎么配置eslint代码检查_vscode如何设置js代码规范自动检测提示【攻略】

VSCode 默认不会自动启用 ESLint，即使你已全局或本地安装了 eslint，也必须手动开启插件的“激活开关”。常见现象是保存文件后无任何提示、Problems 面板空空如也、右键菜单里没有 Fix all auto-fixable problems。

实操建议：

打开 VSCode 设置（Ctrl+, 或 Cmd+,），搜索 eslint.enable，确保勾选 ✅
确认当前打开的是一个含 package.json 或 .eslintrc.* 的文件夹（即“工作区”），单个 JS 文件不触发 ESLint 自动检测
如果项目用的是 eslint.config.js（ESLint v8.22+ 新配置格式），需 VSCode ESLint 插件 v2.4.0+ 才支持，旧版本会静默失败

VSCode ESLint 插件默认只认当前工作区根目录下的配置文件，且严格遵循 ESLint 自身的配置查找规则。你改了 .eslintrc.js 却没看到效果，大概率是路径或导出方式错了。

实操建议：

配置文件必须放在项目根目录（即你通过 File > Open Folder 打开的那个文件夹），不能藏在 src/ 里
若用 eslint.config.js，必须按新格式导出数组：export default [{ rules: { ... } }]，而不是 module.exports = { ... }
VSCode 不读取 ~/.eslintrc.js 这类用户级配置，也不继承全局 eslint --init 生成的配置 —— 它只看项目内

很多人以为装了插件就自动 fix，其实 VSCode 默认关掉了这个功能。你看到红波浪线，但 Ctrl+S 后什么都没变，就是这里卡住了。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

实操建议：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

确保没有其他扩展（比如 Prettier）同时注册了 source.fixAll，否则会冲突，VSCode 只执行最后一个

若只想修 ESLint 能 auto-fix 的规则（比如 semi、quotes），不要开 source.fixAll（它会触发所有可用修复器）

React 项目里写 JSX 报错“JSX not allowed in files with extension '.js'”，或者 react-hooks/exhaustive-deps 完全不提示 —— 多半是 ESLint 没识别出 JSX 语法，解析器没配对。

实操建议：

必须在 .eslintrc.js 中显式指定 parser: '@typescript-eslint/parser'（即使你没用 TS），并配好 parserOptions：

parserOptions: {
  ecmaFeatures: { jsx: true },
  ecmaVersion: 2022,
  sourceType: 'module'
}

确保 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 版本匹配（建议都用最新稳定版，v7.x）

如果用 Vite 或 Next.js，注意它们可能自带 ESLint 集成，会覆盖你的配置 —— 查看终端里 ESLint 启动日志，确认加载的是你预期的配置文件路径

最常被忽略的一点：VSCode 的 ESLint 插件会在状态栏显示“ESLint: Working…”或“ESLint: Failed”，但很多人不注意这个小图标。一旦它变成红色叉或一直转圈，说明配置解析失败，这时候看输出面板（Output > ESLint）里的报错，比盲调配置快得多。

VSCode怎么配置ESLint代码检查_VSCode如何设置JS代码规范自动检测提示【攻略】