VS Code 和 WebStorm 折叠 HTML 标签需启用语法级折叠策略：VS Code 设置 foldingStrategy 为 syntax 并确认语言模式为 HTML；WebStorm 需勾选 XML tag contents 和 Inline elements，且光标须位于标签起始/结束符内。
VS Code、WebStorm 这类编辑器默认不折叠单层 HTML 标签（比如 <p>Hello</p> 或空 <div></div>），必须显式启用语法级折叠策略，否则 Ctrl + Shift + [ 按了也没反应。
VS Code 折叠 HTML 标签必须开 syntax 模式
它默认用缩进（indent）判断折叠区域，但对 HTML 效果差——<div> 和 <p> 缩进相同却语义不同，编辑器无法区分。改用语法识别才能按标签对折叠。
- 右下角确认语言模式是
HTML（不是Plain Text） - 设置里搜
foldingStrategy，设为syntax - 重启文件或整个编辑器，
Ctrl + Shift + [才会对<div>、<section>等成对标签生效 - 注意：纯文本内联标签（如单行
<p>ok</p>）仍不折叠——这是设计行为，不是 bug
WebStorm 要勾选 Inline elements 才折小标签
它默认只折“有内容结构”的块级标签，<p>、<span> 这类短标签得手动开开关，否则快捷键 Ctrl + . 无效。
- 进入
Settings > Editor > General > Code Folding - 勾选
XML tag contents（HTML 折叠依赖这个） - 额外勾选
Inline elements，否则<em>、<small>级别标签不会被识别为可折叠节点 -
Ctrl + .只在光标落在标签起始/结束符内部时触发，停在class="foo"|属性里没用
想一键收起所有 HTML 结构？别信 Fold All
Ctrl + Shift + -（Fold All）会把注释、JS 函数、CSS 块全折掉，不单是 HTML。真要只折标签，得先清理折叠项配置。
立即学习“前端免费学习笔记（深入）”；
- 去
Code Folding设置页，取消勾选Comments、Methods、Imports等无关项 - 只留
XML tag contents（VS Code 对应syntax策略） - 批量操作更稳的方式：把光标放进
<body>，再按Ctrl + Shift + [，它会递归折掉该作用域下所有支持的标签 - WebStorm 中按住
Alt点左侧 ⊖ 图标，可一次性折掉当前标签及其全部子标签
折叠功能是否生效，根本不在代码写得对不对，而在于编辑器有没有把这段 HTML 当作「可解析的结构」来对待——语言模式错、策略没切、标签没闭合，三者任一出问题，折叠标记就消失。检查状态栏和设置页比重写代码更管用。
