1. 老项目多人协作缩进引号分号各写各的怎么办接手一个跑了三年的 Vue2 后台管理项目第一次拉代码就发现同一个.vue文件里有人用两个空格缩进有人用 Tab有人分号结尾有人不写模板里的属性换行规则更是五花八门。git diff里一半的改动是格式差异真正改逻辑的代码被淹没在几百行空白变更里Code Review 基本没法看。这就是 Vue2 老项目在多人协作下最典型的代码风格混乱问题也是很多团队想统一却一直没落地的痛点。代码风格统一这件事本质上是把「人肉约定」变成「工具强制」。ESLint 负责代码质量与语法规则检查Prettier 负责格式化排版两者配合再加上编辑器保存自动修复和提交前钩子校验就能让团队里每个人写出来的代码长得一模一样。这套方案对 Vue2 项目尤其重要因为 Vue 单文件组件里同时有 template、script、style 三块格式规则比纯 JS 项目复杂得多。这篇文章面向的是正在维护 Vue2 老项目的前端同学尤其是团队里负责工程化配置的那个人。我会从零给出可以直接复制的.eslintrc.js、.prettierrc、package.jsonscripts 和 VSCodesettings.json然后演示保存自动修复、提交前 lint-staged 校验的完整动作。最后还会说明怎么用 TaoToken 统一管理团队 AI 辅助编码工具的 Key 和 API 通道让格式规范和 AI 补全在同一套配置下协作。需要先明确一点ESLint 和 Prettier 的职责不要混。ESLint 管的是「这段代码有没有潜在 bug、有没有用废弃 API、Vue 模板写法是否规范」Prettier 只管「缩进几个空格、用不用分号、单引号还是双引号」。很多人配置冲突就是因为让 ESLint 也去管格式结果两边打架。正确做法是用eslint-config-prettier关掉 ESLint 里所有和格式相关的规则把格式完全交给 Prettier。2. TaoToken 前置统一团队 AI 编码工具的 Key 与 API 通道在讲具体配置之前先说一个容易被忽略的协作问题。现在团队里每个人都在用 AI 辅助编码有人用 Claude Code有人用 Cline有人用 Codex 风格的 CLI 工具。如果每个人的 API Key、Base URL、模型 ID 都各配各的会出现三个麻烦一是新人入职要单独找每个人要配置二是 Key 泄露了不知道从哪查三是不同人用的模型版本不一致AI 生成的代码风格和补全质量参差不齐。TaoToken 在这里的作用是提供一个统一的 API 通道和 Key 管理入口。你可以把它理解成团队 AI 工具的「统一网关」所有 AI 编码工具都指向同一个 Base URL用同一套 Key 体系模型 ID 也统一约定。这样格式规范由 ESLint Prettier 保证AI 补全的接入配置由 TaoToken 统一两件事互不干扰又能协同。具体来说TaoToken 的 API 地址是https://taotoken.net/api官网是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。团队里需要先在控制台创建 Key然后把这个 Key 和 Base URL 写进各自的工具配置里。控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI Keys 管理页是https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。这里要强调一个原则TaoToken 是 AI 编码工具的接入通道不是用来替代编辑器或 ESLint 的。格式统一还是靠 ESLint PrettierTaoToken 只负责让团队里所有 AI 工具走同一套 Key 和 API 配置。两者配合起来新人入职时只需要两件事拉代码后npm install自动装好 lint 依赖然后按文档配好 TaoToken 的 Base URL 和 Key就能和团队其他人完全一致的开发环境。如果你用的是 Claude Code 这类工具接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。模型对话调试可以用https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content长期编码和 Agent 场景建议看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。3. 可复制配置.eslintrc.js、.prettierrc、package.json 与 settings.json这一节是全文的核心所有配置都可以直接复制到你的 Vue2 项目里。先装依赖注意 Vue2 项目要用eslint-plugin-vue的 v6 或 v7 版本不要装 v9否则规则名对不上。npm i -D eslint7 eslint-plugin-vue7 eslint-config-prettier eslint-plugin-prettier prettier lint-staged husky如果你项目里用了vue-property-decorator和 TypeScript再加两个npm i -D typescript-eslint/parser typescript-eslint/eslint-plugin然后是.prettierrc放在项目根目录。这个文件决定所有格式细节团队必须统一{ semi: false, singleQuote: true, tabWidth: 2, useTabs: false, trailingComma: none, printWidth: 100, endOfLine: lf, arrowParens: avoid, vueIndentScriptAndStyle: false }这里semi: false表示不写分号singleQuote: true表示用单引号tabWidth: 2表示两个空格缩进。这三个是团队争议最大的定下来之后就不要改。endOfLine: lf很重要Windows 和 Mac 混用时如果不统一换行符git diff会显示整个文件都改了。接着是.eslintrc.js这是 Vue2 项目的完整配置module.exports { root: true, env: { node: true, browser: true, es6: true }, parserOptions: { parser: typescript-eslint/parser, ecmaVersion: 2020, sourceType: module }, extends: [ eslint:recommended, plugin:vue/recommended, plugin:prettier/recommended ], plugins: [vue], rules: { prettier/prettier: error, generator-star-spacing: off, no-debugger: process.env.NODE_ENV production ? error : off, no-console: process.env.NODE_ENV production ? warn : off, vue/html-indent: off, vue/max-attributes-per-line: off, vue/html-self-closing: off, vue/html-closing-bracket-newline: off, vue/component-tags-order: off, vue/multi-word-component-names: off } }注意plugin:prettier/recommended这一行它同时做了两件事把 Prettier 作为 ESLint 规则运行以及用eslint-config-prettier关掉所有冲突的格式规则。所以extends数组里不需要再单独写eslint-config-prettier。然后是package.json里的 scripts 和 lint-staged 配置{ scripts: { lint: eslint --ext .js,.vue src, lint:fix: eslint --ext .js,.vue src --fix, format: prettier --write \src/**/*.{js,vue,json,css,scss}\ }, lint-staged: { *.{js,vue}: [ eslint --fix, prettier --write ], *.{json,css,scss,md}: [ prettier --write ] }, husky: { hooks: { pre-commit: lint-staged } } }husky 的配置方式取决于版本上面是 v4 的写法。如果你装的是 husky v7需要用npx husky install和.husky/pre-commit文件这里不展开团队统一一个版本即可。最后是 VSCode 的.vscode/settings.json放在项目根目录这样团队每个人打开项目都自动生效{ editor.formatOnSave: true, editor.codeActionsOnSave: { source.fixAll.eslint: true }, eslint.validate: [ javascript, javascriptreact, vue ], vetur.validation.template: false, vetur.format.defaultFormatter.html: prettier, vetur.format.defaultFormatter.js: prettier-eslint, files.eol: \n, files.autoSave: afterDelay }这里vetur.validation.template: false是关键因为模板校验交给 ESLint 的plugin:vue/recommended就够了Vetur 再校验一遍会重复报错。editor.codeActionsOnSave里的source.fixAll.eslint让保存时自动跑 ESLint 修复。4. 验证请求保存自动修复与提交前 lint-staged 校验配置写完之后必须验证否则你不知道到底生效没有。验证分三步手动跑 lint、保存自动修复、提交前钩子拦截。第一步在项目根目录执行npx eslint --ext .js,.vue src --fix如果配置正确你会看到终端输出一堆被修复的文件或者没有任何输出表示全部通过。如果报错说找不到plugin:vue/recommended说明eslint-plugin-vue没装或版本不对。如果报错说prettier/prettier规则冲突检查extends里是不是漏了plugin:prettier/recommended。第二步打开一个故意写乱的.vue文件比如把缩进改成 4 个空格、把单引号改成双引号、加上分号然后按CtrlS保存。如果 VSCode 配置生效你会看到文件瞬间被格式化成统一风格。这一步验证的是editor.codeActionsOnSave和editor.formatOnSave是否起作用。如果没反应检查 VSCode 右下角有没有 ESLint 插件的状态图标以及.vscode/settings.json是否在项目根目录。第三步验证提交前校验。故意留一个格式错误不保存修复然后执行git add . git commit -m test lint-staged如果 husky 和 lint-staged 配置正确commit 会被拦截终端显示 ESLint 报错并且文件被自动修复后需要重新git add。这一步是团队协作的最后一道防线确保即使有人本地没配好编辑器提交到仓库的代码也是格式统一的。验证通过后你可以用 TaoToken 的模型对话页做一次 AI 辅助编码的连通性测试。打开https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content选一个模型发一条消息确认 Key 和 Base URL 配置正确。这样格式规范和 AI 工具接入就都验证完了。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth配置过程中最容易踩的坑集中在两类ESLint/Prettier 规则冲突以及 AI 工具接入时的认证和网络报错。下面按真实报错逐个排查。报错一Definition for rule prettier/prettier was not found这说明eslint-plugin-prettier没装或者plugins数组里没写prettier。检查package.json里有没有eslint-plugin-prettier然后确认.eslintrc.js的extends里有plugin:prettier/recommended。这个 preset 会自动注册插件所以通常不需要手动在plugins里再加。报错二Parsing error: Unexpected token出现在.vue文件Vue2 项目里如果用了 TypeScript 装饰器语法parserOptions.parser必须指向typescript-eslint/parser。如果没装这个包ESLint 解析不了Component这类装饰器。装完之后确认.eslintrc.js里parserOptions.parser写对了。报错三保存时 ESLint 和 Prettier 互相打架代码反复横跳这是最典型的冲突。原因是 ESLint 里还开着格式规则同时 Prettier 也在格式化。解决办法是确保extends数组里plugin:prettier/recommended放在最后它会覆盖前面的格式规则。如果还不行检查有没有单独装eslint-config-prettier但没在 extends 里引用。报错四AI 工具接入时报401 Unauthorized这个报错说明 Key 不对或没带上。检查三件套Base URL 是不是https://taotoken.net/apiKey 是不是从https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content复制的完整字符串Model ID 是不是团队约定的那个。三者缺一不可。如果用的是 Claude Code参考https://taotoken.net/claudecode?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content的接入说明。报错五local proxy failed或连接超时这个报错通常是本地网络环境或工具配置的代理地址不对。检查工具配置里有没有多余的代理设置Base URL 是否被错误地加了路径后缀。TaoToken 的 API 地址就是https://taotoken.net/api不要自己拼/v1之类的路径具体路径由工具自己处理。报错六reading choices或返回结构解析失败这说明请求发出去了但返回格式和工具预期的不一致。常见原因是 Model ID 写错了或者工具版本太老不支持当前的返回结构。先确认 Model ID 和团队约定一致然后升级工具到最新版。如果还不行用模型对话页单独测一下同一个 Model ID 是否能正常返回。报错七OAuth 相关报错部分 CLI 工具首次使用会走 OAuth 流程如果报 OAuth 错误通常是回调地址被占用或浏览器没正常跳转。可以改用 API Key 方式接入在工具配置里直接填 Base URL 和 Key跳过 OAuth。TaoToken 的接入文档里有 API Key 方式的完整说明。排查完这些你的 Vue2 项目应该已经有一套稳定的格式规范了。最后提醒一点.eslintrc.js和.prettierrc一定要提交到仓库.vscode/settings.json也建议提交这样团队每个人的环境才一致。如果团队用 TaoToken 统一管理 AI 工具把 Base URL、Key 获取方式、Model ID 约定写进项目 README新人入职照着配就行。