Prettier与ESLint需协同配置才能实现VSCode保存时自动格式化：安装扩展、初始化项目依赖、设置默认格式化工具、整合冲突规则并验证生效。
如果您在VSCode中编写JavaScript或TypeScript代码，但每次保存后代码未自动按统一风格格式化，则可能是Prettier与ESLint未正确协同配置。以下是实现一键格式化代码的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展
VSCode需通过扩展支持Prettier和ESLint的解析与格式化能力，缺少任一扩展将导致格式化指令无法识别或执行失败。
1、打开VSCode左侧活动栏中的扩展图标（四个方块组成的图标）。
2、在搜索框中依次输入并安装以下两个扩展：Prettier 与 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}。
三、配置VSCode默认格式化工具
VSCode需明确指定使用Prettier作为JavaScript/TypeScript文件的默认格式化程序，否则保存时可能调用内置格式器而非Prettier。
1、按下 Cmd + ,（Mac）或 Ctrl + ,（Windows/Linux）打开设置界面。
2、在右上角点击“打开设置（JSON）”图标，进入settings.json编辑模式。
3、在JSON中添加以下键值对："editor.defaultFormatter": "esbenp.prettier-vscode"。
4、同时加入："editor.formatOnSave": true，启用保存时自动格式化。
四、整合ESLint与Prettier冲突规则
ESLint与Prettier可能对相同代码风格（如分号、引号）产生相反校验，需通过配置使ESLint禁用与Prettier重叠的规则，避免报错或格式化反复修正。
1、在项目根目录创建.eslintrc.js文件。
2、写入配置导出对象，其中extends数组必须包含 "plugin:prettier/recommended" 且置于最后。
3、确保plugins字段包含 "prettier"，rules字段中添加 "prettier/prettier": "error"。
五、验证格式化是否生效
完成全部配置后，需通过真实代码触发保存行为，观察是否执行Prettier格式化并同步通过ESLint校验，以确认二者已协同工作。
1、新建test.js文件，输入未格式化代码如：const a=1;function f(){return a;}。
2、按下 Cmd + S（Mac）或 Ctrl + S（Windows/Linux）保存文件。
3、检查代码是否自动变为：const a = 1;
function f() {
return a;
}。
