Vue3 项目配置 eslint+prettier：用 TaoToken 统一 AI 补全与格式化链路

1. 为什么 Vue3 项目里 AI 补全和格式化总打架Vue3 项目配置 eslintprettier 这件事本身不算难难的是你同时开着 AI 编码插件的时候。我见过太多团队的状态是eslint 管一套缩进prettier 管另一套AI 补全插件又按自己的模型习惯吐第三种风格。结果就是保存一次格式化一次git diff 里全是空格和引号的战争review 的时候根本看不出谁改了业务逻辑。核心矛盾在于链路是分散的。eslint 走本地 node_modulesprettier 走编辑器插件AI 补全走某个云端通道三者的配置入口、规则来源、请求出口都不在一起。你想统一风格就得先把「请求从哪出去」这件事收口。这也是我把 TaoToken 拉进来的原因它不负责帮你写规则它负责让 AI 补全这条链路有一个稳定的 Key 和 API 通道这样 settings.json 和 config.toml 里的配置才有统一的落点而不是每个插件各填一个地址。这篇面向的是从零接入 eslintprettier 的 Vue3 工程尤其是用 Vite TypeScript script setup的组合。目标很具体一次配置之后保存自动格式化、AI 补全风格一致、lint 能过、CI 能跑。下面按「先收口通道再落规则最后验证」的顺序走每一步都能直接复制。2. 前置用 TaoToken 统一 AI 补全的 Key 与 API 通道在动 eslint 配置之前先把 AI 补全这条链路固定下来。原因很简单如果你的 AI 插件还在用某个临时 Key、或者地址三天两头换那 settings.json 里写的模型配置就是一次性的格式化规则再漂亮也白搭。TaoToken 在这里的角色是统一入口。你注册后在控制台生成一个 API Key之后无论是编辑器里的补全插件、还是命令行里的 coding agent都指向同一个 base URL 和同一个 Key。这样做的直接好处是settings.json 里只需要维护一份模型配置config.toml 里也只需要维护一份换模型的时候改一处就行。具体动作分三步。第一步进控制台创建 Key地址是 https://taotoken.net/api-keys 建议按项目建独立 Key方便后面排查是哪个项目在消耗。第二步记下 API 基地址 https://taotoken.net/api 注意这个地址不带任何查询参数配置里直接填。第三步如果你用的是 Claude Code 这类命令行工具走 Anthropic 兼容入口参考文档在 https://taotoken.net/doc 。注意Key 只创建一次就够不要在每个插件里重复填不同的 Key。统一 Key 是后面「一次配置多处生效」的前提。这一步不涉及任何规则纯粹是把出口固定。做完之后你的 AI 补全请求就有了确定的来源接下来 eslint 和 prettier 的规则才有意义——因为你知道补全内容是从哪条链路进来的。3. 可复制配置eslint prettier AI 补全三件套3.1 安装依赖先装齐依赖Vue3 TS 的组合需要 vue 解析器和 typescript-eslint 的扁平配置支持。用 pnpmpnpm add -D eslint prettier eslint-plugin-vue vue-eslint-parser \ typescript-eslint/eslint-plugin typescript-eslint/parser \ eslint-config-prettier eslint-plugin-prettier typescript-eslint这里有个容易踩的点typescript-eslint这个包是扁平配置时代的新入口和老的typescript-eslint/eslint-plugin不是一回事。两个都装是为了兼容实际配置里用typescript-eslint的configs.recommended。3.2 eslint.config.cjs 骨架ESLint 9 之后默认走扁平配置文件名用eslint.config.cjs避免 ESM 加载问题。下面这份是 Vue3 TS 的可用骨架// eslint.config.cjs const vuePlugin require(eslint-plugin-vue); const js require(eslint/js); const tseslint require(typescript-eslint); const pluginPrettier require(eslint-plugin-prettier); module.exports [ js.configs.recommended, ...tseslint.configs.recommended, { files: [**/*.{vue,ts,tsx,js,jsx,cjs,mjs,mts,cts}], ignores: [ **/dist, **/node_modules, **/public, **/build, **/.vite, **/*.min.* ], plugins: { vue: vuePlugin }, languageOptions: { parser: require(vue-eslint-parser), parserOptions: { ecmaVersion: 2020, sourceType: module, parser: require(typescript-eslint/parser), vueFeatures: { filters: true, defaultLegacyBehavior: false } } }, rules: { no-undef: off, vue/no-unused-components: off, vue/multi-word-component-names: off, vue/require-default-prop: off, typescript-eslint/no-require-imports: off, typescript-eslint/no-unused-vars: warn, vue/v-on-style: [warn, shorthand], vue/v-bind-style: [warn, shorthand], vue/no-spaces-around-equal-signs-in-attribute: error } }, { files: [**/*.{vue,ts,tsx,js,jsx,cjs,mjs,mts,cts}], plugins: { prettier: pluginPrettier }, rules: { prettier/prettier: [error] } }, { rules: { prefer-const: warn, no-console: [warn, { allow: [warn, error] }], no-debugger: error } } ];关键点解释一下。vue-eslint-parser负责解析.vue文件parserOptions.parser再指定 TS 解析器处理script setup langts。vue/multi-word-component-names关掉是因为很多项目用index.vue这种单字组件名开着会一直报。prettier/prettier设为 error 是为了让格式问题在 lint 阶段就暴露而不是等到保存时才修。3.3 .prettierrc 与忽略文件prettier 的规则要和 eslint 里的 prettier 插件对齐否则两边会互相覆盖。配置文件{ printWidth: 100, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, quoteProps: as-needed, jsxSingleQuote: false, trailingComma: none, bracketSpacing: true, bracketSameLine: false, arrowParens: avoid, requirePragma: false, insertPragma: false, proseWrap: preserve, htmlWhitespaceSensitivity: css, vueIndentScriptAndStyle: false, endOfLine: auto }trailingComma: none和arrowParens: avoid是我在 Vue3 项目里比较推荐的组合前者避免模板里多出逗号后者让单参数箭头函数更干净。endOfLine: auto是为了跨平台Windows 和 macOS 协作时不会因为换行符报错。忽略文件.prettierignore/dist/* /node_modules/** /public/* **/*.svg **/*.sh stats.html3.4 package.json 脚本把 lint 和 format 挂到脚本上CI 和本地用同一套命令{ scripts: { lint: eslint . --ext .ts,.vue,.js, lint:fix: eslint . --ext .ts,.vue,.js --fix, format: prettier --write ., format:check: prettier --check . } }3.5 settings.json让编辑器保存即格式化VS Code 的.vscode/settings.json是 AI 补全和格式化协同的关键落点。这里同时配置默认格式化器和 AI 插件的模型通道{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, editor.codeActionsOnSave: { source.fixAll.eslint: explicit } }source.fixAll.eslint设为explicit是 ESLint 9 的推荐值避免保存时静默修改。这样保存一次prettier 先格式化eslint 再修可自动修复的问题AI 补全的内容也会走同一条格式化链路。3.6 config.toml命令行 AI 工具的通道配置如果你用命令行 coding agent配置文件通常是config.toml。把模型通道指向 TaoTokenmodel_provider taotoken model claude-sonnet-4-5 [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY然后在环境变量里设置TAOTOKEN_API_KEY值就是你在控制台创建的那个 Key。这样命令行工具和编辑器插件走的是同一个出口补全风格和格式化规则不会因为通道不同而漂移。4. 验证跑一遍确认链路生效配置写完不算完得验证。按顺序执行pnpm run lint pnpm run lint:fix pnpm run format pnpm run format:check预期结果是lint可能报一些 warning比如no-consolelint:fix自动修掉可修复项format把全项目格式化一遍format:check最后返回 0 表示格式一致。然后在编辑器里做一次真实测试新建一个.vue文件故意写乱缩进和引号保存。如果 prettier 自动修正、eslint 没有报格式错误说明链路通了。再触发一次 AI 补全看补全出来的代码保存后是否被格式化到同一风格——这一步是验证「AI 补全与格式化协同」的关键。如果命令行工具也配了跑一次模型对话确认通道可用地址在 https://taotoken.net/chat 。能正常返回内容说明 Key 和 base URL 都对。5. 本篇常见错排查5.1 eslint 报 Parsing error: Unexpected token 在 .vue 文件八成是vue-eslint-parser没生效或者parserOptions.parser没指向 TS 解析器。检查eslint.config.cjs里languageOptions.parser是不是require(vue-eslint-parser)以及parserOptions.parser是不是require(typescript-eslint/parser)。两个都要有缺一个就解析不了script setup langts。5.2 prettier 和 eslint 互相覆盖典型症状是保存后格式反复横跳。原因是 eslint 里开了和 prettier 冲突的规则比如indent、quotes、semi。解决办法是确保eslint-config-prettier生效或者在扁平配置里不要手动开这些规则。上面骨架里只保留prettier/prettier就是为了避免冲突。5.3 AI 补全内容保存后没被格式化检查editor.formatOnSave是否为 true以及对应语言的editor.defaultFormatter是否指向 prettier。如果 AI 插件有自己的格式化开关要把它关掉否则它会抢在 prettier 之前改一遍。统一交给 prettier 是唯一稳定的做法。5.4 config.toml 里 base_url 填错常见错误是把带查询参数的地址填进去或者漏了/api。正确写法是https://taotoken.net/api不带任何后缀。如果命令行工具报 401先确认环境变量TAOTOKEN_API_KEY是否真的注入到了当前 shell用echo $TAOTOKEN_API_KEY检查一下。5.5 lint 在 CI 上过不了但本地能过多半是format:check在 CI 上跑了但本地没跑。把pnpm run lint pnpm run format:check加进 CI 脚本本地提交前也跑一遍。另外注意.prettierignore和 eslint 的ignores要一致否则会出现「本地忽略、CI 不忽略」的差异。6. 把通道和规则一起收口回到最开始的问题AI 补全和格式化打架根因是链路分散。这篇的做法是先固定 AI 补全的出口再让 eslint 和 prettier 共用一套规则最后用 settings.json 把保存动作串起来。这样你换模型的时候只改 config.toml 或 settings.json 里的模型名规则层完全不用动。如果你还在从零搭 Vue3 工程建议先把第 2 步的 Key 和通道建好再往下配规则。通道稳定了后面所有配置都是一次性的。需要长期跑编码 agent 的话可以看下 Coding Plan 的额度方案 https://taotoken.net/coding-plan 按项目建 Key 的习惯也能在这里延续。接入过程中遇到报错优先查接入文档 https://taotoken.net/doc 大部分解析和鉴权问题里面都有对应说明。