ohnoimdead

Getting Heex and ~H working in nvim with AstroNvim

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 · GitHub) 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!

39 comments

/phoenix #neovim #ide

3 6504 39

2024-12-13 20:54:09 UTC

Marked As Solved

ohnoimdead

The elixir-phoenix pack was added to the astrocommunity repo making it very easy to get up and running with AstroNvim.

Install the latest AstroNvim per the instructions at https://docs.astronvim.com/
Remove the first line in ~/.config/nvim/lua/community.lua which looks like if true then return {} end to enable astrocommunity
Add { import = "astrocommunity.pack.elixir-phoenix" }
Profit

Here’s what your astrocommunity.lua file might contain, for reference:

---@type LazySpec
return {
  "AstroNvim/astrocommunity",
  { import = "astrocommunity.pack.elixir-phoenix" },
  { import = "astrocommunity.pack.lua" },
  -- import/override with your plugins folder
}

Post #36

Also Liked

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

Post #8

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):

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 · GitHub
Use LspInstall (type :LspInstall then space, tab to autocomplete) to install: elixir-ls, emmet-ls, and tailwindcss-language-server
Use TSInstall (type :TSInstall then space, tab to autocomplete) to install: elixir, heex, and optionally eex
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)

Post #15

groig

Awesome!

Take a look here.

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'),

Post #16