Visual Studio Code（Emmet）：添加闭合标签注释

Question

所以我希望借助Emmet，Visual Studio Code可以将类似以下代码进行转换：

.wrapper

转化为这样

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

我相信Sublime Text和Webstorm都有解决这个问题的方案，因此如果Visual Studio Code也有一个方案的话，那就太好了。

谢谢！

- grimreaper

Answer 1

你知道只需在.wrapper的末尾添加|c即可在末尾添加注释，例如：

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

不幸的是，这会在新行上放置尾注释。如果不能接受，请参见移除注释前的换行符并查看emmet注释过滤器以修改vscode中注释过滤器。

并将此添加到您的settings.json中：

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

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

或者，您可以使用代码片段（在您的 html.json 代码片段文件中）轻松完成：

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

然后输入 . 并按下 tab 键，然后输入您的类名，它将进入$1。再次按 Tab 键以到达$2光标位置。[如果在输入类名后出现建议，则可能需要按 escape ]。

要使用Tab自动完成，请在设置中更改此设置：

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

变为true。

- Mark

---

太棒了！非常感谢！ - grimreaper

"emmet with comment": { "prefix": ".", "body": [ "<div class='$1'>$2</div><!-- /.$1 -->" ], "description": "expand with comment" } 似乎不再起作用。 - scottrod

嗯，我刚刚尝试了这段代码片段，仍然有效。确保您在建议框中选择了正确的代码片段。 - Mark

Answer 2

若想让Emmet添加注释并将其与结束标记保持在同一行，需在Visual Studio Code的用户设置文件中添加以下内容，然后重新启动VSC。

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

- Ali Asghar