在 vscode 中同时配置 ESLint 和 Prettier 的关键是协同分工：ESLint 检查代码质量与错误，Prettier 统一格式；需安装对应扩展与依赖（eslint、prettier、eslint-config-prettier、eslint-plugin-prettier），配置 .eslintrc.js 启用 plugin:prettier/recommended，设置 .prettierrc 定义格式规则，并在 VSCode 中启用 format On Save、设置默认 Formatter 为 Prettier、配置 codeActionsOnSave 自动修复 ESLint 问题。
在 VSCode 中同时配置 ESLint 和 Prettier，关键在于让两者协同工作：ESLint 负责代码质量与潜在错误检查，Prettier 负责统一格式（缩进、引号、换行等），避免规则冲突。
安装必要扩展和依赖
先确保本地项目和编辑器都装好了基础工具：
- VSCode 扩展：安装 ESLint（由 Dirk Baeumer 维护）和 Prettier（由 Esben Petersen 开发）两个官方推荐插件
- 项目依赖：在项目根目录运行以下命令（推荐使用
--save-dev）
npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
其中 eslint-config-prettier 用于关闭 ESLint 中与 Prettier 冲突的规则，eslint-plugin-prettier 则把 Prettier 当作 ESLint 的一条规则来执行（比如自动修复格式问题）。
配置 ESLint 规则（.eslintrc.js 或 .eslintrc.json）
在项目根目录创建 .eslintrc.js，内容示例如下：
module.exports = {
extends: [
“eslint:recommended”,
"plugin:prettier/recommended"
],
plugins: [“prettier”],
rules: {
“prettier/prettier”: “Error”
}
};
注意："plugin:prettier/recommended" 已内置 eslint-config-prettier，会自动禁用所有与 Prettier 冲突的规则，无需手动写 extends: ["eslint-config-prettier"]。
配置 Prettier 选项（.prettierrc）
在项目根目录新建 .prettierrc（json 格式），定义你想要的格式风格：
{
“semi”: true,
“singleQuote”: true,
“tabWidth”: 2,
“trailingComma”: “es5”
}
这些设置会直接影响 ESLint 的 prettier/prettier 规则报错和自动修复行为。VSCode 的 Prettier 插件也会读取它来做实时格式化。
设置 VSCode 自动修复与保存行为
打开 VSCode 设置（Ctrl+, 或 Cmd+,），搜索并勾选或配置以下几项：
- Format On Save：启用，确保保存时自动格式化
- default Formatter：设为
esbenp.prettier-vscode（即 Prettier 插件） - ESLint: auto Fix On Save：在设置中搜 “eslint.autoFixOnSave”，启用（注意：VSCode 1.8x+ 后该选项已移至
editor.codeActionsOnSave）
更推荐的方式是在 settings.json（用户或工作区）中添加：
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode“
这样保存时先由 ESLint（含 Prettier 规则）统一修复，再由 Prettier 做最终格式化，流程清晰不重复。
基本上就这些。配置完成后重启 VSCode，打开一个 JS/TS 文件，修改后保存，就能看到错误提示、自动修复和格式统一同步生效了。