VSCode tab complete doesn't include equals for attributes

Question

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:

1. Automatic double quotes after '=' in Visual Studio Code when adding attributes in html
2. 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.

Answer 1

Install HTML 'Snippets' Extension VSCode Extension ID: abusaidm.html-snippets

Edit: It has been deprecated.

Answer 2

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 to singlequotes. 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.