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

Question

给定一个 emmet 缩写：

div.layoutStyles.container

有没有办法制作：

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

而不是<div className="layoutStyles container"></div>

Answer 1

您可以使用 Replace Rules 和键盘快捷键

添加到您的 settings.json（全局或工作区）

  "replacerules.rules": {
    "class-brace": {
      "find": ["(?<= className=)\"([^<>\"]+)\""],
      "replace": ["{}"]
    },
    "class-points": {
      "find": ["(?<= className=){([^\" <>]+) ([^\"<>]+)}"],
      "replace": ["{.}"]
    }
  },
  "replacerules.rulesets": {
    "class-brace-point": {
      "rules": [
          "class-brace",
          "class-points",
          "class-points",
          "class-points"
      ]
  }

如果您的标签可能超过 4 个类，您可以添加更多 "class-points" 或多次按键盘快捷键。

添加调用规则集的键盘快捷键

  {
    "key": "ctrl+f5",  // or any other key combo
    "when": "editorTextFocus",
    "command": "replacerules.runRuleset",
    "args": {"rulesetName": "class-brace-point"}
  }

Answer 2

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

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

有关如何创建自定义 emmet 片段的更多详细信息，请参阅 Link+tab shortcut Emmet on VSCode - How can I get the "type" to be included in this? - 并在您对其进行更改时重新加载。

然后，就像常规代码段一样，您从前缀开始（这里是我做的 divx），然后输入您的 class 信息。

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

有关设置该扩展程序的详细信息，请参阅。

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

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

A space 实际上充当触发器，您可以在 className 中拥有任意数量的项目。演示：

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

Is there a JSX emmet for VS Code that surrounds className in { } instead of quotes

jsx

emmet

reactjs

visual-studio-code