Heex support

[JosephTLyons]

Check for existing issues

• Completed

Language

Heex

Tree Sitter parser link

No response

Language server link

No response

Misc notes

Came from:

• https://github.com/zed-industries/feedback/discussions/713

[ssaunderss]

I can't speak for Surface UI / embedded languages in sigils, but I'm pretty sure that there's support for .heex, .eex, .leex file extensions out of the box on ElixirLS - there was a discussion about it towards the end of the closed ElixirLS ticket (#235) I think at least for those file extensions there might be a LS config value that was overwritten to not watch those file extension types.

[noozo]

+1

[ssaunderss]

Dived a bit deeper into this because I really want to be able to do front end work in Zed 😀

Here's the default file extensions from ElxiirLS - https://github.com/elixir-lsp/elixir-ls/blob/7ed5cdd86f102c232c824ceec37937270f2e87e2/apps/language_server/lib/language_server/server.ex#L79-L90 and it looks like this should be supported using default LS settings.

Is there a way we can access a languages default LSP config in Zed so we can make appropriate overrides @JosephTLyons ? I looked through the docs on the website and it doesn't seem like there's a way to see which config values are available for a given language's LSP.

[jrasanen]

Tree Sitter parser link
No response

Here's the HEEx grammar source for tree sitter,

https://github.com/phoenixframework/tree-sitter-heex

[noozo]

No joy since Nov? Might have to go back to VSCode since looking at non-highlighted sigils is starting to drive me crazy :(

[petros]

@noozo can you point me to an open source repository that is a Phoenix project to test things out? Preferably one that has .heex files.

[ssaunderss]

@petros https://github.com/firezone/firezone/tree/master/apps/fz_http/lib/fz_http_web/templates/auth is an example that uses .heex files 🙌

[petros]

When I check a .ex file both on Zed and VSCode this is what I see:

Zed	VSCode

Is it expected to see the part within sigils highlighted? If there is, why isn't this happening on VSCode?

For .heex files here's the point I reached:

I am not entirely happy though cause you will notice a few inconsistencies. I am trying to figure out what I need to tweak.

[jrasanen]

Is it expected to see the part within sigils highlighted? If there is, why isn't this happening on VSCode?

I don't use VSCode, but afaik, it doesn't use tree-sitter so I can't comment on anything about it.

With the proper tree-sitter parser like Phoenix' heex the sigils should be highlighted.

Helix editor has tree-sitter built in like Zed but it uses the proper parser

[petros]

Thank you @jrasanen. I have added https://github.com/phoenixframework/tree-sitter-heex which gave us the file level highlight, but I guess I need to add something to also get it to highlight sigils. 🤔

[jrasanen]

Nice to hear, perhaps Elixir-LS is also required, https://github.com/elixir-lsp/elixir-ls

[ArthurMmn]

Here is Helix config for HEEX :

[[language]]
name = "heex"
scope = "source.heex"
injection-regex = "heex"
file-types = ["heex"]
roots = ["mix.exs", "mix.lock"]
indent = { tab-width = 2, unit = "  " }
language-server = { command = "elixir-ls" }
config = { elixirLS.dialyzerEnabled = false }

[[grammar]]
name = "heex"
source = { git = "https://github.com/phoenixframework/tree-sitter-heex", rev = "2e1348c3cf2c9323e87c2744796cf3f3868aa82a" }

I guess you need to configure the injection of HEEX grammer in ex file ?

Edit : other relevant to elixir config if it can help

ex

[[language]]
name = "elixir"
scope = "source.elixir"
injection-regex = "(elixir|ex)"
file-types = ["ex", "exs", "mix.lock"]
shebangs = ["elixir"]
roots = ["mix.exs", "mix.lock"]
comment-token = "#"
language-server = { command = "elixir-ls" }
config = { elixirLS.dialyzerEnabled = false }
indent = { tab-width = 2, unit = "  " }

[[grammar]]
name = "elixir"
source = { git = "https://github.com/elixir-lang/tree-sitter-elixir", rev = "b20eaa75565243c50be5e35e253d8beb58f45d56"  }

iex (interactive elixir)

[[language]]
name = "iex"
scope = "source.iex"
injection-regex = "iex"
file-types = ["iex"]
roots = []

[[grammar]]
name = "iex"
source = { git = "https://github.com/elixir-lang/tree-sitter-iex", rev = "39f20bb51f502e32058684e893c0c0b00bb2332c" }

eex (ancestor of heex)

[[language]]
name = "eex"
scope = "source.eex"
injection-regex = "eex"
file-types = ["eex"]
roots = ["mix.exs", "mix.lock"]
indent = { tab-width = 2, unit = "  " }

[[grammar]]
name = "eex"
source = { git = "https://github.com/connorlay/tree-sitter-eex", rev = "f742f2fe327463335e8671a87c0b9b396905d1d1" }

[jrasanen]

Here's what stuff looks like without and with the tree-sitter mode in Emacs using elixir-ts-mode.

Off	On

[ArthurMmn]

"Ironically", Zed Blog mentionned how the Tree Sitter language injection works last week (Multi-language Documents paragraph) 😄

Hope we can see this implemented in the near future 🙏

[petros]

Just a quick update on this. I spent some time trying to figure out the moving parts, and I reached a generally good point, but I am struggling with a formatting related error message I am getting from the language server. I know there are many folks eager to see better Elixir support (myself included 😄), but I will have to pause this for a bit. I will focus again on this soon though.

[noozo]

Ohh, i hope you get to focus on it soon again. This is a real source of pain for me, ATM :(

[noozo]

Also maybe late to the party, but here's what i get with VSCode (ElixirLS extension installed):

[JosephTLyons]

HEEX support should be landing in v0.91.0 - going to close this out.