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 中注释的文件管理器。

并将其放入您的 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如果你在输入你的类名后得到建议，你可能需要点击。]

要使用选项卡完成，请在您的设置中更改：

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

为真。