1. 为什么 Vue2.x 项目还需要一套“标准化流水线”Vue2.x 虽然已经进入维护阶段但大量存量项目、外包交付项目、企业内部后台系统仍然跑在 Vue2.x Vue CLI Element UI 这套组合上。我最近接手的一个后台管理项目就是典型场景三个人协作有人用双引号有人用单引号有人提交前不跑 lint有人本地格式化把整个文件重排一遍Git diff 里全是格式噪音真正改动的业务逻辑反而被淹没。更麻烦的是团队开始用 Cline 这类 AI 编码助手后AI 生成的代码风格和项目规范不一致保存时 ESLint 报一堆错改完又被 Prettier 覆盖回去来回拉扯。所以这篇要解决的不是“Vue2.x 怎么入门”而是从零搭一套能长期跑下去的标准化工程骨架Vue CLI 创建项目、ESLint 与 Prettier 协同不打架、VSCode 插件选型、以及把 TaoToken 作为统一 AI 工具接入通道写进 Cline 的 settings.json。目标是让你一次性跑通规范检查和 AI 辅助编码而不是每次新建项目都重新踩一遍配置坑。适合谁看正在维护或新建 Vue2.x 项目的开发者、需要给团队定规范的负责人、以及想让 AI 编码助手遵守项目 lint 规则的人。下面所有配置片段都可以直接复制我会标注每一步的验证动作。2. 前置准备TaoToken 统一 Key 与 API 通道在讲 Vue 项目创建之前先把 AI 工具接入这条线理清楚因为后面 Cline 的 settings.json 要用到。TaoToken 在这里扮演的角色是统一 AI 工具接入通道你不需要在每个 AI 插件里分别填不同厂商的 Key而是用一套 Key 和统一的 API 地址让 Cline、模型对话等工具都走同一个入口。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基础地址是 https://taotoken.net/api 。操作路径很直接先到控制台创建 API Key然后按文档把 Key 写进对应工具的配置。控制台入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite API Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。如果你只是想先验证模型能不能通可以用模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 发一条消息测试如果是长期编码和 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 。注意Key 属于敏感凭证不要提交到 Git 仓库。建议放在系统环境变量或本地未跟踪的配置文件里团队共享时用各自的 Key。这一步做完你手里应该有一个可用的 API Key 和 API 基础地址后面第 5 节写 Cline 配置时会直接引用。3. 用 Vue CLI 创建标准化 Vue2.x 项目3.1 创建命令与手动选择特性全局安装 Vue CLI 后执行创建命令npm install -g vue/cli vue create vue2-standard-demo执行后会进入交互式问答。选择“Manually select features”然后按下面的选项走? Check the features needed for your project: (*) Babel (*) Router (*) Linter / Formatter ( ) Vuex ( ) CSS Pre-processors ( ) Unit Testing ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? No ? Pick a linter / formatter config: ESLint Standard config ? Pick additional lint features: (*) Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? Yes几个关键点解释一下。选 Router 是因为 Vue CLI 创建的是 SPA前端路由基本是刚需选完会自动生成src/router/index.js并把路由器实例挂到 vm 上。路由模式选 hash即不选 history是因为 history 模式需要服务端配合重写本地和简单部署场景下 hash 更省事。Linter 选 Standard是因为它的规则相对克制不像 Airbnb 那样激进团队接受度高。选“Lint on save”让保存即检查选“In dedicated config files”会把配置拆到独立文件方便后续手动调整。保存为预设后下次vue create第一步就能直接选到这个预设不用再走一遍问答。3.2 创建后的目录结构确认创建完成后项目根目录应该能看到.eslintrc.js、babel.config.js、package.json等文件。src下会有router/index.js、views、components、App.vue、main.js。先跑一次确认项目能起来cd vue2-standard-demo npm run serve浏览器打开http://localhost:8080看到默认页面就说明基础工程没问题。这一步别跳过后面所有配置都建立在这个能跑的项目上。3.3 用 vue ui 安装 Element UI按需引入如果你需要 Element UI可以用vue ui图形界面安装也可以直接命令行。图形界面方式vue ui浏览器会自动打开 Vue 项目管理界面导入刚才创建的项目然后在“插件”里搜索element安装vue-cli-plugin-element选择“按需引入”。安装后会自动生成src/plugins/element.js你可以在里面按需注册组件。命令行方式等价于vue add element按需引入的好处是打包体积小但要注意babel.config.js里会多出对应的按需加载配置别手动删掉。4. ESLint 与 Prettier 协同配置让两者不打架4.1 ESLint 在项目里的两个触发时机ESLint 是语法检查加代码风格检查工具。比如你定义了一个未使用的变量语法检查会报错两行代码之间空了很多无用空行风格检查会报错。它适合多人协作保证不同开发者产出一致风格的代码。在 Vue CLI 创建的项目里ESLint 有两个触发时机。一是编译或打包时npm run serve和npm run build会自动触发 ESLint 按vue/eslint-config-standard规则审查代码。二是开发过程中靠 VSCode 的 ESLint 插件实时检查保存文件时自动修复。新版 ESLint 插件默认在保存时执行检查并自动修复一般不需要额外改 settings。4.2 Prettier 与 ESLint 的冲突根源Prettier 是代码格式化工具负责把杂乱的代码变成清晰风格。问题在于Prettier 格式化 JS 的默认原则是使用双引号、使用拖尾逗号、使用分号而 ESLint Standard 规则恰恰不允许这些。更关键的是Prettier 作为专业格式化插件优先级比 ESLint 的错误修复更高于是 ESLint 刚修完Prettier 一保存又覆盖回去形成死循环。解决方案不是禁用其中一个而是让 Prettier 的规则适配 ESLint。在项目根目录创建.prettierrc.jsPrettier 会优先读取这个文件module.exports { printWidth: 120, tabWidth: 2, useTabs: false, semi: false, singleQuote: true, quoteProps: as-needed, jsxSingleQuote: false, trailingComma: none, bracketSpacing: true, jsxBracketSameLine: false, htmlWhitespaceSensitivity: css, arrowParens: avoid, endOfLine: auto }重点看三个和 ESLint Standard 对齐的项semi: false不使用分号singleQuote: true使用单引号trailingComma: none不使用拖尾逗号。这样 Prettier 格式化后的结果就不会和 ESLint 规则冲突。4.3 把 Prettier 设为默认格式化程序光有配置文件还不够要让 VSCode 在保存时用 Prettier 格式化。按CtrlShiftP打开命令面板选择“Format Document With”再选“Configure Default Formatter”把 Prettier 设为默认。之后保存代码就会触发 Prettier 格式化。如果你希望保存时先 ESLint 修复再 Prettier 格式化可以在项目根目录建.vscode/settings.json{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: true }, eslint.validate: [ javascript, vue ] }这个顺序下保存时 ESLint 先修语法和风格问题Prettier 再做格式化两者规则已经对齐不会互相覆盖。4.4 验证配置是否生效写一段故意违规的代码来验证// src/utils/test.js const unusedVar double quote and semicolon; export function demo( ) { return 1; }保存后观察双引号应变成单引号分号应消失未使用变量应被 ESLint 标红多余空格应被格式化。如果没反应检查 ESLint 插件是否启用、.prettierrc.js是否在根目录、VSCode 默认格式化程序是否设为 Prettier。5. 在 Cline 的 settings.json 中写入 TaoToken 统一通道5.1 找到 Cline 配置文件位置Cline 的配置通常放在 VSCode 的用户设置或工作区设置里。打开命令面板搜索“Preferences: Open User Settings (JSON)”或者直接编辑工作区下的.vscode/settings.json。我建议放在工作区设置里这样项目级配置跟着仓库走团队其他人拉下来就能用Key 用环境变量引用不硬编码。5.2 写入 API 通道骨架下面是一个可复制的配置骨架把 API 基础地址指向 TaoTokenKey 从环境变量读取{ cline.apiProvider: openai-compatible, cline.apiBaseUrl: https://taotoken.net/api, cline.apiKey: ${env:TAOTOKEN_API_KEY}, cline.model: your-preferred-model, editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: true } }然后在系统环境变量里设置TAOTOKEN_API_KEY为你从控制台创建的 Key。这样配置文件和 Key 分离提交代码不会泄露凭证。模型名称按你实际使用的填具体可用模型以文档为准。5.3 让 AI 生成的代码遵守项目规范配置好之后Cline 生成的代码会走 TaoToken 通道。但 AI 不一定知道你的 ESLint 规则所以要在项目根目录放一个.clinerules或类似的项目说明文件把关键约束写进去本项目使用 Vue2.x ESLint Standard Prettier。 - JS 使用单引号不使用分号不使用拖尾逗号 - 缩进 2 空格行宽 120 - Vue 组件使用 Vetur 支持的写法 - 新增文件放在 src 对应目录下这样 AI 生成代码时会更贴近项目风格减少保存后大量报错的情况。实测下来加了规则说明后AI 生成代码的 lint 通过率明显提升。6. 本篇常见错排查6.1 ESLint 报错但保存不自动修复先确认 VSCode 装了 ESLint 插件并启用。然后检查.vscode/settings.json里editor.codeActionsOnSave是否包含source.fixAll.eslint。如果项目用的是旧版 ESLint 插件可能需要把值写成true而不是对象形式。另外确认eslint.validate里包含vue否则.vue文件不会被检查。6.2 Prettier 格式化后 ESLint 又报错这是典型的规则冲突。检查.prettierrc.js是否存在且被 Prettier 读取。可以在 VSCode 输出面板选择 Prettier 查看它实际用的配置文件路径。如果 Prettier 没读到项目配置可能是文件位置不对或格式有语法错误。确认semi、singleQuote、trailingComma三项和 ESLint Standard 对齐。6.3 Cline 请求失败或 401先确认TAOTOKEN_API_KEY环境变量在当前终端和 VSCode 进程里都能读到。VSCode 有时需要重启才能加载新环境变量。然后确认apiBaseUrl写的是https://taotoken.net/api不要多加斜杠或路径。如果还是 401去控制台重新生成一个 Key 试试。模型名称填错也可能导致请求失败以文档里的模型列表为准。6.4 vue create 时选错选项想重来直接删掉项目目录重新vue create最省事。如果只是配置想调整可以手动改.eslintrc.js和package.json但容易漏。建议第一次就把预设保存好后面新建项目直接选预设避免重复问答出错。6.5 保存时格式化整个文件导致 diff 爆炸这是因为项目里存在大量未格式化的历史文件一保存就被 Prettier 全量重排。解决办法是先用npx prettier --write src/**/*.{js,vue}做一次全量格式化并单独提交之后增量修改就不会有大 diff 了。团队协作时这一步要提前沟通避免和别人正在改的文件冲突。7. 接入与验证入口配置写完后建议按这个顺序验证一遍先用模型对话页面发一条消息确认 Key 和通道正常地址是 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 然后在 Cline 里让它生成一个简单的 Vue 组件保存后看 ESLint 和 Prettier 是否按预期工作如果要做长期编码和 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 Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。最后留一个我踩过的坑.prettierrc.js里endOfLine设成auto在 Windows 和 Mac 混合团队里偶尔会导致换行符 diff如果团队统一用 LF可以改成lf。这个细节不影响功能但能减少无意义的 Git 变更。