eslint与prettier协同需统一规则、禁用冲突格式化器并配置自动修复：安装扩展与依赖，设置eslint-config-prettier和eslint-plugin-prettier，关闭prettier自动格式化，启用eslint保存时修复，并禁用vscode内置js/ts格式化器。
如果您在VSCode中编写JavaScript或TypeScript代码，但发现ESLint报错与Prettier格式化结果相互冲突，则可能是由于二者规则未对齐或插件协作配置缺失。以下是实现ESLint与Prettier协同工作的多种配置方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展与依赖
确保VSCode具备代码检查与格式化能力的基础支持，需同时安装官方推荐的扩展并为项目添加对应开发依赖。
1、打开VSCode扩展市场，搜索并安装ESLint与Prettier两个扩展。
2、在项目根目录执行命令：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier。
3、创建.eslintrc.js文件，内容包含extends: ['eslint:recommended', 'plugin:prettier/recommended']。
二、配置ESLint使用Prettier作为格式化处理器
通过ESLint接管Prettier的格式化职责，避免两者独立运行导致的规则覆盖或重复提示。
1、在.eslintrc.js中设置plugins: ['prettier']与rules: {'prettier/prettier': 'error'}。
2、在.vscode/settings.json中添加："eslint.format.enable": true。
3、在VSCode设置中关闭Prettier的自动格式化开关："editor.formatOnSave": false。
三、启用ESLint自动修复并绑定保存动作
让ESLint在保存时自动修正可修复问题，包括由Prettier规则定义的格式类错误。
1、在.vscode/settings.json中添加："editor.codeActionsOnSave": {"source.fixAll.eslint": true}。
2、确认项目中已存在.eslintignore文件，并排除node_modules与构建产物目录。
3、重启VSCode窗口使配置生效，然后尝试保存一个含空格缩进的JS文件，观察是否触发自动修正。
四、使用独立Prettier配置文件进行微调
当团队需要统一缩进风格、引号类型等细节时，可通过.prettierrc文件覆盖默认行为，且ESLint会同步识别该配置。
1、在项目根目录创建.prettierrc文件，写入：{"semi": false, "singleQuote": true, "tabWidth": 2}。
2、确保eslint-config-prettier版本不低于8.0.0，以兼容上述Prettier选项。
3、在.eslintrc.js的extends数组末尾追加'prettier'，确保其优先级最低。
五、禁用VSCode内置格式化器冲突
VSCode默认JavaScript格式化器可能干扰ESLint+Prettier链路，需显式禁用。
1、打开VSCode设置界面，搜索javascript.format.enable，将其设为false。
2、搜索typescript.format.enable，同样设为false。
3、验证当前默认格式化器：右键编辑器空白处 → “格式化文档” → 确认弹出菜单中选中的是ESLint而非其他选项。
