Visual Studio代码（Emmet）：添加结束标签注释

Question

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

的东西

.wrapper

进入这个

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

我相信在 Sublime Text 和 Webstorm 中有如何做到这一点的解决方案，所以很高兴知道是否也有 Visual Studio 代码。谢谢！

Answer 1

你知道你可以将 |c 添加到你的 .wrapper 的末尾以获得在末尾添加的评论，如：

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

不幸的是，这会将尾随评论放在换行符上。如果这是不可接受的，请参阅 remove line break before comment and see emmet comment filter 修改文件管理器以获取 vscode 中的评论。

并将其放入您的 settings.json:

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

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

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

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

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

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

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

为真。

Answer 2

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

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

Visual Studio代码（Emmet）：添加结束标签注释

Visual Studio Code (Emmet): Add closing tag comment

visual-studio-code

emmet