Emmet autocomplete works for *.eex and *.leex but its behavior is slighly different as compared to *.html. Why is that?

Phoenix Forum Questions / Help
,
1

For enabling emmet in Phoenix templates and liveview templates, I used the following settings kindly provided by the Pragmatic Studio Liveview course:

"emmet.includeLanguages": {
  "html-eex": "html",
  "elixir": "html"
},
"emmet.triggerExpansionOnTab": true,

It works well but there is a tiny difference vs. emmets default behavior in .html files

In .html files, pressing enter from <div>|</div> takes you to

<div>
    |
</div>

(the pipe | is the cursor)

but the exact same thing when done in .eex or .leex does not produce the nice indented newline between the div tags. What I get is this:

<div>
|</div>

Not a huge issue but why this subtle difference?

2

Afaik the behaviour you describe is not part of emmet and therefore related to the formatter used for different files.

3

I have specifically set so that emmet works in .eex files. So that is emmet indeed. The only other formatter installed is ElixirLS - and that doesn’t deal in html tags.

4

<div>|</div> is not an emmet abbreviation by my understanding, so I’m not sure how emmet should be involved here. The proper nesting of tags is likely html specific behaviour of some other tool within vscode.

5

<div>|</div> is emmet expansion when you just type div and press tab. The | is the cursor.

6

True, but what happens if you press enter after that is by my understanding no longer related to emmet.

7

Oh. Ya that makes sense.