Prettier 默认不处理HTML文件，需在配置中显式支持并设置htmlWhitespaceSensitivity: "css"，同时确保VS Code语言模式为HTML、files.associations正确，且html.format.indentSize等编辑器专属设置未覆盖Prettier配置。
VS Code 里 prettier 不缩进 HTML 怎么办
不是配置没生效，大概率是 prettier 根本没接管 HTML 文件。它默认只处理 .js.jsx.ts.tsx，HTML 需要显式声明支持。
- 在
.prettierrc或package.json的prettier字段里加"htmlWhitespaceSensitivity": "css"（否则缩进可能被误判为“多余空格”而删掉） - 确认
settings.json有："files.associations": {"*.html": "html"}，且没被其他插件（比如emeraldwalk.runonsave）覆盖格式化命令 - 检查右下角状态栏：点击语言模式（如 “HTML”），确认没意外变成 “Plain Text” 或 “Custom Language”
WebStorm 自动缩进 HTML 时标签错位
常见于自闭合标签（<img><br>）或模板语法（v-if{{ }}）混用时，IDE 把换行当内容处理，导致缩进层级错乱。
- 进
Settings > Editor > Code Style > HTML，勾选"Keep line breaks"和"Wrap attributes"，避免强行压成一行破坏结构 - 如果用 Vue，把
Template语言模式设为Vue.js template而非纯 HTML，否则指令会被当普通文本缩进 - 禁用
Reformat on paste（尤其粘贴从浏览器复制的代码），这类代码自带不可见缩进字符，会干扰重排逻辑
indentSize 设了 2 还是 4 个空格
HTML 缩进最终由编辑器“语言专属设置”覆盖全局 prettier 配置。比如 VS Code 中 html.format.indentSize 优先级高于 prettier.tabWidth。
- 查当前生效值：打开命令面板（
Ctrl+Shift+P），搜Preferences: Open Settings (JSON)，找带html.format.前缀的项 - 若用 Prettier + ESLint 组合，确保
eslint-config-prettier已禁用所有格式化规则，否则 ESLint 会二次修改缩进 - 注意
html.format.wrapLineLength过小（如设为 0）会导致自动折行，看起来像缩进异常
Vue/React 项目里 <template> 或 jsx 缩进不一致
根本原因是模板解析器和 JSX 解析器对嵌套层级的理解不同——Vue 单文件组件中 <template> 是独立语言块，而 React 的 JSX 是 JS 语法糖，缩进逻辑天然不统一。
立即学习“前端免费学习笔记（深入）”；
- Vue 项目：在
vue.config.js或volar.config.json中配"html.format.indentInnerHtml": true，否则子元素不会继承父级缩进 - React 项目：确保
eslint-plugin-react的jsx-indent规则开启，且tabWidth与 Prettier 一致，否则 ESLint 修复时会覆盖格式化结果 - 混合项目（如 Vue + JSX）：避免用同一份
.prettierrc管理全部文件，按后缀拆分配置（overrides字段）更稳妥
缩进问题从来不是“设个数字就完事”，而是编辑器、插件、语言服务、项目配置四层规则在打架。盯住右下角语言模式和状态栏格式化图标，比反复调配置更省时间。
