How to get Emmet to generate a custom JSX attribute without quotes

Question

I'm trying to remove the quotes generated by Emmet around the props.onInitiateBattle value for custom attribute onClick.

My input (then CTRL + E to expand, similar to tab):
button.btn[type="button"][onClick={props.onInitiateBattle}]

Emmet's output:
<button className="btn" type="button" onClick="{props.onInitiateBattle}"></button>

Notice props.onInitiateBattle WITH quotes, which isn't good.

What I expect (props... WITHOUT quotes):
<button className="btn" type="button" onClick={props.onInitiateBattle}></button>

Wrapping it around double brackets doesn't work either.

Answer 1

To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. I believe that the key is the file extension and the value is the name of the profile that extension will use.

/* ~/emmet/syntaxProfiles.json */

/* 'js' will map files with .js extension to use the js profile*/ /* 'jsx' will map files with .jsx extension to also use the js profile*/

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

/* ~/emmet/profiles.json */

/* create or add the 'js' profile */

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

more information