The very basics... auto-formatting in .eex

I have created this pull request:

But it does not work just as you expect, the beautify solution should be the best option available at the moment

In settings.json, instead of setting "files.associations": { *.html.EEx: ... } to "HTML", set it to "HTML (EEx)":

"files.associations": {
    "*.js": "javascript",
    "*.ex": "elixir",
    "*.exs": "elixir",
    "*.eex": "EEx",
    "*.html.EEx": "HTML (EEx)"
},

I just stumbled onto this, and @tme_317 has already found it, but you don’t need Beautify.

Once files.associations for .html.eex are set to “HTML (EEx)” it appears that .eex work as an embedded language inside of .html, so they both work seamlessly. Snippets extensions work, .eex tags autocomplete, intellisense and syntax highlighting work, it’s all back.

7 Likes

That’s great! Your solution along with @tme_317’s works well. The one thing that seems to be lacking is a way to respect indentation with embedded code. For example, the values inside of for should be indented, but when I format, everything inside of it are all moved to the same level of indentation as the for. This applies to all constructs, like if and do.

Do you or anyone else know of any way out of this?

If not, no worry. Being able to format at all helps more with development speed than the extra readability of properly formatted elixir parts. It would be nice though :slight_smile:

That’s a good point and I don’t yet have an answer. I checked in emacs and of course it works there (though I have other emacs problems, which is why I usually shrug and open VS Code…).

I added to an open issue here: https://github.com/fr1zle/vscode-elixir/issues/129

FWIW, a potentially straight-forward solution to this is to get an existing embedded language, such as PHP or Ruby’s ERB, duplicate its configuration file and then changing the embedded language to Elixir.

I did this on Sublime Text, copying from Ruby’s ERB, and it was relatively easy and it works quite well.

8 Likes