WebStorm 通过 // region 和 // endregion（region 后必须跟空格）手动定义可折叠区域，支持嵌套、多语言通用；HTML 用 /；需检查编码、语言注入、插件冲突及版本兼容性。

怎么用注释手动定义可折叠区域

WebStorm 识别 // region 和 // endregion（注意：region 后必须跟空格）作为自定义折叠边界，这是最稳定、跨语言通用的方式。CSS、JS、TS、Python 甚至 HTML 都能用，只要语法高亮正常，折叠就生效。

• // region API handlers 和 // endregion 之间所有代码会被视为一个可折叠块
• 支持嵌套：在大 region 里再写小 region，折叠层级会自然对应
• 别写成 //region（紧贴）或 /*region*/（缺空格），WebStorm 会直接忽略——这是新手最高频的失效原因
• HTML 中可用 <!-- region --> / <!-- endregion -->，但注意某些模板引擎（如 Vue SFC 的 <style scoped></style>）可能因预处理干扰识别

哪些默认折叠项该关掉或打开

Settings → Editor → General → Code Folding 里的勾选项，直接影响你每天点多少次鼠标。不是“全开”或“全关”就好，得看项目类型。

• 勾选 Imports：对 Python/JS 项目极有用，尤其 node_modules 或长 import 列表；但 Go 项目不适用（没 import 块概念）
• 慎开 One-line methods：JS 里箭头函数 const fn = () => {} 会被折叠，但调试时容易漏看逻辑，建议关闭
• Documentation comments 建议开启：JSDoc / Python docstring 折叠后不占屏，展开才读，提升扫读效率
• 关闭 Literals（字符串/数组字面量）：大 JSON 或长正则一折就看不见内容，反而增加展开成本

折叠快捷键怎么用才不手忙脚乱

记住三组核心组合，覆盖 90% 场景，比记一堆 Ctrl+Shift+NumPad 更可靠。

• 折叠当前光标所在块：Ctrl + -（主键盘减号，非数字小键盘）
• 展开当前块：Ctrl + +（同位置加号）
• 一键收起整个文件：Ctrl + Shift + -；想快速恢复全展开？Ctrl + Shift + +
• 按住 Alt 再点折叠箭头（边栏那个 ⊖），会递归折叠子块——比如点一个类名，连带里面所有方法都收起来

插件和配置陷阱：为什么 region 不生效

写了 // region 却没箭头？大概率不是 WebStorm bug，而是环境或配置卡住了。

• 检查文件编码：UTF-8 with BOM 会导致注释解析失败，File → File Encoding → 确保是 UTF-8（无 BOM）
• 确认语言注入：如果在 JS 字符串里写 CSS，又手动注入了 CSS 语言，region 注释可能被底层语法分析器跳过
• 插件冲突：某些主题插件或 LSP 客户端（如 Vue Server）会劫持折叠逻辑，临时禁用插件测试是否恢复
• 版本差异：2025.3+ 版本开始支持 #region（Python 风格），但旧项目若用老版 WebStorm，只认 // region

真正麻烦的是混合场景：比如 Vue SFC 里 <script setup></script> 中的 TS 代码，region 要写在 script 标签内，不能写在顶层注释区——这种边界细节，不试一次根本想不到。