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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 查当前生效值：打开命令面板（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 字段）更稳妥

缩进问题从来不是“设个数字就完事”，而是编辑器、插件、语言服务、项目配置四层规则在打架。盯住右下角语言模式和状态栏格式化图标，比反复调配置更省时间。