vs code 中 html 标签的 class 属性被折叠显示为 `class="..."`，通常由“inline fold”等代码折叠扩展引起；卸载该扩展或调整折叠设置即可恢复完整类名显示。
在使用 Vue.js 开发时，你可能会发现 HTML 模板中（如
）的 class 属性在编辑器中被简写为 class="..." —— 这并非 Vue 本身的行为，也不是浏览器或 Vue 编译器导致的视觉效果，而是 VS Code 编辑器的代码折叠（folding）功能在起作用。
最常见诱因是第三方扩展，例如广为人知的 Inline Fold。该扩展会自动将长属性值（尤其是空格分隔的多个 class 名）折叠为省略号，以节省垂直空间。虽然初衷是提升可读性，但在 Vue 单文件组件（.vue）的 区域中，这种折叠反而干扰开发体验，导致无法快速识别实际应用了哪些 CSS 类。
✅ 解决方法（推荐顺序）：
- 检查并禁用可疑扩展：打开 VS Code 扩展面板（Ctrl+Shift+X / Cmd+Shift+X），搜索关键词 inline fold、fold attribute 或 html fold，定位到 Inline Fold 或类似名称的扩展，点击「禁用」或「卸载」；
- 重启 VS Code：确保更改生效；
- 验证效果：打开任意 .vue 或 .html 文件，观察 class 属性是否已恢复为完整字符串（如 class="btn btn-primary is-loading"）。
⚠️ 其他可能原因与补充方案：
立即学习“前端免费学习笔记（深入）”；
- 若未安装 Inline Fold，检查是否启用了 VS Code 内置的 html.suggest.html5 或自定义 foldingStrategy 设置；可在设置中搜索 folding，将 "html.foldingStrategy" 设为 "auto" 或 "indentation"（避免 "syntax" 引发误折叠）；
- 部分主题或语言模式插件也可能影响语法高亮/折叠逻辑，可尝试切换为默认 Dark+ 主题 + 默认 HTML 语言模式排除干扰。
? 小贴士：
VS Code 的折叠区域可通过行号左侧的 ▶ / ▼ 图标手动展开/收起，但 class="..." 这类自动折叠属于“语法级折叠”，不受手动控制——因此根源仍在扩展或语言配置。保持编辑器轻量化（仅启用必需扩展）是预防此类问题的最佳实践。
卸载 Inline Fold 后，你的 Vue 模板将清晰呈现所有 class 值，大幅提升样式调试与协作可读性。
