QoderWake前端开发中Prettier与ESLint需深度集成以解决格式混乱问题，推荐路径包括：一、VSCode插件联动；二、配置文件级集成（禁用冲突规则）；三、规则嵌入式集成（Prettier作ESLint子规则）；四、工程流级集成（Git提交前校验）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用QoderWake进行前端开发时发现代码格式混乱、风格不统一，或保存后未自动格式化，很可能是Prettier与ESLint未正确协同工作。以下是实现二者深度集成的多种可行路径：
一、插件级集成：VSCode中启用双工具联动
该方式通过编辑器插件直接协调Prettier执行格式化、ESLint执行检查与修复，无需修改项目依赖，适合快速验证与轻量项目。
1、打开VSCode扩展市场（Ctrl+Shift+X），搜索并安装esbenp.prettier-vscode与dbaeumer.vscode-eslint两个官方插件。
2、进入设置（Ctrl+,），切换至“Settings (JSON)”视图，在settings.json中添加以下配置项：
3、设置"editor.formatOnSave": true启用保存即格式化。
4、指定默认格式化工具为Prettier："editor.defaultFormatter": "esbenp.prettier-vscode"。
5、确保ESLint在保存时自动修复可修复问题："eslint.format.enable": true与"editor.codeActionsOnSave": { "source.fixAll.eslint": true }。
二、配置文件级集成：禁用冲突规则并统一入口
该方式通过eslint-config-prettier显式关闭所有与Prettier重叠的ESLint格式类规则，避免保存时反复修正，是目前最稳定、推荐度最高的集成策略。
1、在项目根目录执行命令安装依赖：npm install --save-dev eslint prettier eslint-config-prettier。
2、创建.eslintrc.cjs文件，内容如下：
3、在extends数组中包含"eslint:recommended"与"prettier"，后者即eslint-config-prettier导出的空规则集。
4、创建.prettierrc文件，明确定义格式偏好，例如：{"semi": false, "singleQuote": true, "tabWidth": 2}。
5、在package.json中添加脚本："format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""与"lint": "eslint src/**/*.{js,jsx,ts,tsx}"。
代码编辑 CLI 工具集合：Cursor CLI（agent）和 Qoder CLI（qodercli），用于代码修改、重构、Code Review 及自动化代码任务。
三、规则嵌入式集成：将Prettier作为ESLint子规则运行
该方式让Prettier的格式化结果被ESLint视为“规则错误”，从而在ESLint报告面板中统一呈现格式问题，并支持--fix一键修复，适合强管控型团队。
1、安装额外依赖：npm install --save-dev eslint-plugin-prettier。
2、在.eslintrc.cjs中添加"plugin:prettier/recommended"至extends，并在plugins中加入"prettier"。
3、显式启用Prettier规则："prettier/prettier": "error"，使格式违规等同于ESLint错误。
4、确保eslint-plugin-prettier版本与当前Prettier主版本兼容（如Prettier 3.x需对应eslint-plugin-prettier 5.x+）。
5、运行npx eslint --fix src/时，不仅修复逻辑问题，也将同步应用Prettier格式化。
四、工程流级集成：Git提交前强制校验
该方式在代码进入版本库前拦截不合规内容，通过lint-staged与Husky构建不可绕过的质量门禁，适用于协作频繁的QoderWake项目。
1、安装Husky与lint-staged：npm install --save-dev husky lint-staged。
2、初始化Husky：npx husky install，并注册pre-commit钩子：npx husky add .husky/pre-commit "npx lint-staged"。
3、在package.json中配置lint-staged字段，限定仅对暂存区中的源码文件执行Prettier：
4、指定匹配模式："*.{js,jsx,ts,tsx,css,scss,json}": ["prettier --write"]。
5、执行git add后运行git commit，若格式未达标，提交将被中止并提示需先运行格式化。
