VS Code 是否有 JSX emmet 在 { } 中包围 className 而不是引号

Question

给出 emmet 缩写：

div.layoutStyles.container

有没有办法生产：

<div className={layoutStyles.container}></div>

代替<div className="layoutStyles container"></div>

Answer 1

您可以制作自定义 emmet 片段，但工作流程与常规片段相同 - 尽管了解这项技术也很好。在 snippets.json 中：

{
  "html": {
    "snippets": {
      "divx" : "<div className = {$1}>$2</div>"
     }
 }

请参阅VSCode 上的 Link+tab 快捷方式 Emmet - 如何将“类型”包含在其中？有关如何创建自定义 emmet 片段的更多详细信息 - 以及在对它们进行更改时重新加载。

然后，就像常规片段一样，您从前缀（这里是我制作的divx）开始，然后输入您的班级信息。

另一种方法是使用Hyper Snips，这是另一种形式的片段。

有关设置该扩展的更多信息，请参阅VSCode 高级自定义片段。

然后，在您的 javascriptreact.hsnips 文件中：

snippet `div\.([^ ]+) ` "expand to jsx className" A
<div className={``rv=m[1]``}>$1</div>
endsnippet

空间实际上充当触发器，您可以在其中放置任意数量的物品className。演示：