.eex formatting?

[stevepm]

Does this exist? Nothing happens when I try to auto format a file with a .eex extension. Am I doing something wrong?

[isAlmogK]

+1, having the same issue I get the following error message "There is no document formatter for 'HTML (Eex)'-files installed."

[cdiebold]

In your vscode settings, add this line.
“files.associations”: {"*.html.eex": “html”}

This will make vscode treat eex files as html files. You should now be able to format them however you format html.

[hypno2000]

but this will remove the <% ... %> formatting completely

[x-ji]

That doesn't actually work since it will break the <% ... %> part, at least with Prettier. Is there any formatter that actually supports formatting .html.eex files correctly without introducing syntax errors? Don't think there's such a formatter plugin for VSCode yet

[fklement]

I found a solution that works for me quite well.
I use the Beautify extension for VSCode. And I added this in my user settings:

"beautify.language":` {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": {
            "type": [
                "htm",
                "html"
            ],
            "filename": [
                ".html.eex",
                ".html"
            ]
        },
    }

Then all my .html.eex files are formatted correctly. Except for code that is in <% ... %> tags.

[ringofhealth]

@fklement thanks for that solution. It works perfectly!

[leebenson]

@fklement - Beautify is turning this:

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>">

into this:

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>
">

(note the newline in the src attr)

Any known workarounds? Thanks.

[fklement]

@leebenson I also found this problem. But so far I haven't found a working solution. I will post it here if I find something.

[fklement]

@leebenson I finally had some time to fiddle around with the formatting problem.
It is really unsatisfying that there is nearly nothing on the net for .html.eex files.
But I figured a way out with the beautify settings so that the wired newline is not happening anymore for script as well as some other things that bugged me.

I'm using this config now and as far as I can tell (only used it the past hours) it works quite well for my purposes.

  "beautify.config": {
    "indent_size": 2,
    "indent_inner_html": true,
    "preserve_newlines": false,
    "unformatted": [
      "script"
    ],
    "void_elements": [
      "area",
      "base",
      "br",
      "col",
      "embed",
      "hr",
      "img",
      "input",
      "keygen",
      "link",
      "menuitem",
      "meta",
      "param",
      "source",
      "track",
      "wbr",
      "!doctype",
      "?xml",
      "?php",
      "?=",
      "basefont",
      "isindex",
      "%",
      "%="
    ],
    "inline": [
      "%=",
      "%",
      "a",
      "abbr",
      "area",
      "audio",
      "b",
      "bdi",
      "bdo",
      "br",
      "button",
      "canvas",
      "cite",
      "code",
      "data",
      "datalist",
      "del",
      "dfn",
      "em",
      "embed",
      "i",
      "iframe",
      "img",
      "input",
      "ins",
      "kbd",
      "keygen",
      "label",
      "map",
      "mark",
      "math",
      "meter",
      "noscript",
      "object",
      "output",
      "progress",
      "q",
      "ruby",
      "s",
      "samp",
      "select",
      "small",
      "span",
      "strong",
      "sub",
      "sup",
      "svg",
      "template",
      "textarea",
      "time",
      "u",
      "var",
      "video",
      "wbr",
      "text",
      "acronym",
      "address",
      "big",
      "dt",
      "ins",
      "strike",
      "tt"
    ]
  },

[ewildgoose]

I think the issue is that the .html.eex syntax needs to be implemented as an "embedded language" rather than as it is? This way it's treated as an HTML file, but has embedded elixir in <% %> sections

https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

[malloryerik]

As @ewildgoose suggests most formatting, intellisense, autocorrect and eex syntax highlighting seem to work with html.eex set as an embedded language in settings.js as follows:

"files.associations": {
    "*.html.EEx": "HTML (EEx)"
},

However there's still a problem as Eex tags only seem to indent at one level.
Like so:

        <%= if true do %>
        It is obviously true
        <% else %>
        This will never appear
        <% end %>

and not

        <%= if true do %>
           It is obviously true
        <% else %>
           This will never appear
        <% end %>

Maybe someone knows how to overcome this? Beautify settings?

There is some discussion of it on ElixirForum.

[swaathi]

In settings.json, just add this

"files.associations": {
  "*.html.eex": "erb",
  "*.html.leex": "erb"
},

This will consider .eex/.leex files as ERB (Rails) and preserve formatting for <%= ... %>.

[exanup]

I don't know if I am supposed to share a different formater specialized for eex and leex, but this actually worked for me. Also saves formatting for <% %>. Also, I didn't have to change settings.json. However, I was required to gem install htmlbeautifier.

Here is the link: https://marketplace.visualstudio.com/items?itemName=ouven.vscode-yab-for-eex-leex
Repo: https://github.com/ouven/vscode-yab-for-eex-leex