VSCode插件为js代码开发保驾护航-VSCode-PHP中文网

eslint 和 prettier 必须明确分工：eslint 专注逻辑检查与潜在错误，prettier 专责格式化；需通过 extends: ["eslint:recommended", "prettier"]（prettier 必须置末）禁用 eslint 所有格式规则，并在 vscode 中设 "editor.defaultformatter": "esbenp.prettier-vscode" 且禁用 eslint 格式能力。

vscode插件为js代码开发保驾护航

ESLint 和 Prettier 不是“装了就能用”，它们默认会互相干扰——比如 semi 规则冲突导致保存时代码反复加/删分号，根本没法正常写代码。必须明确分工、切断规则重叠，才能真正保驾护航。

为什么 ESLint + Prettier 一起开就报红还乱格式？

根本原因是：ESLint 默认自带大量格式类规则（如 indent、quotes、semi），而 Prettier 也强制执行自己的格式偏好。两者没协商好谁说了算，编辑器就来回调用，结果就是光标乱跳、代码抖动、Problems 面板塞满无关警告。

典型现象：Ctrl+S 后分号消失 → 立刻报 ESLint semi 错误 → 再次保存又加上分号 → 循环开始
本质不是插件bug，而是配置没让 ESLint “让出格式权”
不能只靠 VS Code 设置里的 editor.defaultFormatter，那只是指定“谁来格式化”，没解决“ESLint 别管格式”这个前提

怎么配 .eslintrc.js 才算真正协同？

核心动作只有一条：在 ESLint 配置里引入 prettier 插件，并用 extends: ["prettier"] 覆盖掉所有与格式相关的内置规则。这不是可选项，是必须项。

确保已安装 eslint-config-prettier：npm install eslint-config-prettier --save-dev
extends 数组里，"prettier" 必须放在最后，否则会被前面的 extends 覆盖
不要手动关单个格式规则（比如写 "semi": "off"），那样漏掉的规则迟早出问题
示例最小可行配置：

module.exports = {
  extends: [
    "eslint:recommended",
    "prettier" // ← 这一行必须有，且放最后
  ],
  rules: {
    "no-console": "warn"
  }
};

VS Code 设置里哪些开关真有用？

插件装了、配置写了，但 VS Code 自身设置不对，照样不生效。关键就三个开关，缺一不可：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

editor.formatOnSave 设为 true：触发保存即格式化
editor.defaultFormatter 设为 "esbenp.prettier-vscode"：明确告诉编辑器“格式化这事归 Prettier 管”
editor.codeActionsOnSave 里启用 "source.fixAll.eslint"：让 ESLint 只修逻辑问题（比如 no-unused-vars），不碰格式

注意：eslint.validate 字段已过时，新版推荐用 "eslint.options": { "extensions": [".js", ".jsx"] } 替代，避免规则不生效。

遇到保存没反应或报错找不到 ESLint 怎么办？

常见于项目根目录没 .eslintrc.*，或 ESLint 没装在项目本地。VS Code 的 ESLint 插件默认优先找项目级 node_modules/eslint，而不是全局安装的。

检查终端运行 npx eslint --version 是否成功，失败就说明项目没装 ESLint
运行 npx eslint --init 生成配置文件，选“JavaScript modules (import/export)”和“React”等实际用到的环境
如果坚持用全局 ESLint（不推荐），需在 VS Code 设置里加 "eslint.packageManager": "npm" 并指定全局路径，但跨项目易出兼容问题
插件输出面板（Output → ESLint）里看具体错误，常是 Cannot find module 'eslint-plugin-react' 这类缺失依赖

真正麻烦的从来不是装插件，而是让两个工具承认彼此的边界——Prettier 不查 bug，ESLint 不动缩进。这点没立住，再多插件也只是噪音。