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

【问题标题】：How to get Emmet to generate a custom JSX attribute without quotes如何让 Emmet 生成不带引号的自定义 JSX 属性
【发布时间】：2016-07-08 10:32:56
【问题描述】：

我正在尝试删除 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 带引号，这不好。

我的期望（道具...不带引号）：
<button className="btn" type="button" onClick={props.onInitiateBattle}></button>

用双括号括起来也不起作用。

【问题讨论】：

【解决方案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
  }
}

【讨论】：