shift + alt + f 无响应主因是语言模式不匹配或缺失对应格式化器；vue 2 用 vetur 需改 html 格式化器为 js-beautify-html，vue 3 用 volar 应配 prettier.config.js；editor.formatonsave 与 eslint 冲突需分工明确；html.format.* 仅对内置格式化器生效。
Shift + Alt + F 按下没反应？先看语言模式和格式化器
VS Code 的 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（macOS）是原生快捷键，不依赖插件就能调用「格式化文档」命令，但它**不会自己决定用谁来格式化**。常见无响应现象，90% 是因为右下角状态栏显示的是 Plain Text 或 HTML 但没装/启用对应格式化器。
实操建议：
- 点右下角语言模式（如显示“Plain Text”），手动选成
HTML - 确保已安装并启用至少一个 HTML 格式化扩展：推荐
esbenp.prettier-vscode（现代项目）或内置vscode.html-language-features（轻量老项目） - 如果同时装了多个（比如 Prettier + js-beautify-html + Vetur），VS Code 可能无法自动选，默认 fallback 为“无可用格式化程序”——此时需手动指定默认格式化器
Vue 单文件组件里 <template></template> 格式错乱？别乱配 Vetur
Vue 2 项目常用 Vetur，它把 <template></template> 块默认交给 prettier 处理，但 Prettier 对含 Vue 指令（如 v-if、@click）的 HTML 支持有限，结果就是按 Shift + Alt + F 后标签全挤在一行，或属性换行崩掉。
解决方式取决于你用的 Vue 版本：
- Vue 2 + Vetur：打开设置，搜索
vetur.format.defaultFormatter.html，把值从prettier改成js-beautify-html，然后执行Developer: Reload Window - Vue 3 + Volar（官方推荐）：Volar 不读 Vetur 配置，直接走 Prettier；此时应配
prettier.config.js，并在其中启用htmlWhitespaceSensitivity: "ignore"避免空格误删 - 千万别在 Vue 3 项目里还去改 Vetur 的选项——它根本不起作用，纯属干扰
editor.formatOnSave 开了却越保存越乱？规则打架是主因
开启 "editor.formatOnSave": true 很方便，但若同时开了 ESLint 自动修复（"editor.codeActionsOnSave": { "source.fixAll.eslint": true }），就容易出现保存一次、缩进变 4 空格、分号又加又删、样式和逻辑规则互相覆盖的情况。
关键不是关哪个，而是明确分工：
- Prettier 负责：缩进、换行、引号、空格等纯视觉排版
- ESLint 负责：
no-unused-vars、eqeqeq、vue/multi-word-component-names等语义与规范检查 - 在
.prettierrc中显式关掉和 ESLint 冲突的项：{"semi": false, "singleQuote": false}，让 ESLint 全权控制 - 项目级配置优先写进
.vscode/settings.json，而不是用户全局设置，避免协作时每人格式不同
html.format.* 配置项只对内置格式化器生效
VS Code 内置的 HTML 格式化能力（vscode.html-language-features）支持一堆 html.format.xxx 设置，比如 html.format.wrapLineLength、html.format.indentInnerHtml。但这些配置**对 Prettier 完全无效**——Prettier 只认 .prettierrc 或 prettier.config.js。
所以如果你用了 Prettier，却在 settings.json 里狂调 html.format.wrapAttributes，会发现一点变化都没有。
实操判断法：
- 看右下角语言模式旁有没有「灯泡图标」→ 点开它，选「Configure Default Formatter for '.html'」→ 如果选的是
esbenp.prettier-vscode，那所有html.format.*都被忽略 - 想精细控制 HTML 属性换行，得去
.prettierrc加"htmlWhitespaceSensitivity": "css"或用prettier-plugin-html - 真正容易被忽略的点：同一项目里混用多种格式化器（比如 .html 用内置，.vue 用 Volar，.ts 用 ESLint），会导致相同语法在不同文件里格式不一致——这不是 bug，是配置没对齐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
