Prettier 与 ESLint 协同实现 vscode 保存即格式化、编辑即提示：需安装官方扩展、配置项目依赖及规则文件、设置默认格式化器与保存行为，并按语言类型单独指定格式化器。
如果您在 VSCode 中编写代码时发现格式混乱、风格不统一，可能是缺少 自动化 的代码格式化与校验 工具 。Prettier 负责统一代码样式，ESLint 负责检测潜在错误与 编码 规范问题，二者协同可实现保存即格式化、编辑即提示的开发体验。以下是配置与使用该组合的具体步骤：
本文运行环境：macBook air，macOS Sequoia。
一、安装必要扩展
VSCode 需通过扩展支持 Prettier 和 ESLint 的集成能力，必须安装对应官方插件以启用语法高亮、实时诊断和自动修复功能。
1、打开 VSCode 左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中依次输入并安装：Prettier – Code formatter 与 ESLint 两个扩展。
3、安装完成后重启 VSCode，确保扩展已激活并出现在已启用列表中。
二、初始化项目依赖
本地项目需包含 Prettier 和 ESLint 的可执行命令及配置文件，否则 VSCode 扩展无法调用规则进行格式化或校验。
1、在项目根目录打开终端，执行：npm init -y 初始化 package.json（如尚未初始化）。
2、运行以下命令安装开发依赖：npm install –save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier。
3、创建 .prettierrc 文件，写入基础格式配置，例如：{“semi”: true, “singleQuote”: true, “tabWidth”: 2}。
三、配置 ESLint 规则文件
ESLint 需明确知道如何与 Prettier 协作，避免规则冲突；通过 extends 组合官方推荐配置，可自动禁用与 Prettier 冲突的规则。
1、在项目根目录创建 .eslintrc.js 文件。
2、写入如下内容：module.exports = {extends: [‘eslint:recommended’, ‘plugin:prettier/recommended’]};。
3、确保 node_modules/.bin/eslint 可被 VSCode 正确识别为 ESLint CLI 路径。
四、设置 VSCode 默认格式化器与保存行为
VSCode 必须明确将 Prettier 设为当前工作区的默认格式化 工具，并启用保存时自动格式化，才能实现“优雅”的一键操作。
1、按下 Cmd+, 打开设置界面，在右上角点击“打开 settings.json”图标。
2、在 json 中添加以下键值对：“editor.defaultFormatter”: “esbenp.prettier-vscode“。
3、继续添加：“editor.formatOnSave”: true 与 “editor.codeActionsOnSave”: {“source.fixAll.eslint”: true}。
五、按语言单独指定格式化器
某些项目包含多种语言（如 vue、typescript），需为不同文件类型显式绑定格式化器，防止 Prettier 错误处理非 JS/TS 文件。
1、在 VSCode 设置中搜索 files.associations，添加：{“*.vue“: “vue”}。
2、在 settings.json 中新增 “[vue]”: {“editor.defaultFormatter”: “esbenp.prettier-vscode”}。
3、对 TypeScript 文件，添加：“[typescript]”: {“editor.defaultFormatter”: “esbenp.prettier-vscode”}。
