Getting Heex and ~H working in nvim with AstroNvim

[ohnoimdead]

Heya, apologies in advance if there’s a better place to ask this, happy to move it if so.

I’m just playing around with AstroNvim (GitHub - AstroNvim/AstroNvim: AstroNvim is an aesthetic and feature-rich neovim config that is extensible and easy to use with a great set of plugins) and trying to get all of elixir, heex, and TailwindCSS working similarly to VSCode with the usual plugins. I’m 90% sure this is my lack of understanding of how to configure neovim to use the right language server and/or treesitter for .ex and .heex, but I’m a bit stuck at the moment. Curious if anyone else has gotten this all working? And to head off the simple questions: I have tailwindcss and elixirls with lsp and elixir and heex with ts. All the elixirls stuff works great in .ex, and all of tailwindcss works in .html, but it doesn’t all want to work together in .ex inside ~H sigils or in .heex.

I’ll keep poking at it until I find the right knobs and switches, but if someone is like: oh yeah, just do [obvious thing that I’m missing], then that would be super helpful.

Cheers!

[Sebb]

I tried this with LunarVim this weekend and gave up very frustrated. You have to be very intelligent for this or make configuring a editor your hobby. Both not for me. I’d love to use a real vim for Elixir, but now I’ve settled with vscode-neovim which seem fine.

[dimitarvp]

That’s one of my very few criticisms towards VIM and Emacs – sub-modes / sub-file highlighting.

At one point I just figured “frak it” and started working without those, still in VIM and Emacs. If it gets too frustrating I’ll just hop into VSCode temporarily; it’s 50x easier to customize anyway.

@Sebb

You have to be very intelligent for this or make configuring a editor your hobby. Both not for me.

100% agreed and that doesn’t apply only for sub-mode highlighting. It applies to a lot of stuff in both editors. I have been vocal here occasionally that I gave up on Emacs. I won’t be giving up on NeoVim / LunarVim anytime soon – they are, to me, much better than Emacs – but the culture of “keep hacking it and make it your own” (a culture I started to despise with time) is still there. It’s still much easier to “hack on” than Emacs though (again, IMO) so I’ll stick around. I already have a good idea how to customize NeoVim / LunarVim and I like it much better.

But yeah, they still need more work in some areas. Maybe that will come with time, in the meantime I chose to simply not care.

[Sebb]

With VSCode Neovim - Visual Studio Marketplace (not the default vscode-vim) you get a decent vim-experience inside vscode. You have access to plugins and :ex-mode.

This is my init.vim and I will be happy with that as soon I’ve got visual-multi running.
Note, that you have to execute :PlugInstall to install plugins in nvim (does not seem to work in vscode).

For Elixir I have the “normal” vscode-plugins installed which coexist with no problems. See Formatting Phoenix HEEx Templates in VS Code

let mapleader = " "

if !filereadable($HOME . "/.config/nvim/autoload/plug.vim")
  echo "~≥ Installing vim-plug \n"
  silent !curl -fLo $HOME/.config/nvim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
  let shouldInstallBundles = 1
endif

call plug#begin()
Plug 'asvetliakov/vim-easymotion'
Plug 'tpope/vim-commentary'
Plug 'tpope/vim-surround'
Plug 'mg979/vim-visual-multi', {'branch': 'master'}
call plug#end()

map <Leader>f <Plug>(easymotion-bd-f)
map <Leader>L <Plug>(easymotion-bd-jk)
map <Leader>w <Plug>(easymotion-bd-w)

[ohnoimdead]

Well poop, after spending a couple of hours on it I think I have to give up for now, sadly. My only guess is that the configuration for elixirls in the (very excellent) vscode ElixirLS plugin is doing something to make everything work well together.

Damn you neovim! Why do you make it so hard to love you??

[ohnoimdead]

Yeah, same here (everything works great in VSCode with the usual plugins). Although I just use the regular ol’ Vim plugin… I might check out the Neovim one at some point. Anyway, this was more a curiosity. I think AstroNvim is very cool and probably works great for some of the languages that maybe have a bit more coverage on the integration with the IDE front. It’s fine though, VSCode serves my needs beautifully and I really have no complaints.

[Sebb]

the default plugin is great. Everything just works.
But I need ex-mode, eg for applying a macro to all selected lines like :'<,'>norm @a

I wonder where the vim-thusiasts are … as there is a way to do it for sure (just not for mere mortals)

[groig]

I use neovim configured from scratch and it wasn’t difficult to get it all working. Here are the relevant parts of my config:

Treesitter options:

{
        ensure_installed = "all",
        highlight = {
            enable = true,
        },
}

Lsp configs for tailwind and elixir-ls

    lspconfig.elixirls.setup(vim.tbl_extend("force", lsp_options, {
      cmd = { "elixir-ls" },
      settings = { elixirLS = { dialyzerEnabled = false } },
    }))

    lspconfig.tailwindcss.setup(vim.tbl_extend("force", lsp_options, {
      filetypes = { "html", "elixir", "eelixir", "heex" },
      init_options = {
        userLanguages = {
          elixir = "html-eex",
          eelixir = "html-eex",
          heex = "html-eex",
        },
      },
      settings = {
        tailwindCSS = {
          experimental = {
            classRegex = {
              'class[:]\\s*"([^"]*)"',
            },
          },
        },
      },
    }))

Some screenshots showing the highlight and the elixir-ls and tailwind completions both inside ~H sigils and heex files:

Here is a very trimmed down version of kickstart.nvim with working treesitter highlight, completion and snippets similar to how it works on my config

https://gist.github.com/groig/12aeb66f6191383b5711df456429ac3c

[Sebb]

this comment is like all the vim-related documentation. Good for people already expert on the matter.

[dimitarvp]

Ohhh, I’ll try this and report back (if I find a HEEX file to try it on ).

[Sebb]

would be nice if you enable others less blessed to also do it if its working for you.

@ohnoimdead you did mark it as solution. Do you have a config now that does all you want? Can you share it?

[ohnoimdead]

I actually didn’t mark it as the solution! Or, at least, I didn’t mean to. Maybe @groig did that?

[ohnoimdead]

Ah nice! This is super helpful. I’ll see if I can get it working with AstroNvim a bit later tonight. It would be nice to have a canonical (or at least works-out-of-the-box starting point) for Phoenix & Elixir with the AstroNvim config.

[groig]

@ohnoimdead

Maybe @groig did that?

I don’t think I did.

[ohnoimdead]

Well no worries either way because, thanks to your help, I got it to work!

For those that want to get this to work today (because this will hopefully become out of date quickly and just work out-of-the-box):

1. Install neovim 0.8+, AstroNvim, and the required deps, see GitHub - AstroNvim/AstroNvim: AstroNvim is an aesthetic and feature-rich neovim config that is extensible and easy to use with a great set of plugins
2. Use LspInstall (type :LspInstall then space, tab to autocomplete) to install: elixir-ls, emmet-ls, and tailwindcss-language-server
3. Use TSInstall (type :TSInstall then space, tab to autocomplete) to install: elixir, heex, and optionally eex
4. Edit ~/.config/nvim/init.lua and add the following under line 18 which starts with require("astronvim.utils").conditional_func...

local lspconfig = require("lspconfig")
local capabilities = vim.lsp.protocol.make_client_capabilities()

lspconfig.tailwindcss.setup({
  capabilities = capabilities,
  filetypes = { "html", "elixir", "eelixir", "heex" },
  init_options = {
    userLanguages = {
      elixir = "html-eex",
      eelixir = "html-eex",
      heex = "html-eex",
    },
  },
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          'class[:]\\s*"([^"]*)"',
        },
      },
    },
  },
})

lspconfig.emmet_ls.setup({
  capabilities = capabilities,
  filetypes = { "html", "css", "elixir", "eelixir", "heex" },
})

And go to town! My only minor complaint is the lack of color swatches for Tailwind colors. However, there’s a few things that are even better than VSCode imo, like the first-class ripgrep support. And, of course, true vim support in everything, including the file explorer. And hell, it looks great!

There is one SUPER STRANGE gotcha, which is that the tailwindcss ls can’t resolve the root directory for Phoenix projects unless it’s in git (there’s a .git folder). So if you don’t see tailwindcss in the status line and lsp says root directory: Not found. for tailwindcss, make sure to run git init.

Bonus: here’s a screen shot from Pop! OS with the same setup (which is where I’m at most of the time)

[groig]

@ohnoimdead

I got it to work!

Awesome!

@ohnoimdead

My only minor complaint is the lack of color swatches for Tailwind colors

Take a look here.

@ohnoimdead

There is one SUPER STRANGE gotcha, which is that the tailwindcss ls can’t resolve the root directory for Phoenix projects unless it’s in git (there’s a .git folder). So if you don’t see tailwindcss in the status line and lsp says root directory: Not found. for tailwindcss, make sure to run git init.

The root directory detection is configurable. Try adding this to your tailwind server options, maybe below filetypes:

root_dir = lspconfig.util.root_pattern('tailwind.config.js', 'tailwind.config.ts', 'postcss.config.js', 'postcss.config.ts', 'package.json', 'node_modules', '.git', 'mix.exs'),

[ohnoimdead]

My mind is blown… I can’t even. Seriously.

Also, the better root detection works great! Had no idea that was even a thing.

For a possibly even easier starting point for others: you can use my fork with all of the above config already in: GitHub - treshenry/AstroNvim: AstroNvim is an aesthetic and feature-rich neovim config that is extensible and easy to use with a great set of plugins, keeping in mind you will still need to install all the lsp and TS items from steps 2 and 3 above.

I’m now starting to think about how this would all fit together a bit more neatly in AstroNvim itself. Maybe I’ll hit up those folks in an issue. I’m thinking it would be cool if there was something like a rollup config manager where you could just do :configme phoenix and it’ll install the necessary support and drop a good starting config.

[groig]

Enjoy!

[Sebb]

cool, I got new hope.

I’ll try that out too.

[Sebb]

@ohnoimdead

I’m now starting to think about how this would all fit together a bit more neatly in AstroNvim itself. Maybe I’ll hit up those folks in an issue. I’m thinking it would be cool if there was something like a rollup config manager where you could just do :configme phoenix and it’ll install the necessary support and drop a good starting config.

Thanks to your thread here I gave it another try.
But I started with kickstart.nvim because Astro and Lunar are just to overwhelming for me.
With kickstart nvim you can just add elixir to the config and everything is installed automagically.
I will post the config when I got all I need working, looking good right now.