inline fold 不折叠 class/classname 是因未配置 inlinefold.languages 数组绑定 html/class 和 javascriptreact/classname,且文件语言模式必须精确匹配;tailwind 类可借 inlinefold.rules 自定义 placeholder 为 tw:…;光标进入即展开属设计使然,多插件共存易冲突。

Inline Fold 插件不折叠 class/className 的常见原因
装完 Inline Fold 后 class 或 className 依然展开,不是插件没生效,而是它压根没被触发——VSCode 默认对所有属性都不折叠,必须显式声明语言和属性绑定。
关键检查点:
-
inlineFold.languages必须是数组,且包含{"language": "html", "attribute": "class"}和{"language": "javascriptreact", "attribute": "className"} - 语言标识名必须精确:
javascriptreact≠typescriptreact,html≠htmlembedded - 改完配置后,**必须重新打开一个 .html 或 .tsx 文件**;热重载不刷新 inline fold 规则
- 右下角状态栏语言模式必须显示
HTML或JavaScript React,若显示TypeScript,需手动点击切换
如何让 Tailwind 类名折叠后显示 tw:… 而不是 …
默认占位符 … 缺乏语义,尤其在大量使用 Tailwind 的项目中容易误判。靠 inlineFold.rules 可精准匹配并定制提示文本。
实操建议:
- 在
settings.json中添加inlineFold.rules数组(若无则新建) - 写一条规则:
"pattern": "(bg-|text-|p-|m-|flex|grid|w-|h-|rounded|shadow|border)" - 配
"placeholder": "tw:…",一眼识别是 Tailwind 折叠 - 加
"maxVisible": 2限制只显示前两个类名,避免占位符过长干扰对齐
折叠后光标一动就自动展开?这不是 bug 是设计
Inline Fold 的折叠是纯视图层渲染,不改变 AST 或 DOM 结构。只要光标进入折叠区域、或执行编辑操作(哪怕只是按方向键),VSCode 就会强制展开该行——这是为了防止误操作和保持编辑一致性。
这意味着:
- 它无法像原生折叠那样“保持收起状态”供长期浏览
- 不能用于替代
// #region这类结构化折叠 - 适合高频编辑场景下的临时视觉降噪,不适合文档化归档
折叠策略冲突:为什么同时装了 Auto Fold 就不工作
多个折叠类插件共存时,常因注册顺序或属性劫持逻辑冲突,导致 inlineFold.languages 绑定失效。
排查路径:
- 禁用所有其他折叠插件(如 Auto Fold、Fold Plus、Region Folder)
- 重启 VSCode,仅保留 Inline Fold 测试
- 确认
inlineFold.languages配置未被其他扩展的 settings.json 片段覆盖 - 某些 Tailwind 扩展(如 Tailwind CSS IntelliSense)会拦截
className解析,临时禁用可验证是否为其干扰
最易被忽略的一点:Inline Fold 对文件类型极其敏感——.tsx 文件若被识别为 TypeScript 而非 JavaScript React,className 绑定就完全失效,且不会报错、不会警告,只会静默跳过。











