webstorm 默认不折叠 vue sfc 的 、、 块，需手动开启 settings > editor > general > code folding 中的 xml tag contents；region 注释须独占一行且带空格， 中的顶层声明需包裹在函数内才可折叠。
Vue SFC里和<script>默认不折叠？得手动开</script>
WebStorm 默认不折叠 Vue 单文件组件（SFC）的 <template></template>、<script></script> 或 <style></style> 块，哪怕它们语法完整、缩进清晰。这不是 bug，是默认策略——它只把每个标签当普通 XML 节点处理，不主动识别为可折叠单元。
解决方法很简单：打开 Settings > Editor > General > Code Folding，勾选 XML tag contents。这会启用对所有 XML/HTML 标签内容的折叠支持，覆盖 <template></template> 和 <script></script>（含 setup 语法糖）。
-
<style scoped></style>区块内慎用/* region */：预处理器（如 Sass）可能提前解析注释，导致 WebStorm 拿不到原始文本，建议改用<!-- region -->（仅限 HTML 部分）或直接靠标签折叠 - 如果用了
<script setup></script>，确保 TypeScript 插件已加载——类型推导失败时，defineProps或defineEmits的返回类型可能无法折叠 -
<template></template>内嵌套过深（比如 4 层v-if+v-for）时，折叠后箭头显示 “12 lines”，但光标停在该行按Ctrl + Shift + .才能逐层展开，不是点一下就全开
// region 在 Vue 文件里怎么写才生效
Vue 文件支持三类 region 注释，但生效条件比 JS 更严格：必须独占一行、region 后带空格、且不能跨语言区块混用。
推荐写法：
-
<script></script>块内用// region API logic+// endregion（JS/TS 通用） -
<template></template>块内用<!-- region User List -->+<!-- endregion -->（HTML 兼容） -
<style></style>块内避免/* region */；改用<!-- region Base Styles -->并把样式写在<style></style>标签外侧（不推荐）或直接依赖标签折叠
常见失效原因：//region（没空格）、// region:（冒号结尾）、// region 后紧跟代码（没换行）——WebStorm 全部忽略。
