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 标签内，不能写在顶层注释区——这种边界细节，不试一次根本想不到。
