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

[volkancakil]

By default, when I expand an html tag with an attribute, the attribute's value gets surrounded by quotes.
I'm trying to remove the quotes generated by Emmet around the props.onClick value for custom attribute onClick.

My input (then TAB to expand):
button[onClick={props.onClick}]

Emmet's output:
<button onClick="props.onClick"></button>

What I expect (props... WITHOUT quotes):
<button onClick={props.onClick}></button>

Whereas, I want to have to specify when the expanded version wrapping with quotes.
Either rapping it around double brackets doesn't work. Is that possible with vscode.emmet?

[vscodebot[bot]]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Expand selection, a level to not include quotes (#27984)
  

[ramya-rao-a]

@sergeche Are you aware of any customization that allows not having the quotes around the attribute value at all?

[sergeche]

Yes, you can add additional check for React attributes here: https://github.com/emmetio/markup-formatters/blob/master/format/html.js#L232

The React attribute object contains { before: '{', after: '}' } options: https://github.com/emmetio/abbreviation/blob/master/test/attributes.js#L77

[ramya-rao-a]

Thanks @sergeche!

If anyone is interested in picking this up, please submit a PR in the https://github.com/emmetio/markup-formatters repo

[skprabhanjan]

@ramya-rao-a , I would like to pick this up.
Where exactly should I start ? (submitting a PR to other repo confused me, so I just want to know)
Thanks :)

[volkancakil]

@ramya-rao-a i have made a PR https://github.com/emmetio/markup-formatters/pull/2
@sergeche can you check this please?

[sergeche]

Available as @emmetio/[email protected]

[ramya-rao-a]

Thanks @sergeche!

Just waiting for a newer version of the https://github.com/emmetio/abbreviation module, and then we should be able to pull in all the upstream fixes.

[ramya-rao-a]

@octref All that is left to do is to update vscode-emmet-helper module to consume the latest versions of the abbreviation, markup-formatter modules

[octref]

@ramya-rao-a OK, will pick it up for December.

[ramya-rao-a]

@octref I have updated the abbreviation module in the vscode-emmet-helper repo.

Updating markup-formatter to the latest v0.4.1 is not trivial.

We are currently using v0.5.10 of the expand-abbreviation module which is not compatible with the v0.4.0 version of the markup-formatter. We have 2 choices here:

• Patch the umd version of the expand-abbreviation module i.e. the expand-full.js file in vscode-emmet-helper with the fix in https://github.com/emmetio/markup-formatters/pull/2/files
• Or upgrade to the latest version of the expand-abbreviation module as per https://github.com/Microsoft/vscode-emmet-helper/issues/28

For short-term I would recommend the first option.

[octref]

This is not fixed yet. Moving to Feb.

[cybersec-dev]

Is this going be back in one of the next sprints?

[HaoyangFan]

currently the button.square[onClick={func}] still converts to <button className="square" onClick="func"></button> not the intended one <button className="square" onClick={func}></button>

Is there a way to get the intended behavior? Thanks

[promethyttrium]

Is there anyone working on this?

[nextriot]

Any update on this?

[shaltai]

Hello?

[daig]

Bump

[dropsonic]

Bump

[Flandre-X]

Bump

[sergeche]

Sadly, I was unable to contact anyone at VSCode team to help me and support/sponsor new plugin development.
This feature is already available in upcoming Sublime Text plugin and works in CodePen with recent Emmet version.

[icorbrey]

Is this functionality available in an extension? Since there's not a whole ton of feedback from the team

[sergeche]

@icorbrey it’s available in core Emmet module. There’s a draft PR with upgrade to recent Emmet v2, which seems to be abandoned: https://github.com/microsoft/vscode-emmet-helper/pull/33