Visual Studio Code (Emmet)：添加结束标记注释答案

【问题标题】：Visual Studio Code (Emmet): Add closing tag commentVisual Studio Code (Emmet)：添加结束标记注释
【发布时间】：2018-10-23 11:35:26
【问题描述】：

所以我希望 Visual Studio Code（在 Emmet 的帮助下）能够转换类似的东西

.wrapper

进入这个

<div class="wrapper"></div><!-- /.wrapper -->

我相信在 Sublime Text 和 Webstorm 中有解决方案，因此很高兴知道是否也有适用于 Visual Studio Code 的解决方案。谢谢！

【问题讨论】：

标签： visual-studio-code emmet

【解决方案1】：

您知道，您只需在 .wrapper 末尾添加 |c 即可在末尾添加评论，例如：

<div class="wrapper"></div>
<!-- /.wrapper -->

幸运的是，这会将尾随注释放在换行符上。如果这是不可接受的，请参阅 remove line break before comment 并参阅 emmet comment filter 以修改 vscode 中 cmets 的文件管理器。

并将其放入您的 settings.json 中：

"emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
}

我刚刚从示例评论过滤器中删除了换行符 \n。

或者，可以使用 sn-p（在您的 html.json sn-ps 文件中）轻松完成：

"emmet with comment": {
    "prefix": ".",
    "body": [
        "<div class='$1'>$2</div><!-- /.$1 -->"
    ],
    "description": "expand with comment"
}

然后输入 . 并点击 tab 并输入你的类名，它将进入两个 $1。 Tab 再次到达 $2 光标位置。 [如果你在输入你的类名后得到建议，你可能需要点击 escape。]

要使用制表符补全，请在您的设置中进行更改：

  // When enabled, Emmet abbreviations are expanded when pressing TAB.
 "emmet.triggerExpansionOnTab": false,

为真。

【讨论】：

太棒了！非常感谢！
"emmet with comment": { "prefix": ".", "body": [ "<div class='$1'>$2</div>" ], "description": "expand with comment" } 似乎不再起作用了
嗯，我刚刚尝试了 sn-p，仍然有效。确保您在建议框中选择了正确的 sn-p。

【解决方案2】：

要让 Emmet 添加 cmets 并将它们与结束标记保持在同一行，请将以下内容添加到 Visual Studio Code 中的用户设置文件中，然后重新启动 VSC。

 "emmet.preferences":{
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
  },
  "emmet.syntaxProfiles": {
  // Enable XHTML dialect for HTML syntax
  // “html”: “xhtml”
    "html" : {
      "filters" :"html, c"
      }
  },

【讨论】：