Prettier与ESLint需协同配置才能解决VSCode中JavaScript/TypeScript格式化不一致问题：安装对应扩展与本地依赖，配置.eslintrc.js禁用冲突规则并启用plugin，设置.prettierrc定义格式偏好，通过.vscode/settings.json指定默认格式化器并开启保存自动修复，最后验证三者同步生效。
如果您在VSCode中编写JavaScript或TypeScript代码，但发现格式化行为不一致、代码风格冲突或保存时未自动修复问题，则可能是Prettier与ESLint配置未协同工作。以下是实现二者完美结合的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展与依赖
VSCode需通过官方扩展支持Prettier和ESLint的集成，同时项目本地需安装对应工具包以确保规则执行一致性。全局安装可能导致版本差异，因此优先采用本地依赖方式。
1、在VSCode扩展市场中搜索并安装Prettier与ESLint两个扩展，确保状态为已启用。
2、在项目根目录下执行命令：npm init -y（若尚无package.json）。
3、运行命令安装开发依赖：npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier。
二、配置ESLint以兼容Prettier
ESLint默认规则可能与Prettier冲突，需通过eslint-config-prettier禁用所有格式化类规则，并用eslint-plugin-prettier将Prettier作为ESLint的插件运行，使错误提示与格式化统一输出。
1、在项目根目录创建.eslintrc.js文件。
2、写入以下内容：
module.exports = {
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
plugins: ['prettier'],
rules: { 'prettier/prettier': 'error' }
};
三、配置Prettier规则文件
Prettier需独立配置其格式化偏好，避免依赖ESLint覆盖全部样式控制。使用.prettierrc文件可明确定义缩进、引号、行宽等核心格式参数。
1、在项目根目录创建.prettierrc文件。
2、写入标准JSON格式配置，例如：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
四、设置VSCode工作区格式化行为
VSCode需明确指定默认格式化工具为Prettier，并启用保存时自动修复，同时防止ESLint扩展重复触发格式化造成覆盖冲突。
1、在项目根目录创建.vscode/settings.json文件（若不存在）。
2、写入以下配置项：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}
五、验证集成效果
完成配置后，需通过实际代码触发校验与格式化流程，确认ESLint报错、Prettier格式化及保存修复三者是否同步生效。
1、新建一个test.js文件，输入含空格不一致、缺少分号、双引号等违反Prettier+ESLint联合规则的代码。
2、保存文件，观察编辑器是否自动修正缩进与引号，并在问题面板中显示prettier/prettier类错误提示。
3、手动触发命令面板（Cmd+Shift+P），执行ESLint: Fix all auto-fixable Problems，检查是否无残留格式类报错。
