VSCode配置Haml/Slim模板语法代码高亮与格式化指南【详细】-VSCode-PHP中文网

haml和slim模板在vscode中需手动设置语言模式并安装专用prettier插件才能正常高亮、缩进和格式化；否则会因识别为plain text或html导致缩进错乱、tab失效及格式化塌陷。

vscode配置haml/slim模板语法代码高亮与格式化指南【详细】

Haml 和 Slim 模板在 VSCode 中默认无高亮、缩进错乱、Tab 展开失效——根本原因不是插件没装，而是语言模式未识别 + Prettier 默认不兼容这两类缩进敏感语法。

确认 .haml/.slim 文件被识别为对应语言模式

VSCode 不会自动把 .haml 或 .slim 文件当 Haml/Slim 处理。右下角显示 “Plain Text” 或 “HTML” 就说明卡在这一步。

打开任意 .haml 文件，点击右下角语言标签 → 输入 haml → 选中 “Haml”（注意不是 “HTML” 或 “Ruby”）
同理，.slim 文件要手动设为 “Slim”，不是 “HTML” 或 “Plain Text”
永久绑定：按 Ctrl+, 打开设置 → 搜索 files.associations → 在 settings.json 中添加：
```
"*.haml": "haml",
"*.slim": "slim"
```
重启 VSCode 或执行 Developer: Reload Window

安装并启用 Haml/Slim 专用格式化插件

Prettier 默认不支持 Haml/Slim；强行用它格式化会导致缩进塌陷、%div 变成平铺、甚至删掉换行——因为 Haml 依赖空格层级表达嵌套，而 Prettier 把它当 HTML 重排。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

Haml 必装：prettier-plugin-haml（不是 prettier-plugin-ham，少一个 l 会报错）：
npm install --save-dev prettier-plugin-haml
Slim 推荐：prettier-plugin-slim（需项目级安装，全局无效）：
npm install --save-dev prettier-plugin-slim
确保 prettier 本身已安装（v3.0+），且 VSCode 已装 esbenp.prettier-vscode 插件
验证是否生效：在 .haml 文件中写一段缩进结构，保存后观察是否保持层级而非压成一行

避免缩进错乱与格式化失效的配置要点

即使插件装了，仍可能格式化失败或缩进跳变——问题常出在配置覆盖、缩进值冲突或语言服务未加载。

禁用 Ruby 插件的自动格式化：某些 Ruby 扩展（如 rebornix.ruby）自带格式器，会和 Prettier 抢控 .haml 文件，建议关闭：
"ruby.format.enable": false

明确设置 Haml/Slim 的默认 formatter：

"[haml]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[slim]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

不要设 editor.detectIndentation: true —— Haml/Slim 对缩进极其敏感，VSCode 自动探测常误判为 2 空格，而项目实际用 4 空格，导致展开/缩进错位
检查 prettier.tabWidth 是否与团队约定一致（Haml 社区多用 2，Slim 常见 2 或 4），不一致时缩进视觉混乱

Snippets 补全与常见错误排查

Haml layout 片段（如 layout + Tab）需要手动注册，否则只高亮不补全；而拼错 %h1 写成 %h2 这类错误，不会报错，但渲染结果异常。

在 settings.json 中添加自定义 snippet（以 Haml layout 为例）：

"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"
}

输入 layout 后按 Tab，若未展开，检查：snippet scope 是否为 haml（不是 ruby）、文件语言模式是否为 Haml
常见报错：Error: Cannot find module 'prettier-plugin-haml' → 检查是否在项目根目录安装，且 prettier 配置中启用了该插件：
```
"prettier.plugins": ["prettier-plugin-haml"]
```
Slime 格式化后属性挤成一行？确认 prettier-plugin-slim 支持你用的 Slim 版本（v4.0+ 推荐）