Sublime Text 原生不支持 JSX 折叠，需安装 ReactJS 或 JSX 插件并切换语法为 React JSX；折叠仅在起始行（如 <div、function、return (）生效，手动选区折叠最可靠。
React JSX 语法默认不支持折叠，得靠插件补规则
Sublime Text 原生 JavaScript 语法（JavaScript）只认 {、function、if 这类传统结构，对 JSX 中的 <div>、{() => <Comp />}、组件返回体这些**完全不识别为可折叠块**。你按 Ctrl+Shift+[ 没反应，不是快捷键错了，是语法层压根没定义折叠起点。
必须装插件才能让 JSX 标签、组件函数体、props 对象等变成可折叠区域。实测最稳的是 ReactJS（by ryanmcgrath）或 JSX（by sublimehq 官方维护），二者都重写了 .sublime-syntax 文件，加了 foldingStartMarker 规则匹配 <、=> 后的 {、return ( 等模式。
- 装完插件后，右下角状态栏必须手动切到
React JSX或JavaScript (JSX)，不能留着默认的JavaScript - 重启 Sublime 或用
Ctrl+Shift+P→Set Syntax: React JSX强制切换 - 验证是否生效：光标停在
function MyComponent() {行，左侧 gutter 出现 ▶；停在<div className="...">行也应有图标
光标必须落在 JSX 开始行，否则 Ctrl+Shift+[ 无效
折叠快捷键只响应「最内层可折叠结构的起始行」——不是选中就折，也不是任意位置触发。React 场景下常见失效点：
- 光标在
</div>或闭合标签上 → 不会折，起点必须是<div、<Button这类开始标签行 - 光标在组件函数体内部（比如某行
console.log()）→ 折的是整个函数，不是当前 JSX 块 - 光标在多行 props 的中间行（如
disabled={true}）→ 不响应，得移到<button那行首 - 箭头函数组件：光标要停在
const Comp = () => {或return (行，而不是<div>行（除非插件明确支持该层级）
不确定作用域是否命中？按 Ctrl+Shift+P → 输入 Developer: Show Scope Name，看状态栏是否含 meta.tag（标签）、meta.jsx（JSX 区域）或 meta.function（组件函数）。
手动折叠 JSX 片段最可靠，且不依赖插件
插件没装好、语法切换失败、或者只想临时收起一段 render() 内容时，直接选中 + 手动折叠是唯一 100% 可控的方式：
- 鼠标拖选从
<div到对应</div>的所有行（含空行） - 按
Ctrl+Shift+Alt+[（Windows/Linux）或Cmd+Ctrl+Option+[（macOS） - 折叠后侧边栏出现独立三角图标，点击即可展开，不影响其他自动折叠块
- 该操作不写入文件，关闭文件即消失，但当前会话内始终有效
注意：不要用 Ctrl+Shift+[ 替代 —— 它只对语法定义的结构生效，手动选区必须用带 Alt/Option 的组合键。
fold_by_level 对 React 组件层级控制有限，慎用
Sublime 的 fold_by_level 命令按作用域嵌套深度折叠，但 React 场景下它认的是语法定义里写的 meta.function、meta.block 层级，不是“组件一层、JSX 一层、props 一层”这种语义分层。
- 在
React JSX语法下，Ctrl+K, Ctrl+1通常只折顶层组件声明（function App()、const Home =），不会动内部 JSX -
Ctrl+K, Ctrl+2可能折到return () => { ... }块，但若组件用return <div>...单行写法，就毫无效果 - 装饰器（
@memo）、Hook 调用（useEffect(() => {}, [])）会干扰层级判断，导致该折的没折、不该折的被收走
真正需要精细控制 JSX 折叠粒度时，别指望 fold_by_level，老实用插件 + 手动选区，或直接在代码里加 // <!-- fold --> 和 // <!-- end fold --> 标记（需插件 Fold Comments 支持）。
