Vscode: Emmet 2.0: every word is being expanded by emmet

[smlombardi]

• VSCode Version: Code - Insiders 1.14.0-insider (b8cd5b9556d8b70ea560d35b903422363f6c5c40, 2017-07-06T20:14:49.095Z)
• OS Version: Darwin x64 16.6.0
• Extensions:

Extension|Author (truncated)|Version
---|---|---
ng-template|Ang|0.1.4
vscode-markdownlint|Dav|0.9.1
code-settings-sync|Sha|2.8.2
sort-lines|Tyr|1.3.0
Bookmarks|ale|0.15.2
project-manager|ale|0.18.1
path-intellisense|chr|1.4.2
vscode-eslint|dba|1.2.11
vscode-html-css|ecm|0.1.7
tslint|eg2|0.16.0
auto-rename-tag|for|0.0.14
Angular2|joh|2.3.3
ecdc|mit|0.10.3
HTMLHint|mka|0.3.3
vscode-autoprefixer|mrm|2.0.0
vscode-stylefmt|mrm|2.4.1
angular2-inline|nat|0.0.17
stylelint|shi|0.26.0
ayu|tea|0.4.0
change-case|wma|1.0.0

(4 theme extensions excluded)

---

Steps to Reproduce:

1. Assume you are trying to type <div class="foo">
2. Type <div cl. Intellisense offers a completion of cl via Emmet for some reason.
3. If you choose it, you get <div <cl></cl> which makes no sense.
4. Shouldn't Emmet suggest class (or at least other attributes with "cl" if there was such a thing)?

[niichie]

This seems similar to what I'm having over here.. does your emmet basically suggest any word, whether it's an emmet snippet or not to be used as a tag? It would seem more useful if it only showed an emmet suggestions when it corresponded with an existing emmet snippet. It's pretty annoying inserting a break into a paragraph, only to have the last word turned into a set of tags.

30277

[smlombardi]

@Niichie I agree, it shouldn't "suggest" completions that aren't real tags.

[ramya-rao-a]

Agreed that this and #30277 even more is annoying. I initially let this be as people also wanted the case of div expanding to <div></div>. Here div is not an emmet snippet. But the expectation is to get it expanded to <div></div>

Here is my proposal:

• Do not show emmet expansion in the suggestion list when the typed text is not a snippet (like img) or an abbreviation (like ul>li*3)
• If Emmet: Expand Abbreviation is explicitly used, then expand whatever was typed regardless of whether it was a snippet/abbreviation or not.

This way, we do not forcefully push the option of expanding anyrandomthing to <anyrandomthing></anyrandomthing> via suggestion list where it might get expanded when hitting tab. But if the user explicitly runs the Emmet: Expand Abbreviation command, then we trust the judgement of the user and expand without any checks.

[niichie]

So basically, if the word we typed is an emmet abbreviaton, it will be shown on the suggestion llist, for example:
p = <p></p> or ul>li*3 = <ul> <li>x3 </ul>

If it is not an emmet abbreviation, it will only be shown if Emmet: Expand Abbreviation is explicitly used?

So we will no longer be getting results such as randomword>tab = <randomword></randomword>

This would be a perfect solution, as the current implementation either has me choosing between not having any emmet suggestions at all, or having everything I type be turned into a suggestion.

[ramya-rao-a]

Correct. Except p will not be expanded to <p></p> in the suggestion list
I took the example of img because it is a snippet that expands to <img src="" alt="">

Look at https://github.com/emmetio/snippets/blob/master/html.json for all the emmet snippets.

[niichie]

This is actually a perfect solution, because in combination with the HTML5 Snippets plugin, you can get both the normal snippets like div, p, h1 as well as the emmet abbreviations. Will we be able to set the emmet abbreviations to take priority when there is a matching snippet?

[ramya-rao-a]

I believe so, but wont be sure until I actually make the change

[ayyash]

I'm going to append to this thread because it looks like the same issues around emmet, recently, emmet lorem, generates a "div" tag around it, this is annoying.
Also on ever "enter" the last word is expanded into a tag, which is not what is really intended, the Tab should be enough (if that is configurable, then the default changed, how can I configure back?)

[ramya-rao-a]

emmet lorem, generates a "div" tag around it

That's different. lorem is a valid abbreviation and emmet should have returned without the div. https://github.com/emmetio/atom-plugin/issues/28 is logged as an upstream issue for that.

Also on ever "enter" the last word is expanded into a tag,

This will be covered in this current issue

[ramya-rao-a]

Am back from vacation and conferences, now to some bug fixes :)

@smlombardi @Niichie I have pushed a fix to skip emmet suggestions when text is not a known snippet or a form of abbreviation. Emmet: Expand Abbreviation command is not affected by this change.

The change will be out in Wednesday's Insiders (19th July)

Do try it out and let me know how it goes.

[niichie]

Excited to try this out! Thanks :)

Any idea when the following will be fixed in emmet?
For some reason, the obvious abbreviation is second, even with the full word almost typed out!

[ramya-rao-a]

@Niichie That is being tracked in #29473 for which I just pushed a fix. You should be able to see the change in Wednesday's Insiders (19th July)

[ramya-rao-a]

Note to verifier:

• Typing simple text in html file should trigger emmet suggestions
• Type simple text and run the Emmet: Expand Abbreviation command and the text should get expanded to html tags
• Commonly used html tags like div, head, body, ul, p etc should show up in the emmet suggestions
• lorem, lorem20, lorem2` etc should show up in emmet suggestions