Why does Atom autocomplete html attributes as new elements?


I’m working in a pure HTML file using the Atom editor. The file has been recognized as HTML grammar (bottom right info bar in Atom).

Yet, when I am inside an HTML element, such as a <p> tag and type in id then hit tab, it auto completes a separate element within <p>, rather than the desired attribute.

Result of typing in id then hitting tab inside a <p> tag: <p <id></id>></p>

When it should be: <p id=""></p>

This also happens when try different attributes (class, style…) as well as for different HTML elements (div, form, img…).

GIF example of this in action: https://giphy.com/gifs/tag-html-tab-EraKEEf4dJ57RebGji

I tried disabling and enabling installed Atom auto complete packages (as well as Emmet), no success there.

Any help would be deeply appreciated.


What leads you to believe that there’s the option to complete id as id=""? Unless you create a snippet for it, that substitution may not be in the repertoire of the packages you’re using.

You might also find it convenient to make use of emmet to expand complex abbreviations that already include the id and class values.