VSCode如何配置ESLint_代码质量检查工具设置-VSCode-PHP中文网

eslint在vscode不生效需同时满足三条件：本地安装eslint、启用官方eslint插件、项目根目录存在有效配置文件（如.eslintrc.js或package.json含eslintconfig）；typescript+react项目还需配置@typescript-eslint/parser及插件，并正确设置parser和plugins。

vscode如何配置eslint_代码质量检查工具设置

VSCode 里 ESLint 不生效？先确认插件和项目依赖是否齐备

ESLint 在 VSCode 中不报错、不提示，大概率不是配置问题，而是基础环境缺失。必须同时满足三个条件：eslint 包已安装、eslint 插件已启用、工作区有可识别的配置文件。

eslint 必须是本地安装（npm install eslint --save-dev），全局安装（npm install -g eslint）在多数 Workspace 场景下会被 VSCode 忽略
VSCode 扩展商店中安装官方插件 ESLint（作者：Microsoft），禁用其他非官方 ESLint 相关插件（如 “ESLint Snippets” 等）
项目根目录需存在 .eslintrc.js、.eslintrc.cjs、.eslintrc.json 或 package.json 中含 eslintConfig 字段——VSCode 的 ESLint 扩展默认只读取这些路径下的配置

如何让 ESLint 正确识别 TypeScript + React 项目

TypeScript 和 React 的语法扩展需要额外配置解析器和插件，否则会大量报 Parse errors 或 no-unused-vars 误报。

确保已安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin（推荐用 --save-dev）
在 .eslintrc.cjs 中明确指定 parser 和 plugins，例如：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
  },
};

若使用 create-react-app，不要手动装 eslint-plugin-react；CRA v5+ 内置了 eslint-config-react-app，直接 extends: ['react-app'] 更稳妥

保存时自动修复（Fix on Save）为什么没反应

VSCode 的 eslint.autoFixOnSave 已被废弃，新版本必须改用 editor.codeActionsOnSave 配置，且仅对支持 fix 的规则生效。

ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载

在工作区 .vscode/settings.json 中添加：

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

注意：该设置不会修复所有错误，仅作用于规则中 meta.fixable === "code" 的项（比如 semi、quotes 可修；no-console、complexity 不可修）
如果保存后仍无反应，打开命令面板（Ctrl+Shift+P），运行 ESLint: Show Output Channel，查看输出中是否有 Failed to load config 或 No ESLint configuration found 提示

多根工作区（Multi-root Workspace）下 ESLint 配置容易失效

当用 code .code-workspace 打开多个文件夹时，ESLint 默认只读取第一个文件夹的配置，其余子文件夹的 .eslintrc 会被忽略。

每个子文件夹必须独立安装 eslint 和对应插件（不能靠根目录的 node_modules）
VSCode 设置中关闭 eslint.packageManager 的自动推断（设为 "npm" 或 "yarn" 显式指定），避免跨文件夹误用包管理器路径
如需统一规则，建议把共用配置抽成独立 npm 包（如 @myorg/eslint-config），各子项目通过 extends 引入，而非复制配置文件