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

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

并将其放入您的settings.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＆＃39; s。再次 Tab 到达$ 2游标位置。 [如果在输入类名后得到建议，可能需要点击 escape 。]

要使用标签页，请在您的设置中进行更改：

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

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

2 个答案: