VSCode中Prettier与ESLint协同需：一、安装二者扩展并禁用其他格式化工具，启用format on save；二、安装eslint-config-prettier并在.eslintrc.js的extends末尾添加'prettier'；三、创建.prettierrc并设"editor.defaultFormatter"为Prettier；四、开启eslint.autoFixOnSave但避免格式类规则冲突；五、配置.editorconfig统一基础编辑行为。
如果您在VSCode中同时使用Prettier与ESLint，但发现代码保存后格式化行为不一致、规则冲突或未自动执行，则可能是由于插件配置未协同、优先级未明确或扩展设置缺失。以下是实现二者协同工作的具体配置步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展并禁用冲突格式化工具
确保VSCode仅依赖Prettier与ESLint进行格式化，避免其他格式化插件（如JavaScript Standard Style、Beautify）干扰其执行顺序和结果。
1、打开VSCode扩展市场，搜索并安装Prettier与ESLint官方扩展。
2、在扩展列表中查找已启用的其他代码格式化类插件，逐个点击右键选择禁用。
3、进入设置（Cmd+,），搜索format on save，确认已勾选Editor: Format On Save。
二、配置ESLint以识别Prettier规则
通过eslint-config-prettier关闭ESLint中与Prettier重叠的样式类规则，防止二者报错冲突或重复修正。
1、在项目根目录执行命令：npm install eslint-config-prettier --save-dev。
2、打开项目中的.eslintrc.js文件，在extends数组末尾添加'prettier'。
3、确认该配置项位于所有可能启用样式规则的配置之后，例如：['eslint:recommended', 'plugin:react/recommended', 'prettier']。
三、设置Prettier为默认格式化工具
强制VSCode在保存时调用Prettier执行格式化，并将ESLint保留为仅校验逻辑错误与潜在问题的工具。
1、在项目根目录创建.prettierrc文件，写入基础配置如：{"semi": true, "singleQuote": true, "tabWidth": 2}。
2、在VSCode工作区设置settings.json中添加："editor.defaultFormatter": "esbenp.prettier-vscode"。
3、同时设置："editor.formatOnSave": true与"editor.formatOnSaveMode": "file"。
四、启用ESLint自动修复且不覆盖Prettier格式
让ESLint在保存时仅修复其职责范围内的问题（如变量未使用、函数定义错误），而不触碰缩进、引号、分号等由Prettier接管的格式项。
1、在settings.json中添加："eslint.autoFixOnSave": true。
2、添加配置项："eslint.validate": ["javascript", "typescript", "vue"]（按实际语言调整）。
3、在.eslintrc.js中确保rules内未启用任何与eslint-config-prettier禁用项重复的格式类规则，例如'no-unused-vars'可保留，而'quotes'应被禁用。
五、使用.editorconfig统一基础编辑器行为
作为Prettier与ESLint之外的补充层，.editorconfig可提前约束换行符、缩进风格等底层编辑器行为，减少格式化前的原始差异。
1、在项目根目录创建.editorconfig文件。
2、写入以下内容：root = true\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true。
3、确认VSCode已安装EditorConfig for VS Code扩展并启用。
