1. 前端团队代码风格总打架先搞清 ESLint 和 Prettier 的分工多人协作的前端项目里最容易出现的不是功能 bug而是「你提交的代码缩进 2 空格我提交的用 4 空格」「有人用单引号有人用双引号」「尾逗号一会儿有一会儿没有」。这类问题单看很小但积累起来就是 CI 频繁报错、Code Review 里一半时间在吵格式、git diff 里全是无意义的空白变更。要解决它核心是两个工具配合ESLint 负责「代码质量与潜在错误」Prettier 负责「代码排版格式」。很多人把两者混着用结果规则互相打架保存一次格式化一次反而更乱。正确的分工是ESLint 管逻辑层面的问题未使用变量、隐式 any、React Hooks 依赖缺失等Prettier 管纯排版换行、引号、分号、缩进。两者通过eslint-config-prettier关掉冲突规则各司其职。这篇内容面向的是正在搭建或维护前端团队规范的同学无论你用的是 Vue、React 还是原生 JS 项目配置思路一致。我会给出可直接复制的.eslintrc、.prettierrc、.vscode/settings.json三件套演示保存自动格式化和eslint --fix的验证过程并说明怎么用 TaoToken 统一 Key 和 API 通道把 AI 辅助编码工具也纳入同一套规范流程里。整套配置落地后团队成员本地保存即格式化提交前自动修复CI 只做最终校验风格不一致的问题基本消失。先说清楚一个常见误区只装 VS Code 插件不写配置文件等于没规范。插件只是执行器真正决定规则的是项目根目录下的配置文件。配置文件跟着仓库走新人 clone 下来就自动生效这才是团队统一的关键。所以下面所有配置都放在项目里而不是只改本地编辑器设置。2. 用 TaoToken 统一 AI 辅助工具的 Key 与 API 通道在讲具体配置前先解决一个协作场景里的隐性问题现在很多前端同学会用 AI 辅助工具帮忙写 ESLint 规则、生成 Prettier 配置、排查 lint 报错。如果每个人各自申请 Key、各自配 Base URL团队里就会出现「你的工具能跑我的跑不通」「Key 泄露在某个人的 settings.json 里」这类麻烦。TaoToken 的作用就是把这些 AI 辅助工具的接入统一起来。它提供一个兼容常见接口规范的 API 通道你只需要一个 Key 和一个 Base URL就能让 Cline、Claude Code、Codex 这类工具走同一条通道。对团队来说好处是配置可复制、Key 可集中管理、换工具不用重新折腾接入。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址不带 UTM 参数配置时直接填这个。具体到接入核心三件套永远是Base URL、API Key、Model ID。以 Cline 为例在 VS Code 里安装 Cline 插件后打开设置把 API Provider 选成兼容 OpenAI 的选项然后填Base URLhttps://taotoken.net/apiAPI Key你在 TaoToken 控制台生成的 KeyModel ID按你实际要用的模型填写如果你用的是 Claude Code 这类命令行工具配置方式类似通过环境变量或配置文件指定 Base URL 和 Key。Codex 的话配置写在auth.json里同样需要 Base URL、Key、Model ID 三项齐全。这三件套缺一不可只填 Key 不填 Base URL 是最常见的接入失败原因。这里要强调一点TaoToken 是 AI 工具的接入通道不是代码编辑器也不替代 ESLint 或 Prettier。它的价值在于让团队用同一套凭证接入 AI 辅助能力避免每人一套配置的混乱。你可以在控制台里管理 Key在文档里查具体工具的接入步骤。需要生成 Key 就去 API Keys 页面需要看接入说明就去文档页想直接验证模型是否通就去模型对话页试一句。对于长期做前端工程化、需要 AI 辅助写规则和排错的团队可以考虑 Coding Plan把日常编码和 Agent 场景的调用统一规划。这样团队里谁用哪个工具底层通道是一致的排查问题也方便。3. 可复制的三件套配置.eslintrc、.prettierrc、settings.json这一节是全文的核心给出可以直接落地的配置片段。建议按顺序操作先初始化 ESLint再配 Prettier最后配 VS Code 保存行为。3.1 初始化 ESLint 并生成 .eslintrc在项目根目录执行npm init eslint/config交互式问答里按你的项目实际情况选择。以 Vue TypeScript 项目为例大致选择检查语法、查找问题、选择框架Vue、是否用 TypeScript是、运行环境选 Browser 和 Node、配置格式选 JSON、是否现在安装依赖选「是」、包管理器选 npm。执行完会生成.eslintrc.json。一个适合团队的基础.eslintrc.json如下{ root: true, env: { browser: true, es2022: true, node: true }, extends: [ eslint:recommended, plugin:vue/vue3-recommended, plugin:typescript-eslint/recommended, prettier ], parser: vue-eslint-parser, parserOptions: { parser: typescript-eslint/parser, ecmaVersion: latest, sourceType: module }, plugins: [vue, typescript-eslint], rules: { no-unused-vars: off, typescript-eslint/no-unused-vars: [warn], no-console: [warn, { allow: [warn, error] }], vue/multi-word-component-names: off } }注意extends里最后一项prettier它来自eslint-config-prettier作用是关闭所有和 Prettier 冲突的 ESLint 排版规则。没有这一项ESLint 和 Prettier 会互相覆盖保存格式化后 ESLint 又报错。安装它npm install --save-dev eslint-config-prettier3.2 配置 .prettierrc生成空配置文件node --eval fs.writeFileSync(.prettierrc,{}\n)然后写入团队约定。JSON 里不能有注释下面这份是纯配置{ semi: true, singleQuote: true, printWidth: 100, tabWidth: 2, trailingComma: es5, arrowParens: always, endOfLine: lf }逐项说明semi控制语句末尾分号singleQuote统一单引号printWidth是每行最大宽度tabWidth缩进空格数trailingComma尾逗号策略arrowParens箭头函数参数括号endOfLine统一换行符为 LF。endOfLine这项特别重要Windows 和 Mac 混用时如果不统一git diff 会显示整个文件被改动。3.3 配置 .vscode/settings.json 实现保存自动格式化在项目根目录建.vscode/settings.json这个文件跟着仓库走团队所有人共享{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, eslint.validate: [ javascript, javascriptreact, typescript, typescriptreact, vue ], prettier.requireConfig: true }关键点解释editor.formatOnSave打开保存格式化editor.defaultFormatter指定 Prettier 为默认格式化器editor.codeActionsOnSave里的source.fixAll.eslint让保存时同时执行 ESLint 自动修复eslint.validate声明要检查的文件类型Vue 项目必须加上vueprettier.requireConfig保证只有存在.prettierrc时才格式化避免误格式化第三方文件。这里有个坑source.fixAll.eslint的值在新版 VS Code 里要用explicit写成true会提示已废弃。如果你团队用的版本较老写true也能用但建议统一升级到新写法。三件套配好后还需要在 VS Code 里安装 ESLint 和 Prettier 两个插件。插件是执行器配置文件是规则两者缺一不可。装完插件重启一下窗口让配置生效。4. 验证保存格式化与 eslint --fix 是否真的生效配置写完不代表生效必须验证。这一节给出可复现的验证步骤确保你的保存自动格式化和命令行修复都正常工作。4.1 验证保存自动格式化新建一个测试文件src/test-format.js故意写得很乱const foo {a:1,b:2} function bar( x,y ){ return xy } console.log( bar(1,2) ,foo )保存这个文件。如果配置正确你会看到它自动变成const foo { a: 1, b: 2 }; function bar(x, y) { return x y; } console.log(bar(1, 2), foo);缩进、空格、分号、引号都按.prettierrc的规则调整了。如果没变化检查三件事VS Code 右下角是否显示 Prettier 为当前格式化器.vscode/settings.json是否在项目根目录Prettier 插件是否已安装并启用。4.2 验证 eslint --fix在package.json的 scripts 里加一条{ scripts: { lint: eslint . --ext .js,.ts,.vue, lint:fix: eslint . --ext .js,.ts,.vue --fix } }然后故意写一段有 ESLint 问题的代码比如声明了变量不用const unusedVar 123; function greet(name) { return hello ${name}; } greet(world);执行npm run lint终端会报unusedVar is assigned a value but never used。再执行npm run lint:fix能自动修的会修掉不能自动修的比如未使用变量仍会报错需要人工处理。这就是 ESLint 和 Prettier 的分工Prettier 修排版ESLint 修逻辑问题能自动修的自动修修不了的提示你。4.3 验证 CI 校验在 CI 里加一步npm run lint确保提交的代码符合规范。因为本地已经保存即格式化、提交前可lint:fixCI 通常不会再有格式报错只会在有人绕过本地配置时拦截。这样 CI 从「天天报格式错」变成「只拦真正的质量问题」。如果你用 husky lint-staged 做提交前钩子可以再加一层保险{ lint-staged: { *.{js,ts,vue}: [eslint --fix, prettier --write] } }这样即使有人本地没配好提交时也会被自动修复。5. 常见报错排查401、local proxy failed、reading choices、OAuth配置和接入过程中报错集中在几类。这一节按真实错误信息对照排查帮你快速定位。5.1 401 Unauthorized这是接入 AI 工具时最常见的错误含义是 Key 无效或没带上。排查顺序确认 API Key 是否复制完整有没有多余空格确认 Base URL 填的是https://taotoken.net/api不是首页地址确认请求头里带了Authorization: Bearer 你的Key。如果 Key 是在控制台刚生成的确认没有误删。401 基本就是凭证问题和 ESLint 配置无关。5.2 local proxy failed这个报错通常出现在工具尝试走本地代理但代理没启动时。检查你的工具配置里是否残留了本地代理地址比如http://127.0.0.1:xxxx。如果不需要代理把代理配置清空直接让工具请求 Base URL。团队统一用 TaoToken 通道时不应该再叠加本地代理否则请求链路会断。5.3 reading choices 相关报错这类报错一般出现在解析模型返回时提示读取choices字段失败。原因通常是返回体不是预期的对话格式可能是 Base URL 填错导致请求打到了非预期端点或者 Model ID 填了一个不存在的模型。排查确认 Base URL 是https://taotoken.net/api确认 Model ID 拼写正确用模型对话页先发一句测试确认通道本身是通的。5.4 OAuth 相关报错有些工具默认走 OAuth 登录流程如果你用的是 Key 接入需要在配置里明确选择 API Key 模式而不是 OAuth。比如 Claude Code 的配置里要指定用 API Key 而非登录态。Codex 的auth.json里同样要写全 Base URL、Key、Model ID 三件套缺一项就可能触发 OAuth 回退导致失败。5.5 ESLint 与 Prettier 冲突类报错如果保存后 ESLint 仍报格式错误检查extends里有没有加prettier。如果加了还冲突确认eslint-config-prettier已安装且它在extends数组的最后一位。顺序错了后面的配置会覆盖前面的冲突规则关不掉。5.6 Vue 文件不生效Vue 项目里 ESLint 不检查.vue文件通常是eslint.validate里没加vue或者parser没设成vue-eslint-parser。两个都要配缺一不可。排查时记住一个原则先确认通道通不通用模型对话页测一句再确认配置对不对对照三件套检查最后确认工具版本是否支持当前写法。大部分报错都能在这三步里定位。6. 把规范沉淀成团队资产从本地到 CI 的完整链路配置跑通后最后一步是把它变成团队可复用的资产而不是停留在某个人本地。首先三件套文件必须提交到仓库.eslintrc.json、.prettierrc、.vscode/settings.json。新人 clone 下来装好 ESLint 和 Prettier 插件保存即格式化零沟通成本。.vscode/settings.json提交到仓库这点很多人忽略但它是团队统一编辑器行为的关键。其次package.json里的lint和lint:fix脚本要写清楚CI 里跑lint本地开发用lint:fix。配合 husky lint-staged提交前自动修复进一步减少 CI 报错。再往上AI 辅助工具的接入也纳入统一管理。团队用 TaoToken 的同一个 Base URL 和 Key 策略Cline、Claude Code、Codex 都走同一通道。需要生成 Key 去 API Keys 页面需要查接入细节去文档页想验证模型通不通去模型对话页。长期做工程化和 Agent 场景的用 Coding Plan 统一规划调用。这套链路的价值在于格式问题在保存时解决质量问题在提交前拦截CI 只做最终把关AI 辅助工具用统一通道接入。团队不再为风格吵架Code Review 聚焦逻辑新人上手当天就能产出符合规范的代码。最后给一个实操建议配置落地后先在一个小项目或分支上试跑一周收集团队反馈再推广到主仓库。规则不要一次定太严no-console这类可以先设warn而不是error等大家适应了再收紧。规范是为人服务的能落地的规范才是好规范。