VSC中的EMMET功能在编辑设置后不起作用

Question

我是VSC环境的新手，我首次使用了flutter开发环境。来自原始的基本文本 编辑器，我爱上了随附的所有精美功能，例如关闭标签和自动建筑标签。

例如，

我可以输入

之类的东西

.test|c

它将扩展到

<div class="test">
</div><!--test-->

这非常有用。我一直是Web开发人员很长时间了，并且已经建立了相当大的全栈ReactJS应用程序，但从未使用过任何帮助，我看到了它的绝对价值。

尝试在Visual Studio(Mac OS(中模仿这些设置时，我做了以下操作：

代码 ->首选项 ->设置。

在工作场所设置下，我从emmet文档创建了此片段：

"emmet.preferences":{
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
  },
"emmet.syntaxProfiles": {
    "html" : {
        "filters" :"bem"
    }
},

但是，a，无效。我注意到Emmet不会注意到.test|c，因为它没有自动生成。

有什么建议怎么了？

Answer 1

尝试将其添加到您的设置。

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

从咖啡因创作中学到了这一点

Answer 2

几点：

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

正如您的正确。

---

现在，至于syntaxProfiles条目，这取决于您计划使用comment filter。

用作.wrapper|c(明确使用|c(：

"emmet.syntaxProfiles": {
    "html" : {
      "filters" :"html"  // put any other filters here as `"html, bem"`
     }
},

用作.wrapper(隐式使用|c(：

"emmet.syntaxProfiles": {
    "html" : {
      "filters" :"html c"  // put any other filters here as `"html, bem, c"`
     }
},

使用该最后一个版本，将添加评论到所有标签中，可能不是您想要的。请参阅emmet：隐式过滤电话。

---

如果您希望div s被新线分开，请执行此操作：

"emmet.preferences": {
   "format.forceIndentationForTags": ["script", "div"],
   "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
 },

现在div(和script(标签将显示为：

<div class="test">
  |
</div><!--test-->

---

最后，看来您根本没有看到Emmet功能。请参阅其他文件类型中的启用emmet：

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

我不确定您使用的是哪种Filetype，但您可能需要将其映射到javascriptreact或html，例如上述示例代码。