As much as I understand, this is working on top of htmlbeautifier gem. That would mean it would understand only HTML tags. Either erb files or heex files or simple eex files, the interpolation tags will be ignored. Add to that, it will not understand the sigils also. For example, if you write the component inside ~F that template will not be rendered at all.
We need to wait for a core heex formatter that is possible in Elixir 1.13 like the surface_formatter.
cvkmohan
0
Sebb
Thanks for the guide.
I do not quite understand how to find the language ID and how to connect plugins to them.
It’s working for those you posted but I’d like to use some more plugins.
Here is a list of the plugins and the state of affairs:
| Extension | HEEX | ~H-sigil | Comment |
|---|---|---|---|
| Alpine.js IntelliSense | - | - | |
| Auto Close Tag | - | - | |
| Auto Rename Tag | + | + | works for components |
| Elixir Templates Formatter | o | - | not for components |
| Phoenix Framework | + | + | |
| Tailwind CSS IntelliSense | + | - |
How can we put a + in each cell?
| Extension | Ver | Author | ID |
|---|---|---|---|
| Alpine.js IntelliSense | v1.2.0 | Adrian Wilczyński | adrianwilczynski.alpine-js-intellisense |
| Auto Close Tag | v0.5.13 | Jun Han | formulahendry.auto-close-tag |
| Auto Rename Tag | v0.1.9 | Jun Han | formulahendry.auto-rename-tag |
| Elixir Templates Formatter | v0.5.0 | RoyalMist | royalmist.vscode-eex-format |
| ElixirLS: Elixir support and debugger | v0.9.0 | ElixirLS | jakebecker.elixir-ls |
| Phoenix Framework | v0.1.1 | phoenixframework | phoenixframework.phoenix |
| Tailwind CSS IntelliSense | v0.7.4 | Tailwind Labs | bradlc.vscode-tailwindcss |
6
malloryerik
Do you know what it would take to get something like a formatter or Intellisense working inside of an ~H sigil? (I don’t.)
0
Sebb
vscode-phoenix can do syntax highlighting for ~H. There is an issue for formatting: Code formatting support · Issue #6 · phoenixframework/vscode-phoenix · GitHub.
There is the new plugins feature for mix format, which makes it possible to format ~H. Don’t think we’ll ever see Intellisense for ~H.
2
mtremsal
For auto-formatting heex.html files, I wasn’t able to rely on any of the plugins listed in the table, but Beautify works well-enough after adding phoenix-heex to its config file:
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html", "phoenix-heex"]
// ^^ providing just an array sets the VS Code file type
}
2
Ritvyk
@malloryerik ncase you want the same ability with pure .HTML.heex files , take a look at this extension just came into marketplace.
It also takes alpine js x-* and phx and new <.component> syntax into consideration 
4
malloryerik
Sky0307
Hey guys, I am actually looking for extension that can format the tab within the .heex file. Is there any extensions that can do this?
0
cvkmohan
feliperenan/heex_formatter: Formatter for Phoenix Live View templates. (github.com) This extension handles all the heex file formatting.
Only caveat is elixir 1.13 has to be used.
0
