visual-studio-code - Visual Studio Code (埃米特): Add closing tag comment

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 -->

幸运的是，这会将尾随注释放在换行符上。如果这是 Not Acceptable ，请参阅 remove line break before comment见 emmet comment filter用于修改 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,

为真。