如何通过快捷键自动在HTML块首尾添加注释

一、修改Emmet配置实现自定义包裹 #

Emmet并非只能添加底部注释，自定义配置就能实现首尾注释效果：

1. 按Ctrl+,打开设置，搜索Emmet: Extensions Path，指定一个本地文件夹（比如.vscode/emmet）
2. 在该文件夹下创建snippets.json，粘贴以下代码：

{
  "html": {
    "snippets": {
      "cw": "<!-- ${1:BlockName}: Start -->\n${0}\n<!-- ${1:BlockName}: End -->"
    }
  }
}

3. 重启VS Code，选中需要处理的HTML块，按Ctrl+Shift+P打开命令面板，搜索Emmet: Wrap with Abbreviation，输入cw回车，再输入块名（比如Profile），就能生成你需要的首尾注释结构。

二、创建自定义代码片段并绑定快捷键 #

直接做一个专属代码片段，绑定快捷键后操作更高效：

1. 按Ctrl+Shift+P，输入Configure User Snippets，选择html.json
2. 添加以下代码片段：

"Wrap HTML with Start/End Comments": {
  "prefix": "commentBlock",
  "body": [
    "<!-- ${1:BlockName}: Start -->",
    "$TM_SELECTED_TEXT",
    "<!-- ${1:BlockName}: End -->"
  ],
  "description": "给选中的HTML块添加首尾注释"
}

3. 按Ctrl+K Ctrl+S打开快捷键设置，搜索editor.action.insertSnippet，点击添加快捷键，设置你习惯的快捷键（比如Alt+Shift+C），并在args中填入{"name": "Wrap HTML with Start/End Comments"}。之后选中HTML块按下快捷键，输入块名即可完成注释添加。

三、用现成扩展简化操作 #

嫌手动配置麻烦的话，直接安装Comment Wrap扩展：

• 安装完成后，选中HTML块，右键点击Comment Wrap -> Custom，输入块名就能生成首尾注释；还可以在扩展设置里自定义注释模板，自行绑定快捷键。

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