Visual Studio Code (Emmet):添加结束标记注释

Question

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

.wrapper

进入这个

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

我相信在Sublime Text和Webstorm中有一些解决方案可以做到这一点，所以很高兴知道Visual Studio Code是否也有一个。 谢谢！

Answer 1

你知道你可以把|c添加到你的 .wrapper 的末尾，在末尾添加一条注释，如下所示：

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

不幸的是，这会将尾随注释放在换行符上。 如果这是不可接受的，请参阅删除注释前的换行符，并参阅 emmet 注释筛选器以修改 vscode 中注释的文件管理器。

并将其放入您的设置.json中：

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

我刚刚从示例注释过滤器中删除了换行符 。

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

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

然后键入.并点击选项卡并输入您的类名，它将进入两个 $1。再次按 Tab 键以转到 $2 光标位置。 [如果您在键入类名后收到建议，则可能需要按esc键。

要使用选项卡补全功能，请在设置中更改此设置：

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

到真。

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"
}
},