VS Code中HTML折叠需设"editor.foldingStrategy":"html"、语言模式为HTML、启用折叠控件；原生仅折叠含子内容的成对标签，强制折叠所有标签需扩展如Auto Fold或执行Fold All Regions。
HTML 编辑器里没有“代码缩略图”这个功能——这是个常见误解。你看到的所谓“缩略图”，其实是编辑器对 HTML 结构做的**折叠（folding）或大纲（outline）预览**，不是图像，也不生成图片文件。
VS Code 里怎么开启 HTML 折叠和结构预览
VS Code 默认支持 HTML 标签折叠，但需满足几个前提：
- 文件后缀必须是
.html或.htm，否则不加载 HTML 折叠逻辑 - 右下角语言模式必须是
HTML（不是Plain Text或Custom Language） -
"editor.foldingStrategy": "indentation"或"html"（推荐设为html，能识别语义标签层级） - 确保没禁用折叠：
"editor.showFoldingControls": "always"（默认是mouseover，悬停才显示）
设置方法：打开 settings.json，加入：
{
"[html]": {
"editor.foldingStrategy": "html",
"editor.showFoldingControls": "always"
}
}
之后就能在行号左侧看到 ▶ 符号，点击可折叠 <div>、<section> 等块级结构。
立即学习“前端免费学习笔记（深入）”；
WebStorm / PyCharm 中 HTML 大纲视图为什么不显示子元素
这不是缩略图失效，而是大纲（Structure Tool Window）默认只显示顶层标签。它不会递归展开所有嵌套层级，尤其遇到自闭合标签（如 <img>、<meta>）或模板语法（如 Vue 的 v-if）时会跳过。
- 进入
Settings > Editor > General > Code Folding，勾选HTML tags和XML/HTML comments - 在
Settings > Editor > Structure Views > HTML中，启用Show attributes和Expand all by default（仅调试时用，项目大了会卡） - 若用 Vue 单文件组件，必须把
<template>块的语言模式设为Vue.js template，否则 WebStorm 当作纯文本处理，不解析嵌套
为什么复制粘贴后折叠状态丢失、结构“变平”
折叠状态不保存在文件里，是编辑器基于当前代码结构实时计算的。粘贴时带入不可见字符（如 U+200B 零宽空格、不同编码的换行符），或缩进混用空格与 Tab，都会导致折叠引擎误判层级。
- 粘贴前先按
Ctrl + Shift + P→ 输入Format Document清理一次原始格式 - 禁用
"editor.detectIndentation": false，强制统一用空格缩进，避免混用 - 检查粘贴内容是否含
<pre>或<textarea>内嵌 HTML —— 这些区域里的缩进会被当作文本内容，不参与结构折叠
别被“缩略图”这个词带偏：它不生成图片，也不压缩代码
真正影响可读性的，从来不是有没有那个小箭头，而是缩进是否一致、标签是否闭合、嵌套是否清晰。编辑器的折叠功能只是辅助，不能替代写干净 HTML 的习惯。最容易被忽略的一点是：html.format.indentInnerHtml 默认为 false，这意味着 <head> 和 <body> 会顶到最左边——很多人以为“折叠没生效”，其实是格式化根本没给它们加缩进。设成 true 才符合直觉。
