Elixir

Elixir support is available through the Elixir extension.

• Tree-sitter:
  • elixir-lang/tree-sitter-elixir
  • phoenixframework/tree-sitter-heex
• Language servers:
  • elixir-lang/expert
  • elixir-lsp/elixir-ls
  • elixir-tools/next-ls
  • lexical-lsp/lexical

Choosing a language server

The Elixir extension offers language server support for expert, elixir-ls, next-ls, and lexical.

elixir-ls is enabled by default.

Expert

Configure language servers in Settings (cmd-,|ctrl-,) under Languages > Elixir, or add to your settings file:

  "languages": {
    "Elixir": {
      "language_servers": ["expert", "!elixir-ls", "!next-ls", "!lexical", "..."]
    },
    "HEEX": {
      "language_servers": ["expert", "!elixir-ls", "!next-ls", "!lexical", "..."]
    }
  }

Next LS

Configure language servers in Settings (cmd-,|ctrl-,) under Languages > Elixir, or add to your settings file:

  "languages": {
    "Elixir": {
      "language_servers": ["next-ls", "!expert", "!elixir-ls", "!lexical", "..."]
    },
    "HEEX": {
      "language_servers": ["next-ls", "!expert", "!elixir-ls", "!lexical", "..."]
    }
  }

Lexical

Configure language servers in Settings (cmd-,|ctrl-,) under Languages > Elixir, or add to your settings file:

  "languages": {
    "Elixir": {
      "language_servers": ["lexical", "!expert", "!elixir-ls", "!next-ls", "..."]
    },
    "HEEX": {
      "language_servers": ["lexical", "!expert", "!elixir-ls", "!next-ls", "..."]
    }
  }

Setting up elixir-ls

1. Install elixir:

brew install elixir

2. Install elixir-ls:

brew install elixir-ls

3. Restart Zed

If elixir-ls is not running in an elixir project, check the error log via the command palette action zed: open log. If you find an error message mentioning: invalid LSP message header "Shall I install Hex? (if running non-interactively, use \"mix local.hex --force\") [Yn], you might need to install Hex. You run elixir-ls from the command line and accept the prompt to install Hex.

Formatting with Mix

If you prefer to format your code with Mix, configure it as an external formatter. Formatting will occur on file save.

Configure formatting in Settings (cmd-,|ctrl-,) under Languages > Elixir, or add to your settings file:

{
  "languages": {
    "Elixir": {
      "format_on_save": "on",
      "formatter": {
        "external": {
          "command": "mix",
          "arguments": ["format", "--stdin-filename", "{buffer_path}", "-"]
        }
      }
    }
  }
}

Additional workspace configuration options

You can pass additional elixir-ls workspace configuration options via lsp settings in your settings file (how to edit).

The following example disables dialyzer:

  "lsp": {
    "elixir-ls": {
      "settings": {
        "dialyzerEnabled": false
      }
    }
  }

See ElixirLS configuration settings for more options.

HEEx

Zed also supports HEEx templates. HEEx is a mix of EEx (Embedded Elixir) and HTML, and is used in Phoenix LiveView applications.

• Tree-sitter: phoenixframework/tree-sitter-heex

Using the Tailwind CSS Language Server with HEEx

To get all features (autocomplete, linting, and hover docs) from the Tailwind CSS language server in HEEx files, add the following to your settings file (how to edit):

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "phoenix-heex": "html"
        },
        "experimental": {
          "classRegex": ["class=\"([^\"]*)\"", "class='([^']*)'"]
        }
      }
    }
  }
}

With these settings, you will get completions for Tailwind CSS classes in HEEx template files. Examples:

<%!-- Standard class attribute --%>
<div class="flex items-center <completion here>">
  <p class="text-lg font-bold <completion here>">Hello World</p>
</div>

<%!-- With Elixir expression --%>
<div class={"flex #{@custom_class} <completion here>"}>
  Content
</div>

<%!-- With Phoenix function --%>
<div class={class_list(["flex", "items-center", "<completion here>"])}>
  Content
</div>