reactjs - 是否有用于 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>"
     }
 }

见 Link+tab shortcut Emmet on VSCode - How can I get the "type" to be included in this?有关如何创建自定义 emmet 片段的更多详细信息 - 并在对它们进行更改时重新加载。
然后，就像常规代码段一样，您以前缀开头(我在这里做了 divx )，然后输入您的类(class)信息。

另一种方法是使用 Hyper Snips ，另一种形式的片段。
见 VSCode Advanced Custom Snippets有关设置该扩展的更多信息。
然后，在您的 javascriptreact.hsnips 文件中:

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

空格实际上充当触发器，您可以在 className 中拥有尽可能多的项目。如你所愿。演示: