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

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

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?

Solution

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
},