skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. Install HTML ‘Snippets’ Extension
    VSCode Extension ID: abusaidm.html-snippets

    Edit: It has been deprecated.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search