reactjs - 如何让 Emmet 生成不带引号的自定义 JSX 属性

Question

我正在尝试删除 Emmet 在 props.onInitiateBattle 周围生成的引号自定义属性的值 onClick .

我的输入(然后按 CTRL + E 展开，类似于 Tab):
button.btn[type="button"][onClick={props.onInitiateBattle}]

Emmet 的输出:
<button className="btn" type="button" onClick="{props.onInitiateBattle}"></button>

通知props.onInitiateBattle带引号，这不好。

我的期望( Prop ...不带引号):
<button className="btn" type="button" onClick={props.onInitiateBattle}></button>

将其括在双括号中也不起作用。

Answer 1

要使单引号与 JSX 一起使用，您需要使用语法配置文件在 ~/emmet 中更新或创建 syntaxProfiles.json。我相信键是文件扩展名，值是扩展名将使用的配置文件的名称。

/* ~/emmet/syntaxProfiles.json */

/* 'js' 将映射扩展名为 .js 的文件以使用 js 配置文件*//* 'jsx' 将映射具有 .jsx 扩展名的文件以也使用 js 配置文件*/

{
  "js": "js",
  "jsx": "js"
}

/* ~/emmet/profiles.json */

/* 创建或添加“js”配置文件 */

{
  "html": {
    "attr_quotes": "double"
  },
  "js": {
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}

more information