vs code 中 html 标签的 class 属性被折叠显示为 `class="..."`，通常由“inline fold”等代码折叠扩展引起；卸载该扩展或调整折叠设置即可恢复完整类名显示。
在 Vue 项目开发中，你可能会突然发现原本清晰的 HTML 模板（如
）在编辑器中变成了
—— 所有 class 值被简化为省略号。这并非 Vue 本身的行为，也不是浏览器或编译器的输出，而是 VS Code 编辑器的视觉折叠（folding）功能所致。
根本原因通常是安装了第三方折叠扩展，例如广为人知的 Inline Fold。该扩展默认会将 HTML 标签中过长的属性（尤其是 class、style 等以空格分隔的字符串）自动折叠为 ...，以节省垂直空间，但严重干扰开发时的可读性与调试效率。
✅ 解决方案如下（推荐按顺序尝试）：
检查并卸载可疑扩展：
打开 VS Code 扩展面板（Ctrl+Shift+X / Cmd+Shift+X），搜索关键词 inline fold、auto fold、fold attribute，定位到类似名称的扩展（如 Auto Fold Statements、Inline Fold），禁用或直接卸载。重启编辑器后，class 属性将立即恢复正常显示。-
禁用内联折叠（无需卸载）：
若需保留该扩展的其他功能，可在设置中关闭 HTML 类折叠：- 打开设置（Ctrl+,），搜索 inline fold html class；
- 找到相关配置项（如 inlineFold.html.class.enabled），将其设为 false；
- 或在 settings.json 中添加：
"inlineFold.html.class.enabled": false
-
重置 VS Code 默认折叠行为（备用）：
若问题仍存在，可临时禁用所有折叠功能验证是否为其他扩展干扰："editor.folding": false, "editor.showFoldingControls": "never"
注意：此设置将关闭全部代码折叠（包括函数、标签块等），仅建议用于排查。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 此现象不会影响 Vue 编译、运行或最终生成的 HTML，纯属编辑器前端渲染行为；
- 不要误以为是 Vue DevTools、Volar 插件或 ESLint 规则导致——它们均不干预编辑器内的属性显示逻辑；
- 若使用 Prettier 或 Volar，确保其格式化配置未启用 htmlWhitespaceSensitivity: "ignore" 等可能间接影响显示的选项（但通常不影响折叠）。
总结：class="..." 是 VS Code 的“所见即所得”假象，根源在于折叠扩展。卸载 Inline Fold 类扩展是最直接、零风险的解决方案。保持编辑器轻量、可控，是高效 Vue 开发的重要基础。
