How can I use Emmet abbreviations to add a value-less property to an element?

Question

I'm trying to create some elements using Emmet in VS Code, where those elements have specific properties.

The following Emmet works correctly, and produces good output.

input[type="password"]

Expands to

<input type="password"></input>

However, if I try to give a value-less property to the element, it adds a string to it, which is sometimes incorrect.

input[required]

Expands to

<input required="required"></input>

How can I make Emmet only produce the property with no value, like this?

<input required></input>

I've had a look through the documentation for abbreviations and this particular case doesn't seem to be listed there. Does anyone have any ideas?

starball · Accepted Answer · 2023-04-30T21:02:29.840

1

From googling "github vscode issues emmet attribute without value", I found Emmet: compact boolean attributes won't work #32282, where I learned of the emmet.syntaxProfiles setting.

Try putting the following in your settings.json file:

"emmet.syntaxProfiles": {
    "html": {
        "compactBooleanAttributes": true
    }
}

For some reason there's another way to do it as well:

"emmet.preferences": {
    "profile.allowCompactBoolean": true
},

edited Apr 30 '23 at 21:02

answered Apr 19 '23 at 10:56

starball

Awesome! Is there any way to get it to work with React as well? – Miguel Guthridge Apr 19 '23 at 11:35
@MiguelGuthridge I assume adding `javascriptreact` in addition to `html`? But I couldn't get that to work- I assume because the emmet syntax looks like legitimate JS. See also https://stackoverflow.com/q/56311467/11107541. – starball Apr 19 '23 at 12:07

1 Answers1