VSCode中Prettier与ESLint需协同配置以实现自动格式化与静态检查：安装扩展及devDependencies，用eslint-config-prettier禁用冲突规则，.prettierrc定义格式选项，VSCode设置默认格式器并启用保存时格式化。
如果您在VSCode中编写JavaScript或TypeScript代码，但发现格式化行为不一致、代码风格混乱或ESLint警告未被自动修复，则可能是Prettier与ESLint配置未协同工作。以下是实现二者无缝集成的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展与依赖
VSCode需通过官方扩展支持Prettier和ESLint，项目本地也需安装对应npm包以确保规则执行一致性。全局安装可能导致版本冲突，因此推荐项目级依赖管理。
1、在VSCode扩展市场中搜索并安装Prettier与ESLint两个官方扩展。
2、在项目根目录下执行命令：npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier。
3、确认package.json中已存在devDependencies条目，包含上述四个包且版本号非^0.0.0或*。
二、配置ESLint以兼容Prettier
ESLint默认规则可能与Prettier冲突（如引号风格、分号使用），需通过eslint-config-prettier禁用所有格式化类规则，并用eslint-plugin-prettier将Prettier作为ESLint的可执行规则。
1、在项目根目录创建.eslintrc.js文件，内容包含extends: ['eslint:recommended', 'plugin:prettier/recommended']。
2、确保plugin:prettier/recommended位于extends数组末尾，使其覆盖优先级最高。
3、检查rules字段中未手动启用与prettier重复的规则，例如quotes、semi、comma-dangle等。
三、配置Prettier核心选项
Prettier自身需明确格式偏好，其配置独立于ESLint，但影响最终输出结果。VSCode将依据此配置执行保存时格式化。
1、在项目根目录创建.prettierrc文件，写入JSON格式配置，例如：{"semi": true, "singleQuote": true, "tabWidth": 2, "printWidth": 80}。
2、若使用TypeScript，添加"parser": "typescript"到.prettierrc中（仅当Prettier版本≥2.8.0时支持）。
3、创建.prettierignore文件，填入node_modules/、dist/、build/等无需格式化的路径。
四、设置VSCode编辑器行为
VSCode必须明确指定默认格式化工具及触发时机，否则可能调用内置格式器或无响应。需同时配置用户级与工作区级设置以保障一致性。
1、打开VSCode设置（Cmd+,），搜索format on save，勾选Editor: Format On Save。
2、在工作区设置.vscode/settings.json中添加："editor.defaultFormatter": "esbenp.prettier-vscode"。
3、添加关键覆盖项："editor.formatOnSaveMode": "modifications"，避免全文件重排引发大量diff。
五、验证集成效果
配置完成后需通过真实代码检验是否真正协同：ESLint应仅报告逻辑问题，Prettier应接管全部格式化输出，且保存操作能同时满足两者要求。
1、新建test.js文件，输入含双引号、无分号、超长行的代码段。
2、按下Cmd+S保存，观察代码是否自动转为单引号、补充分号、折行至80列以内。
3、在终端运行npx eslint test.js --fix，确认无格式类报错，且输出中仅剩语义性警告（如未使用变量）。
