如何为VSCode添加代码质量检查工具_集成ESLint和Prettier的步骤【教程】

vscode需手动集成ESLint与Prettier实现代码质量检查与格式化，关键在于职责分离（ESLint校验逻辑、Prettier统一格式）、本地安装依赖、禁用ESLint格式规则（通过eslint-config-prettier）、正确配置.vscode/settings.json启用保存时ESLint自动修复并禁用全局格式化，同时确保团队版本一致。

VSCode 本身不自带代码质量检查，必须手动集成 ESLint 和 Prettier 才能实现实时校验与自动格式化。关键不是装插件，而是让两个工具不打架——ESLint 负责规则校验（比如 no-unused-vars），Prettier 负责统一格式（比如缩进、分号），它们默认职责重叠，直接共存会互相覆盖。

安装 ESLint 和 Prettier 的本地依赖

必须用项目级本地安装（npm install --save-dev eslint prettier），而非全局安装。VSCode 的 ESLint 插件默认优先使用工作区内的 eslint 可执行文件；若全局安装，多人协作时容易因版本不一致导致警告不一致或规则失效。

• 运行 npx eslint --init 初始化配置，选择 “To check syntax and find problems”，再选 “javaScript modules (import/export)” 和 “react”（按需），最后选 json 格式保存为 .eslintrc.json
• 单独创建 .prettierrc 文件，内容可极简：

  {"semi": true, "singleQuote": true, "tabWidth": 2}

• 务必加 .eslintignore，至少包含 node_modules/ 和 dist/，否则 ESLint 会扫描整个 node_modules，卡顿明显

配置 ESLint 使用 Prettier 规则（避免冲突）

ESLint 默认的格式类规则（如 indent、quotes）必须禁用，否则和 Prettier 冲突，保存时反复触发修正、光标乱跳。正确做法是用 eslint-config-prettier 关闭所有格式规则。

• 执行 npm install --save-dev eslint-config-prettier
• 在 .eslintrc.json 的 extends 数组末尾追加 "prettier"（注意：必须放在最后，否则会被前面的配置覆盖）
• 如果用了 typescript，额外加 eslint-config-prettier/@typescript-eslint，并确保 @typescript-eslint/eslint-plugin 版本与 ESLint 兼容（常见坑：ESLint v8 + @typescript-eslint v5 会报 ESLint couldn't determine the plugin...）

VSCode 设置启用自动修复与格式化

仅装插件不配置，保存时不会自动修。需要明确告诉 VSCode：JS/TS 文件保存时调用 ESLint 修复，同时用 Prettier 格式化——但二者不能同时启用“格式化”，否则顺序错乱。

• 安装官方插件：ESLint（by Dirk Baeumer）和 Prettier（by Prettier）
• 在工作区 .vscode/settings.json 中写死以下三项：

  "editor.codeActionsOnSave": {   "source.fixAll.eslint": true }, "editor.formatOnSave": false, "[javascript]": {"formatting.provider": "prettier"}

• 关键点：editor.formatOnSave 必须为 false，否则 Prettier 会抢在 ESLint 修复前格式化，导致 ESLint 报出“格式错误”（比如多了一个空格）

验证是否生效及常见失败信号

改一行代码后保存，看右下角状态栏是否出现 ESLint 图标闪烁，或打开命令面板（Ctrl+Shift+P）运行 ESLint: Show Output channel 查看日志。失败往往藏在细节里：

• 控制台报 Failed to load plugin 'prettier' → 检查 eslint-config-prettier 是否真的装在 devDependencies，且 .eslintrc.json 里 extends 拼写正确（大小写敏感）
• 保存后无反应 → 确认当前文件语言模式是 JavaScript（右下角显示），不是 Plain Text；也可能是 settings.json 放在了用户级而非工作区级，被其他配置覆盖
• TSX 文件里 ESLint 不报错 → 检查 .eslintrc.json 中 overrides 是否包含了 "files": ["*.ts", "*.tsx"]，并指定了 parser: "@typescript-eslint/parser"

最常被忽略的是：团队成员各自安装了不同版本的 Prettier 或 ESLint，导致同一份代码在 A 机器上“保存即修复”，在 B 机器上“保存后仍报错”。统一用 package.json 的 engines 字段锁版本，并在 CI 中跑 npx eslint . 验证，比任何本地设置都可靠。