Inline Fold 插件可折叠 html/jsX 中冗长的 Tailwind class 类名以提升可读性；需安装插件、配置 language 绑定（html/class 和 javascriptreact/className）、自定义规则（如 tw:… 占位符），并支持手动切换折叠。
如果您在使用 vscode 编写前端代码时，发现 HTML 或 JSX 文件中 Tailwind css 类名过长、密集且干扰代码结构阅读，则可能是由于类名未被视觉压缩。Inline Fold 插件可将连续的 class 属性值折叠为简洁的占位符，提升代码可读性。以下是启用和配置该插件的具体操作步骤：
本文运行环境：macBook Air，macOS Sequoia。
一、安装 Inline Fold 插件
Inline Fold 是一个轻量级 VSCode 扩展，专为折叠内联属性（如 class、className）中的长字符串设计，不修改实际代码，仅改变编辑器显示效果。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Ctrl+Shift+X）。
2、在扩展搜索框中输入 Inline Fold。
3、在搜索结果中找到作者为 aaron-bond 的扩展，确认名称为 Inline Fold。
4、点击“安装”按钮，等待安装完成并重启 VSCode（若提示需要）。
二、启用对 class 和 className 的折叠支持
默认情况下，Inline Fold 不自动折叠 class 属性，需手动配置语言绑定规则，指定在哪些文件类型及属性中启用折叠。
1、按下 Cmd+,（macos）打开设置界面，切换到“设置”标签页。
2、在搜索框中输入 inline fold languages。
3、点击“在 settings.json 中编辑”，在 json 文件中添加如下配置项：
4、在 “inlineFold.languages” 数组中插入对象：{“language”: “html“, “Attribute”: “class”} 和 {“language”: “javascriptreact“, “attribute”: “className”}。
5、保存文件，重新打开一个 HTML 或 JSX 文件以使配置生效。
三、自定义折叠显示样式
Inline Fold 允许调整折叠后占位符的文本内容与外观，便于快速识别被折叠的是 Tailwind 类名而非其他属性值。
1、在 settings.json 中定位到 “inlineFold.rules” 配置项（若不存在则新建）。
2、添加一条规则，匹配 class 属性中包含 bg-、text-、p- 等典型 Tailwind 前缀的值。
3、设置 “placeholder” 为 “tw:…”，确保折叠标识具有语义区分度。
4、可选：设置 “maxVisible” 为 3，限制最多显示三个类名片段，超出部分统一折叠。
四、手动触发折叠与展开
Inline Fold 支持通过命令面板或快捷键控制折叠行为，适用于调试或临时查看原始类名的场景。
1、将光标置于含 class 或 className 属性的行内任意位置。
2、按下 Cmd+Shift+P 打开命令面板，输入 Inline Fold: Toggle 并回车。
3、当前属性值将立即折叠为占位符；再次执行同一命令即可恢复完整显示。
4、如需全局切换所有已匹配属性，可在命令面板中选择 Inline Fold: Toggle All。