如何通过Emmet在Visual Studio Code中生成带闭合标签注释的代码？

当然可以实现！VS Code的Emmet功能支持自定义配置，完全能满足你想要的——输入.wrapper就生成<div class="wrapper"></div><!-- /.wrapper -->格式代码的需求，下面给你两种实用的实现方法：

方法一：自定义HTML用户代码片段 #

这种方法直接在VS Code的用户代码片段里配置，简单直观：

• 打开命令面板：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Configure User Snippets并回车
• 在弹出的选项中选择html.json（针对HTML文件生效）
• 在打开的JSON文件中，添加以下代码：

"Wrapper div with closing comment": {
  "prefix": ".",
  "body": [
    "<div class=\"$1\"></div><!-- /.$1 -->",
    "$0"
  ],
  "description": "生成带类名和闭合注释的div"
}

配置说明：

• prefix设为.，这样你输入.wrapper时会触发这个片段
• $1会自动捕获你输入的类名（比如wrapper），并同步到注释里
• $0是最终光标停留的位置，方便你后续编辑

方法二：自定义Emmet全局扩展配置 #

这种方法更灵活，能让Emmet原生识别你的自定义规则：

• 打开VS Code设置：按下Ctrl+,（Windows/Linux）或Cmd+,（Mac），搜索Emmet: Config
• 点击Edit in settings.json，添加以下配置项：

"emmet.extensionsPath": "~/emmet-custom"

• 在你的用户目录下创建emmet-custom文件夹，里面新建snippets.json文件，写入：

{
  "html": {
    "snippets": {
      ".": "<div class=\"${1}\"></div><!-- /.${1} -->"
    }
  }
}

完成后重启VS Code，在HTML文件里输入.wrapper并按下Tab键，就能生成你想要的带注释代码了。

如果遇到默认Emmet规则和自定义规则冲突的情况，你可以调整自定义配置里的prefix（比如改成div.），或者在设置里调整Emmet的优先级。

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