如何配置VS Code实现.erb文件中Ruby/HTML混合代码块智能注释

默认情况下，VS Code对ERB（嵌入Ruby的HTML）文件的块注释逻辑不完善：选中混合Ruby和HTML的代码块按Cmd + /时，只会给第一行Ruby标签添加注释，无法同时处理所有Ruby段和HTML标签。

示例对比 #

现有代码：

<% if !something %>
        <div>
          <%= link_to "Link", some_path, class: "link" %>
        </div>
      <% end %>

当前默认注释结果：

<%# <% if !something %>
        <div>
          <%= link_to "Link", some_path, class: "link" %>
        </div>
      <% end %> %>

期望实现的注释效果（和RubyMine一致）：

<%# if !something %>
<!--        <div>-->
          <%#= link_to "Link", some_path, class: "link" %>
<!--        </div>-->
      <%# end %>

配置步骤 #

1. 自定义快捷键实现一键注释 #

打开命令面板（Cmd + Shift + P），输入并选择Preferences: Open Keyboard Shortcuts (JSON)，打开keybindings.json文件，添加以下配置：

{
  "key": "cmd+/",
  "command": "editor.action.insertSnippet",
  "when": "editorLangId == erb && editorHasSelection",
  "args": {
    "snippet": "${TM_SELECTED_TEXT/(^\\s*)(<%=?)(.*?)(%>)/$1<%#$2$3%>/g}${TM_SELECTED_TEXT/(^\\s*)(<[^%].*?>)/$1<!--$2-->/g}"
  }
}

这段配置会对选中的文本执行两次正则替换：

• 匹配所有<%/<%=开头的Ruby代码段，在<%后插入#
• 匹配所有非Ruby标签的HTML元素，用<!-- -->包裹

2. 进阶：用宏确保替换顺序（可选） #

如果单次替换出现冲突，可以借助Multi Command扩展拆分操作：

1. 安装Multi Command扩展
2. 打开settings.json（命令面板选择Preferences: Open Settings (JSON)），添加宏定义：

"multiCommand.commands": [
  {
    "command": "multiComment.erb",
    "sequence": [
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "${TM_SELECTED_TEXT/(^\\s*)(<%=?)(.*?)(%>)/$1<%#$2$3%>/g}"
        }
      },
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "${TM_SELECTED_TEXT/(^\\s*)(<[^%].*?>)/$1<!--$2-->/g}"
        }
      }
    ]
  }
]

3. 回到keybindings.json，替换原有配置为宏绑定：

{
  "key": "cmd+/",
  "command": "multiComment.erb",
  "when": "editorLangId == erb && editorHasSelection"
}

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