[html][xml] Tab expansion creates tags even in attribute context

[fvsch]

• VSCode Version: Code 1.13.1 (379d2ef, 2017-06-14T18:13:05.928Z)
• OS Version: Darwin x64 16.6.0
• Extensions: (Note: tested with all disabled except "EditorConfig".)

Extension	Author	Version
EditorConfig	EditorConfig	0.9.3
quokka-vscode	WallabyJs	1.0.36
vscode-svgviewer	cssho	1.4.2
svg	jock	0.0.8
vetur	octref	0.8.5
twig	whatwedo	1.0.2

---

Steps to Reproduce:

From this HTML document:

1. <div></div>
2. <div></div>
3. <div style></div>
4. <div test></div>

1. Place the cursor after "div" in the first line, then type style and hit the Tab key.
2. Place the cursor after "div" in the second line, then type test and hit the Tab key.
3. Place the cursor after "style" in the third line, then hit the Tab key.
4. Place the cursor after "test" in the fourth line, then hit the Tab key.

Expected result:

1. <div style=""></div>
2. <div test=""></div>
3. <div style=""></div>
4. <div test=""></div>

Less expected but would-be-okay result:

1. <div style></div>
2. <div test></div>
3. <div style></div>
4. <div test></div>

Actual result:

1. <div style=""></div>
2. <div <test></test>></div>
3. <div <style></style>></div>
4. <div <test></test>></div>

I think the issue with the actual result is obvious. I would rather have the editor do nothing on Tab than creating tags in attribute context (and, as a user, having to remember not to use Tab at all in attribute context because it’s just too funky 😀 ).

Note: I looked at the list of issues tagged "html", and didn’t find an pre-existing issue. There are two issues with a broader scope (wanting the editor to be more context-and-vocabulary-aware and not simply syntax-aware), which might be duplicates of each other:
#375
#19114

There is this feature request to auto-add double quotes after attr=:
#18071

[ramya-rao-a]

@fvsch What you are seeing is the expanding of emmet abbreviation that happens on pressing tab in VS Code. Emmet can do much more. See https://docs.emmet.io/actions/expand-abbreviation/

Having tab trigger emmet abbreviation expansion has its issues, which is why we are working on presenting better way to surface emmet abbreviation expansion. You can read about it in our 1.13 Release Notes

Bottom line, yes what you have described is a problem, and we hope the that the new emmet model in the coming milestones will solve this issue.

Until then, you can set emmet.triggerExpansionOnTab to false if you are not a emmet user to free up the tab key from emmet. If you are curious about emmet, bind any other keyboard shortcut to Emmet: Expand Abbreviation command and use it that way.

[fvsch]

@ramya-rao-a Thanks for the detailed answer. :)