Elixir

Elixir support is available through the Elixir extension.

Tree-sitter:
- elixir-lang/tree-sitter-elixir
- phoenixframework/tree-sitter-heex
Language servers:

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

To switch to expert, add the following to your settings.json:

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

Next LS

To switch to next-ls, add the following to your settings.json:

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

Lexical

To switch to lexical, add the following to your settings.json:

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

Setting up `elixir-ls`

Install elixir:

brew install elixir

Install elixir-ls:

brew install elixir-ls

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, use the following snippet in your settings.json file to configure it as an external formatter. Formatting will occur on file save.

{
  "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 settings.json.

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 the features (autocomplete, linting, etc.) from the Tailwind CSS language server in HEEx files, you need to configure the language server so that it knows about where to look for CSS classes by adding the following to your settings.json:

{
  "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>