VSCode中如何配置ESLint和Prettier以统一代码风格【教程】

ESLint与Prettier需协同工作：ESLint管逻辑规范，Prettier管格式化；须安装官方扩展及项目本地依赖（eslint v8+、prettier v3+），配置.eslintrc.cjs禁用格式规则并启用eslint-plugin-prettier，.prettierrc定义格式，vscode设置中开启formatOnSave和codeActionsOnSave修复，并确保Prettier为默认格式器。

VSCode 里配 ESLint 和 Prettier 不是为了“装插件就完事”，而是要让两者不打架、各司其职：ESLint 负责代码质量与逻辑规范（比如 no-unused-vars），Prettier 负责格式化（缩进、引号、换行）。配错顺序或冲突规则，反而会导致保存时代码反复被改、报红、甚至格式化失效。

确认已安装核心扩展和依赖

缺一不可，且版本需兼容（推荐 ESLint v8+、Prettier v3+）：

• VSCode 扩展：必须装 ESLint（by Dirk Baeumer）和 Prettier（by Esben Petersen）——注意不是“Prettier ESLint”之类合体插件
• 项目本地依赖：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
• 全局安装 eslint 或 prettier 无意义，VSCode 默认优先用项目内二进制

配置 .eslintrc.cjs 让 ESLint 不干涉格式

关键在禁用所有和格式相关的 ESLint 规则，把格式控制权完全交给 Prettier：

module.exports = {   extends: [     'eslint:recommended',     'plugin:prettier/recommended', // 这行会自动启用 eslint-plugin-prettier 并关闭冲突规则   ],   plugins: ['prettier'],   rules: {     'prettier/prettier': 'error', // 把 Prettier 错误当 ESLint 错误提示   }, };

⚠️ 常见错误：eslint-config-prettier 必须放在 extends 数组最后；若手动写一堆 quotes: 'off' 类规则，容易漏、难维护。

设置 .prettierrc + VSCode 用户/工作区配置

格式规则只在 .prettierrc 定义，VSCode 设置里不要重复指定（尤其别开 "editor.formatOnSave": true 同时又设 "editor.defaultFormatter": "esbenp.prettier-vscode" 却没关 ESLint 自动修复）：

• .prettierrc 示例（json 格式）：

  {"semi": false,"singleQuote": true,"tabWidth": 2,"printWidth": 100}

• VSCode settings.json（工作区级更安全）：

  {   "editor.formatOnSave": true,   "editor.defaultFormatter": "esbenp.prettier-vscode",   "editor.codeActionsOnSave": {     "source.fixAll.eslint": true // ✅ 关键：保存时触发 ESLint 自动修复（含 prettier/prettier 报错）   },   "eslint.validate": ["javascript", "typescript", "vue"] // 按需加语言 }

⚠️ 若发现保存后引号变双、分号又回来了，大概率是 eslint-plugin-prettier 没生效，或 eslint-config-prettier 位置不对。

遇到 “Prettier not found” 或格式化不触发？查这三处

这类问题几乎都出在路径或作用域上：

• 打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，看 console 是否有 Cannot find module 'prettier' ——说明 VSCode 没找到项目内的 prettier，检查 node_modules 是否存在、是否在工作区根目录下
• 右下角状态栏点击格式化器名称，确认当前激活的是 Prettier 而非 ESLint 或 None
• 打开一个 .js 文件，按 Ctrl+Shift+P → Format Document With...，看列表里是否有 Prettier 选项；没有则插件未正确识别项目配置

真实场景中，最常被忽略的是：项目用了 pnpm/yarn 2+，但 VSCode 启动时没走正确的 shell 环境，导致找不到本地 node_modules/.bin 下的可执行文件。