In VSCode, when I want to add an attribute to an HTML element I can start typing it and then press tab to complete the attribute name. But when I do that, it doesn’t include the equals (=) symbol.
When I use Tab Complete, this is the result that I want: <div class=''>
But this is the actual result: <div class>
The same thing happens for all attributes, such as role
and aria-label
.
Is there a setting that I can change, or some way to create a custom setting, that will include the equals symbol and the single quotes when I Tab Complete?
Notes regarding incorrectly closing this question:
This question was incorrectly closed and cited two duplicate questions:
- Automatic double quotes after ‘=’ in Visual Studio Code when adding attributes in html
- How to make vscode autocomplete HTML tag’s attribute with single quote?
Those questions were asking how to change the setting from double quotes to single quotes. My question was about troubleshooting the reason tab completion wasn’t working. I have an answer that I want to post. Please re-open my question.
2
Answers
I fixed it by toggling the value in this setting:
html.completion.attributeDefaultValue
When I first went to my settings the value was set to
doublequotes
. I changed it tosinglequotes
. Then when I tested, the issue was fixed.As an experiment I switched it back to
doublequotes
and the issue was still fixed.Here's my theory:
My company uses Prettier and ESLint, and I suspect that the settings that were imposed by one or both of those conflicted with VSCode. Maybe some kind of cache bug. My company prefers single quotes and VSCode was set double quotes, so maybe that caused the issue. I'm not 100% sure, but now I know how to fix it if it happens again.
Install HTML ‘Snippets’ Extension
VSCode Extension ID: abusaidm.html-snippets
Edit: It has been deprecated.