如何在VSCode中实现Ruby on Rails模板的代码背景高亮

在Rails开发里，ERB模板里的HTML和Ruby代码混写时，给嵌入式Ruby块加背景高亮能快速区分代码，要实现类似TextMate 2的效果，可试试下面两种方法：

方法一：用现成的扩展 #

直接安装支持ERB高亮的扩展，比如ERB Highlighter或者Ruby ERB，这类扩展大多自带嵌入式Ruby的背景高亮效果，安装启用后就能看到变化，部分扩展还支持自定义颜色。

方法二：自定义编辑器语法高亮规则 #

如果扩展效果不符合预期，可手动修改VS Code配置精准控制：

1. 打开VS Code设置（快捷键Ctrl+,/Cmd+,），点击右上角的「打开设置(JSON)」图标。
2. 在settings.json中添加以下配置：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "source.ruby.embedded.html",
      "settings": {
        "background": "#f5f5f5" // 可替换成你喜欢的颜色，比如TextMate的浅灰调
      }
    }
  ]
}

3. 要是想让<%/<%=这类标签标点也带上背景色，把scope改成数组形式：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        "source.ruby.embedded.html",
        "punctuation.section.embedded.ruby"
      ],
      "settings": {
        "background": "#f0f0f0"
      }
    }
  ]
}

小提示 #

如果不知道当前Ruby代码块的准确scope，可打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），运行Developer: Inspect Editor Tokens and Scopes，鼠标 hover 在Ruby代码上就能看到对应的scope，替换配置里的参数即可。

内容的提问来源于stack exchange，提问作者Siya