inline fold 插件对 class/classname 折叠失效的根本原因是 vscode 未正确识别语言模式或 inlinefold.languages 配置未生效,需确保 language 值为 "html" 或 "javascriptreact"、配置后重启文件、右下角语言模式匹配,并避免插件冲突。

Inline Fold 插件为什么对 class/className 折叠失效
根本原因不是插件坏了,而是 VSCode 没把当前文件识别成对应语言模式,或者 inlineFold.languages 配置没生效。
常见现象:装完插件后 HTML 里 class 不折叠,JSX 中 className 也不动——十有八九是语言绑定没配对。
-
inlineFold.languages必须是数组,且每个对象含"language"和"attribute"字段;"language"值必须严格匹配 VSCode 内部标识名:"html"、"javascriptreact"(不是"jsx"或"typescriptreact") - 改完
settings.json后,必须关闭再重新打开 .html 或 .tsx 文件——热重载不触发规则重载 - 右下角状态栏语言模式必须显示
JavaScript React(.tsx 文件),不是TypeScript;点它 → “Configure File Association for '.tsx'” → 手动设为JavaScript React - 禁用可能冲突的插件,比如某些 Tailwind CSS 插件会劫持
className解析逻辑,导致 Inline Fold 无法介入
怎么让折叠后的 class 显示 tw:… 而不是 …
默认占位符是省略号,看不出是 Tailwind 类,可读性差。靠 inlineFold.rules 自定义正则匹配 + 占位符替换即可。
- 在
settings.json中添加inlineFold.rules数组(若无则新建) - 写一条规则:
"pattern": "(bg-|text-|p-|m-|flex|grid|w-|h-|rounded|shadow|border)",覆盖常见 Tailwind 前缀 - 设
"placeholder": "tw:…",折叠后直接显示语义化提示 - 加
"maxVisible": 2可限制只显示前两个匹配类名,避免占位符过长
折叠后光标一动就自动展开?这是正常行为
Inline Fold 是纯视图层渲染压缩,不修改 AST,也不改变代码结构。所有折叠都是临时的、只影响显示。
- 光标进入折叠区域时,VSCode 会自动展开——这是设计使然,保证编辑安全,避免误操作隐藏代码
- 这不是 bug,也无需修复;它和原生折叠(
Ctrl+Shift+[)机制完全不同:后者是语法树级控制,前者只是 DOM 渲染层遮罩 - 如果你需要“持久折叠”,请用原生
#region标记或editor.foldingStrategy: "indentation",而不是依赖 Inline Fold
要不要用 Inline Fold 替代原生折叠功能
不要。它俩解决的是完全不同的问题。
- Inline Fold 只处理
class/className属性值里的长字符串,其他任何结构(函数、if 块、JSX 标签嵌套)它都不碰 - 原生折叠由语言服务驱动,支持函数、类、注释块等完整语法结构,快捷键
Ctrl+Shift+[和命令面板都依赖它 - 两者可共存,但不能互相替代;混用时注意别装多个折叠类插件(如 Auto Fold、Fold Plus),它们容易覆盖 attribute 绑定逻辑
真正容易被忽略的点是:折叠效果是否生效,第一眼要盯住右下角语言模式和 settings.json 里那几个 key 的拼写与层级——错一个字符,整个规则就静默失效。











