VSCode 默认不格式化 Vue 文件的 <template> 块，需同时配置语言关联、[vue] 格式化器、本地 prettier 依赖及 .prettierrc；关键参数为 "trailingComma": "es5" 和 "bracketSameLine": false。
VSCode 本身不自动对齐 Vue 文件的 <template> 或 <script> 块——必须显式配置 Prettier 对 vue 语言的支持，否则右下角显示 “Vue” 但按 Shift+Alt+F 仍无反应。
为什么 .vue 文件里只有 script 被格式化，template 不动
这是最常见的错配现象：Prettier 插件默认只绑定到 javascript、typescript 等语言 ID，而 Vue 文件的 <template> 块依赖 vue 语言模式才能触发 HTML/JSX 风格的对齐规则。
- 检查右下角状态栏：打开
.vue文件后，必须显示 “Vue”，不是 “HTML” 或 “Plain Text”；如果不是，点击它 → Configure File Association for '.vue' → 选Vue - 在
settings.json中补全语言专属配置："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 确保项目已安装
prettier（非仅插件）：npm install --save-dev prettier；否则控制台报Failed to load module 'prettier' -
<style>块若用scss，还需额外配"[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
template 属性换行对齐失败？关键看 trailingComma 和 bracketSameLine
Prettier 默认把 <el-button size="small" type="primary" @click="submit"> 压成单行，根本不会对齐。要让它变成竖排，得靠两个配置协同生效：
-
"trailingComma": "es5"—— 必须启用，否则 Prettier 认为“没必要多行”，直接跳过对齐逻辑 -
"bracketSameLine": false—— Vue/JSX 场景下强制将>换行，为属性对齐腾出空间 -
"printWidth": 80—— 设太大会导致属性始终塞在一行；设太小又可能把简单标签也拆开 - 注意：
bracketSameLine: true（Prettier 2.8+ 默认）会让<div class="...">的>紧贴属性，彻底破坏对齐前提
保存时 template 仍没对齐？检查 formatOnSave 是否真生效
开启 editor.formatOnSave 不等于全局生效——它只对当前语言 ID 绑定的格式化器起作用，且会被工作区设置覆盖。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 右键编辑器 → Format Document With → 确认弹出菜单里有
esbenp.prettier-vscode，而不是Default Formatter - 在项目根目录
.vscode/settings.json中硬编码三项："editor.formatOnSave": true、"editor.defaultFormatter": "esbenp.prettier-vscode"、"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 禁用其他冲突格式化器：比如
Vue VSCode Snippets或Vetur若启用了内置格式化，会和 Prettier 抢控权，导致保存后来回跳 - 验证是否加载了项目级配置：在根目录放
.prettierrc，内容至少含"semi": true, "singleQuote": true, "trailingComma": "es5"；没有它，Prettier 用极简默认值，对齐能力归零
手动对齐某几行 template 标签？别用 Shift+Alt+F
快捷键格式化是整文件或整选区行为，对局部 <div> 块内属性无效——Prettier 不支持“部分属性对齐”。此时该用列编辑，但仅限临时整理：
- Windows/Linux：按住
Alt+ 鼠标左键拖选，拉出竖向光标列 → 输入空格或=批量对齐 - macOS：按住
Option+ 拖选，或Ctrl+Shift+P→ 输入Toggle Column Selection - ⚠️ 列编辑不识别语法：它会把
class="a"和@click="b"的等号当成纯字符处理，一旦保存触发 Prettier，结果立刻被还原 - 真正稳定的做法是写完就保存，靠
.prettierrc+formatOnSave驱动统一对齐，而不是靠人眼调位置
最易被忽略的是：Prettier 对 vue 的支持不是“装了就通吃”，它严格依赖语言 ID、本地依赖、项目配置三者同时在线；少一个，<template> 就永远静默——哪怕你看到右下角写着 “Vue”。
