VSCode需手动配置才能正确识别.haml文件：安装Ruby扩展并设置文件关联为Haml语言模式；Haml代码片段须单独定义且scope设为"haml"；格式化应启用prettier-plugin-haml或使用VSCode内置缩进修复，并确保仅用空格缩进。
VSCode 默认不识别 .haml 文件，直接打开会丢失语法高亮、缩进、代码片段和 Emmet 支持——这不是 Haml 本身的问题，而是 VSCode 没被告诉“这是什么语言”。必须手动关联文件扩展名并启用对应语言功能，否则写 Haml 和写纯文本没区别。
如何让 VSCode 正确识别 .haml 文件
VSCode 不自带 Haml 语言支持，需通过扩展或手动配置语言模式。最稳妥的方式是安装 Ruby 扩展（由 rebornix 提供），它内置了对 .haml 的基础语法识别；若已安装但无效，说明语言模式未激活：
- 打开任意
app/views/layouts/application.html.haml类文件 - 点击右下角显示的语言标签（如 “Plain Text”）
- 在弹出菜单中选择
Haml（不是 Ruby 或 HTML） - 勾选 “Configure file association for '.haml'” → 设为
haml
此后所有 .haml 后缀文件都会自动使用 Haml 语言模式，缩进校验、注释快捷键（Ctrl+/）等才真正生效。
haml 代码片段无法触发？检查 html.json 是否误配
很多人照搬 HTML 片段配置（比如用 "prefix": "html"），结果在 .haml 文件里输 html 回车，出来的却是完整 HTML5 模板——这反而破坏 Haml 语义。Haml 片段必须单独定义，且语言作用域要限定为 haml：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 打开命令面板（
Cmd+Shift+P），输入 “Preferences: Configure User Snippets” - 选择 “New Global Snippets file…”，命名为
haml.json - 填入如下最小可用片段（注意
"scope": "haml"）：
{
"Haml basic layout": {
"scope": "haml",
"prefix": "layout",
"body": [
"%html",
" %head",
" %title= content_for?(:title) ? yield(:title) : 'My App'",
" %body",
" = yield"
],
"description": "Basic Haml layout structure"
}
}
保存后，在 .haml 文件中输入 layout + Tab 即可展开——HTML 片段不会污染 Haml 编辑环境。
缩进错乱、格式化失效？别用 Prettier 默认配置
Haml 依赖严格空格缩进，而 Prettier 默认按 2 空格处理 HTML，但它对 .haml 文件默认不启用。若强行启用，可能把 %div 错排成无嵌套结构，甚至删掉关键换行。真实问题往往出在两个地方：
- Prettier 插件未安装
prettier-plugin-haml：运行npm install --save-dev prettier-plugin-haml，并在项目根目录.prettierrc中显式启用 - VSCode 设置中
editor.formatOnSave对haml语言未开启：需在设置 JSON 中添加："[haml]": {"editor.formatOnSave": true} - 更轻量的替代方案是禁用 Prettier，改用 VSCode 内置缩进修复：选中文本 →
Shift+Alt+F→ 确保右下角语言模式是haml，此时它会按 Haml 规则重排（而非 HTML 规则）
最容易被忽略的一点：Haml 的缩进必须是空格，不能混用 Tab。VSCode 的 editor.insertSpaces 和 editor.detectIndentation 必须设为 true，否则协作时别人用 Tab 缩进，你用空格，Git diff 会疯狂报错，而 VSCode 不会主动提醒——它只按当前文件首行缩进类型做推断，一旦开头错了，后面全错。
