1. Vue3 项目里 prettier 配置到底解决什么问题刚用 Vite 起完一个 Vue3 项目团队里几个人各写各的有人习惯行尾加分号有人不加有人缩进用 4 个空格有人用 2 个单引号双引号混着来。代码 review 的时候diff 里一半是格式差异真正的逻辑改动反而被淹没。这就是 prettier 要解决的核心问题——把代码风格从「个人习惯」变成「项目规则」。prettier 是一个 opinionated 的代码格式化工具它不管你原来怎么写的读入代码后按配置重新输出。它和 ESLint 的分工要分清楚ESLint 管代码质量未使用变量、隐式 any、hooks 依赖prettier 只管格式缩进、引号、换行、分号。两者职责不重叠但需要联动否则会出现 ESLint 报格式错、prettier 又改回去的死循环。适合谁看正在搭 Vue3 项目脚手架的前端、需要统一多人协作代码风格的团队、以及想把 AI 辅助检查接进格式化链路的人。这篇会给出可直接复制的.prettierrc.cjs、ESLint 联动配置、package.json脚本并演示通过 TaoToken 统一 Key 通道接入 AI 辅助格式检查的验证步骤最终实现保存即格式化、提交前自动校验的完整链路。我试过在三个人的小团队里推这套配置第一周就发现 review 效率明显提升因为格式争议全部交给工具裁决了。下面从配置文件开始一步步落地。2. TaoToken 前置准备统一 Key 与 API 通道在讲 AI 辅助格式检查之前先把 TaoToken 的接入准备做完。TaoToken 在这里的角色是统一 API 通道你不需要为每个模型单独申请 Key、记不同的 Base URL而是用一套 Key 走同一个入口模型 ID 按需切换。对于格式化检查这种需要频繁调用、但单次请求很轻的场景统一通道能省掉很多切换成本。第一步打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册账号。注册流程就是常规的邮箱加密码完成后进入控制台。第二步进控制台创建 API Key。地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面点新建复制生成的 Key。这个 Key 只显示一次建议直接存进项目的.env.local不要提交到 git。第三步确认 Base URL。TaoToken 的 API 入口是 https://taotoken.net/api 注意这个地址不带任何查询参数配置时原样填入即可。模型 ID 按你实际要用的填比如做代码格式建议可以用 claude 系列或 gpt 系列的模型 ID具体以控制台模型列表为准。这里要强调三件套的完整性Base URL、API Key、Model ID缺一不可。很多接入失败都是因为只填了 Key 没改 Base URL或者 Model ID 拼错。你可以先在模型对话页面 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 手动发一条消息确认 Key 和通道是通的再去写代码。如果你打算长期在编码和 Agent 场景里用可以看下 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合高频调用的开发工作流。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到参数问题先查文档。准备阶段做完你应该手上有一个可用的 API Key、确认过的 Base URL、一个能跑通的 Model ID。接下来进入配置环节。3. 可复制配置.prettierrc.cjs 与 ESLint 联动这一节是全文的核心所有配置都可以直接复制。先说 prettier 配置文件的选择。JSON 文件不能写注释团队协作时新人看不懂每个选项为什么这么设所以用.prettierrc.cjs更合适CommonJS 格式Vite 项目默认支持。在项目根目录新建.prettierrc.cjsmodule.exports { semi: false, // 行尾不加分号 tabWidth: 2, // 缩进 2 个空格 singleQuote: true, // 使用单引号 printWidth: 100, // 单行最多 100 字符 trailingComma: none, // 末尾不加逗号 useTabs: false, // 用空格而非 tab quoteProps: as-needed, // 对象 key 仅在必要时加引号 jsxSingleQuote: false, // JSX 属性用双引号 bracketSpacing: true, // 大括号首尾留空格 bracketSameLine: false, // JSX 反尖括号换行 arrowParens: always, // 箭头函数单参数也加括号 rangeStart: 0, // 格式化范围从文件头开始 rangeEnd: Infinity, // 格式化到文件尾 requirePragma: false, // 不需要文件头 prettier 标记 insertPragma: false, // 不自动插入 prettier proseWrap: preserve, // 按默认标准换行 htmlWhitespaceSensitivity: css, // 按 CSS 显示决定 HTML 折行 vueIndentScriptAndStyle: false, // Vue 的 script/style 不缩进 endOfLine: lf, // 换行符统一 LF embeddedLanguageFormatting: auto // 内嵌代码自动格式化 }几个容易踩坑的选项说明一下。endOfLine: lf在 Windows 上尤其重要否则 git 会一直提示换行符变更。vueIndentScriptAndStyle: false是 Vue 项目专属设成 true 的话script里的内容会整体缩进一层多数团队不习惯。arrowParens: always保证(x) x而不是x x减少 diff 噪音。接着装依赖。在package.json里加开发依赖或者直接跑命令npm install -D prettier eslint eslint-plugin-prettier eslint-config-prettiereslint-config-prettier的作用是关掉 ESLint 里所有和 prettier 冲突的格式规则这是联动的关键不装的话两边会打架。然后配置 ESLint。在.eslintrc.cjs里 extends 数组末尾加上 prettiermodule.exports { root: true, env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:vue/vue3-recommended, plugin:prettier/recommended // 必须放最后 ], parserOptions: { ecmaVersion: latest, sourceType: module }, rules: { prettier/prettier: warn, // 格式问题报 warning 而非 error vue/multi-word-component-names: off } }plugin:prettier/recommended必须放在 extends 最后一位它会把 prettier 作为 ESLint 规则运行这样eslint --fix就能同时修格式和质量问题。最后加package.json脚本{ scripts: { dev: vite, build: vite build, format: prettier --write \src/**/*.{js,ts,vue,json,css,scss}\, format:check: prettier --check \src/**/*.{js,ts,vue,json,css,scss}\, lint: eslint . --ext .js,.ts,.vue --fix } }format全量格式化format:check只检查不改动适合 CI 里跑。lint带--fix一次修完质量和格式。到这里保存即格式化还需要编辑器配合。VS Code 里装 Prettier 插件在.vscode/settings.json加{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit } }这样保存时先跑 ESLint 修质量问题再跑 prettier 修格式顺序不会乱。4. 验证请求AI 辅助格式检查跑通配置写完了得验证它真的工作。先跑基础验证npm run format:check如果所有文件都符合规则输出类似All matched files use Prettier code style!。如果有文件不合规会列出文件名和行号。这时候跑npm run format一键修完。基础链路通了之后接 AI 辅助格式检查。思路是写一个 Node 脚本把format:check的输出喂给 TaoToken 的 API让模型给出修复建议。新建scripts/ai-format-check.mjsimport { execSync } from node:child_process import fs from node:fs const API_KEY process.env.TAOTOKEN_API_KEY const BASE_URL https://taotoken.net/api const MODEL_ID process.env.TAOTOKEN_MODEL_ID || claude-3-5-sonnet let checkOutput try { checkOutput execSync(npx prettier --check src/**/*.{js,ts,vue}, { encoding: utf-8 }) console.log(格式检查通过无需 AI 介入) process.exit(0) } catch (err) { checkOutput err.stdout || err.message } const prompt 以下是 prettier 格式检查的报错输出请逐条给出修复建议指出是哪个文件、哪类格式问题、应该怎么改\n\n${checkOutput} const res await fetch(${BASE_URL}/v1/messages, { method: POST, headers: { Content-Type: application/json, x-api-key: API_KEY, anthropic-version: 2023-06-01 }, body: JSON.stringify({ model: MODEL_ID, max_tokens: 1024, messages: [{ role: user, content: prompt }] }) }) if (!res.ok) { console.error(请求失败, res.status, await res.text()) process.exit(1) } const data await res.json() const text data.content?.[0]?.text || JSON.stringify(data) fs.writeFileSync(format-report.md, text) console.log(AI 格式建议已写入 format-report.md)运行前设置环境变量export TAOTOKEN_API_KEY你的Key export TAOTOKEN_MODEL_ID你的模型ID node scripts/ai-format-check.mjs成功的话终端会打印「AI 格式建议已写入 format-report.md」打开报告能看到模型逐条列出的修复建议。如果格式本来就合规脚本直接退出不浪费一次调用。这里的关键是 Base URL 用https://taotoken.net/api请求头带x-api-key模型 ID 从环境变量读方便切换。实测下来把报错原文喂给模型比让它自己猜要准得多因为它能看到具体的行号和规则名。5. 常见报错排查401、local proxy failed、reading choices接入过程中最容易撞的几个错逐个说清楚。401 Unauthorized。这个基本是 Key 的问题。先确认TAOTOKEN_API_KEY环境变量真的传进去了用echo $TAOTOKEN_API_KEY看有没有值。如果值对但还报 401检查请求头字段名——Anthropic 格式用x-api-keyOpenAI 格式用Authorization: Bearer别混用。还有一种情况是 Key 复制时带了空格或换行重新复制一次。local proxy failed。这个报错通常出现在你本地配了代理但代理没起来或者环境变量HTTP_PROXY/HTTPS_PROXY指向了一个失效地址。检查方式env | grep -i proxy如果有值但你不确定是否有效先unset HTTP_PROXY HTTPS_PROXY再跑脚本。注意这里说的是本地开发环境的网络配置问题不是让你去搭什么通道纯粹是排查环境变量残留。reading choices。这个错说明你按 OpenAI 的响应结构去解析了但实际返回的不是那个格式。OpenAI 格式的响应是data.choices[0].message.contentAnthropic 格式是data.content[0].text。如果你用 TaoToken 的 Anthropic 兼容端点就得按content[0].text取。改脚本里那行解析代码即可。反过来如果你调的是 OpenAI 兼容端点却按 Anthropic 解析也会报类似的 undefined 错误。OAuth 相关报错。如果你在 Claude Code 或类似工具里配置可能会遇到 OAuth 认证失败。这类工具通常支持两种认证OAuth 登录和 API Key。用 TaoToken 的话走 API Key 模式在配置里填 Base URL、Key、Model ID 三件套。以 Claude Code 为例配置文件里需要明确指定ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY模型 ID 通过ANTHROPIC_MODEL指定。三个都填对OAuth 报错就消失了。Cline MCP 配置。如果你在 Cline 里接 MCP 服务配置项同样是三件套。Base URL 填https://taotoken.net/apiAPI Key 填你的 KeyModel ID 填控制台里的模型标识。Cline 的 MCP 配置是 JSON 格式注意 JSON 里不能有注释路径要用绝对路径。Codex auth.json。用 Codex 的话认证信息在auth.json里。这个文件里需要包含 Base URL、Key、Model ID。格式是标准 JSON改完保存后重启 Codex 生效。如果报认证失败先检查这个文件里的 Base URL 是不是https://taotoken.net/api有没有多写斜杠或路径。排查的通用思路先确认三件套齐全再看请求头字段名对不对最后看响应解析结构对不对。90% 的报错都出在这三步里。6. 把 AI 检查接进提交链路与后续建议配置和验证都跑通了最后一步是让它自动化。用 husky 加 lint-staged在提交前自动跑格式检查npm install -D husky lint-staged npx husky init在package.json加{ lint-staged: { *.{js,ts,vue,json,css,scss}: [prettier --write, eslint --fix] } }.husky/pre-commit里写npx lint-staged这样每次git commit前暂存区的文件会先被 prettier 和 ESLint 修一遍修完还报错就阻止提交。团队里再也不用在 review 里争论格式了。AI 辅助检查可以放在 CI 里跑作为非阻塞的提示。在 GitHub Actions 里加一个 job跑node scripts/ai-format-check.mjs把format-report.md作为 artifact 上传。这样每次 PR 都能看到模型给的格式建议但不阻止合并避免 AI 误判卡住流程。后续如果团队要统一更多规则可以在.prettierrc.cjs里继续加选项但记住一个原则prettier 的配置项越少越好默认值已经覆盖大多数场景加太多反而增加维护成本。真正需要团队讨论的只有printWidth、semi、singleQuote这几个高频争议项。AI 检查的 prompt 也可以迭代。比如让模型不仅指出问题还给出「为什么这条规则重要」的解释新人看了能理解而不是机械改。或者把format-report.md的格式固定成表格方便直接贴进 PR 评论。整套链路跑下来从保存格式化到提交校验再到 AI 辅助建议Vue3 项目的代码风格就彻底交给工具了。人只需要关注逻辑格式的事让 prettier 和 AI 去管。