★ FEATURED ARTICLE 1. 为什么保存自动格式化总在 Vue 项目里翻车Prettier 在 VSCode 里做保存自动格式化本身是个很朴素的需求写完代码按一下 CtrlS缩进、引号、分号、换行全部按团队约定归位。但真正落到 Vue 项目里事情会变得比想象中复杂。你搜prettier vscode 保存自动格式化这个关键词大概率是因为遇到了下面几种情况之一保存后代码没变化、保存后 HTML 标签被强行折行、.vue文件被两个插件抢着格式化、或者团队里每个人保存出来的结果都不一样。先说清楚 Prettier 是什么、能做什么、适合谁。Prettier 是一个「有主见的代码格式化器」它不负责找 bug也不负责检查变量有没有被使用它只做一件事把代码重新打印成统一风格。适合谁适合所有需要多人协作、需要 code review 时不被缩进和引号干扰的团队。VSCode 里的 Prettier 插件esbenp.prettier-vscode只是把 Prettier 引擎接进了编辑器真正决定格式化结果的是配置项的优先级顺序。Vue 项目特殊在哪一个.vue文件里同时有template、script、style三种语言块。Vetur 插件负责 Vue 语法高亮和模板格式化Prettier 负责 JS/CSS/HTML 的格式化。如果两个插件都声明自己可以格式化.vueVSCode 就会按editor.defaultFormatter来决定用谁。默认情况下谁最后注册、谁优先级高结果就是保存时行为不可预测。我试过在一个中型后台项目里五个人用同一份仓库但每个人保存后的 diff 都不一样。排查下来发现有人全局装了 Prettier有人只在项目里装了有人settings.json里写了editor.formatOnSave有人没写有人用 Vetur 格式化 template有人用 Prettier 格式化整个.vue。这就是典型的「配置项生效顺序」问题。所以这篇内容的目标很明确给你一份可以直接复制的settings.json配置片段把 Prettier VSCode 保存自动格式化在 Vue/Vetur 场景下跑通并且把配置项的优先级讲清楚。同时团队协作里除了代码风格要统一AI 辅助编码工具的接入通道也可以统一——后面会讲怎么用 TaoToken 的统一 Key 通道让团队里每个人接入 AI 编码工具时不用各自申请、各自配环境。2. TaoToken 统一 Key 通道的前置准备在讲配置之前先把这个「统一 Key 通道」的思路说清楚因为它和代码格式化的团队协作是同一个逻辑减少每个人本地环境的差异。团队里如果每个人都要用 AI 辅助编码工具比如在 VSCode 里做代码补全、让 AI 帮忙重构一段 Vue 组件传统做法是每个人自己去某个平台注册、拿 Key、填到插件里。问题是Key 散落在每个人本地额度没法统一管理新人入职要重新走一遍流程有人 Key 过期了还不知道。TaoToken 的做法是提供一个统一的 API 通道团队用一个 Key 就能接入多种模型能力Base URL 和 Key 都由团队统一维护。你需要先拿到这个统一 Key。打开 TaoToken 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册后在控制台里创建 API Key。控制台地址是https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleAPI Key 管理页面是https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keys。创建好之后你会得到一个以sk-开头的字符串这就是后面要填到各种工具里的 Key。这里要强调一个概念TaoToken 提供的是 API 通道不是编辑器替代品。它不会帮你写代码它只是让你本地的 AI 编码工具比如 Cline、Continue、Claude Code 这类能通过一个统一的 Base URL 和 Key 去请求模型。Base URL 是https://taotoken.net/api注意这个地址后面不加任何 UTM 参数直接写就行。为什么要在 Prettier 这篇文章里讲这个因为团队协作里「统一」这件事是相通的。代码风格统一靠 Prettier 配置AI 工具接入统一靠 TaoToken 通道。你可以在项目根目录放一份.prettierrc同时也可以在团队文档里放一份「AI 工具接入说明」里面写清楚 Base URL、Key 从哪里拿、Model ID 填什么。新人入职时代码格式化和 AI 工具接入两件事一起搞定。如果你只是个人用不涉及团队那这一步可以简化拿到 Key记住 Base URL 是https://taotoken.net/api后面配置 AI 编码工具时用得上。如果你要验证模型是否可用可以打开模型对话页面https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chat直接试一句。长期做编码和 Agent 任务的话可以了解 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan。前置准备就这些一个 Key、一个 Base URL、一个明确的目标——让团队里每个人的 VSCode 保存行为一致同时 AI 工具接入也一致。3. 可复制的 settings.json 与 prettier.config.js 配置这一节是核心直接给可复制的配置片段。先明确文件路径VSCode 的用户级配置在settings.jsonWindows 下一般是%APPDATA%\Code\User\settings.jsonmacOS 下是~/Library/Application Support/Code/User/settings.json。项目级配置放在项目根目录的.vscode/settings.json这个会覆盖用户级配置团队协作推荐用项目级。先装插件。在 VSCode 扩展面板搜索Prettier - Code formatter作者是esbenp安装。Vue 项目再装Vetur作者是octref。装完之后不要急着写配置先理解优先级项目级.vscode/settings.json 用户级settings.json 插件默认值。下面这份是项目级.vscode/settings.json可以直接复制{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, [vue]: { editor.defaultFormatter: octref.vetur }, [html]: { editor.defaultFormatter: esbenp.prettier-vscode }, [css]: { editor.defaultFormatter: esbenp.prettier-vscode }, [less]: { editor.defaultFormatter: esbenp.prettier-vscode }, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, prettier.printWidth: 100, prettier.tabWidth: 2, prettier.useTabs: false, prettier.semi: true, prettier.singleQuote: true, prettier.trailingComma: es5, prettier.bracketSpacing: true, prettier.arrowParens: avoid, prettier.endOfLine: auto, prettier.htmlWhitespaceSensitivity: ignore, prettier.ignorePath: .prettierignore, prettier.disableLanguages: [vue], vetur.format.defaultFormatter.html: js-beautify-html, vetur.format.defaultFormatterOptions: { js-beautify-html: { wrap_attributes: auto, wrap_line_length: 0 } } }这份配置里几个关键点要解释。editor.formatOnSave是总开关设为true后保存才触发格式化。editor.defaultFormatter设成 Prettier意味着默认所有文件都用 Prettier 格式化。但[vue]这一项把 Vue 文件的默认格式化器改成了 Vetur因为 Vetur 对 Vue 模板的语法支持更好。prettier.disableLanguages里加上vue是防止 Prettier 去抢 Vue 文件的格式化权双重保险。vetur.format.defaultFormatter.html设为js-beautify-html这是 Vetur 内部用来格式化 template 的引擎。wrap_attributes设为auto意思是 HTML 属性在超过printWidth时才换行不会每个属性都单独一行。wrap_line_length设为 0表示不强制按行长度折行。这两个参数就是解决「保存后 HTML 标签被强行折行、无法折叠」的关键。接下来是项目根目录的prettier.config.js这个文件让命令行和编辑器共用同一套规则module.exports { printWidth: 100, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: es5, bracketSpacing: true, arrowParens: avoid, endOfLine: auto, htmlWhitespaceSensitivity: ignore, };然后在package.json里加一条脚本方便批量格式化{ scripts: { format: prettier --write \src/**/*.{js,ts,vue,css,less,json}\ } }运行npm run format就会按prettier.config.js的规则格式化src下所有匹配文件。注意编辑器里的 Prettier 插件默认会优先读项目根目录的prettier.config.js如果没找到才用 VSCode 的settings.json里的prettier.*配置。所以团队协作时把规则写在prettier.config.js里更可靠因为命令行和编辑器都会读它。如果你用的是 Cline 或 Continue 这类 AI 编码插件它们的配置里通常需要填 Base URL、API Key、Model ID 三件套。Base URL 填https://taotoken.net/apiAPI Key 填你在 TaoToken 控制台创建的那个sk-开头的字符串Model ID 按你实际要用的模型填。这三件套在 Cline 的 MCP 配置、Codex 的auth.json、Claude Code 的配置里都是同样的逻辑只是字段名不同。4. 验证保存触发格式化与配置项生效顺序配置写完了怎么验证它真的生效不要靠感觉按下面几步走。第一步新建一个测试文件test.vue故意写乱template div classboxspanhello/spanspanworld/span/div /template script export default{data(){return{msg:hi}}} /script第二步按 CtrlS 保存。如果配置生效script里的代码会被格式化成export default { data() { return { msg: hi, }; }, };注意这里的分号、缩进、尾逗号都是prettier.config.js里定义的。如果保存后没变化先检查右下角状态栏有没有 Prettier 的图标点一下看它有没有报错。第三步验证配置项生效顺序。在项目根目录的prettier.config.js里把singleQuote改成false然后在 VSCode 的settings.json里把prettier.singleQuote设成true。保存一个 JS 文件看结果是单引号还是双引号。如果结果是双引号说明prettier.config.js优先级更高如果结果是单引号说明settings.json优先级更高。实测下来Prettier 插件会优先读项目配置文件所以团队协作时以prettier.config.js为准。第四步验证 Vetur 对 Vue 模板的接管。在test.vue的 template 里写一个属性很多的标签template div classa idb>{ recommendations: [ esbenp.prettier-vscode, octref.vetur ] }这样新人打开项目就会看到安装提示减少「为什么我保存没反应」这类问题。配置项备注这件事最好的备注就是可执行的配置文件和一份简短的 README而不是散落在聊天记录里的截图。
阅读完成 · 觉得有帮助？
