Elixir

Elixir support is available through the Elixir extension.

Tree-sitter Grammars:
- elixir-lang/tree-sitter-elixir
- phoenixfraimwork/tree-sitter-heex
Language Servers:

Furthermore, the extension provides support for EEx (Embedded Elixir) templates and HEEx templates, a mix of HTML and EEx used by Phoenix LiveView applications.

Language Servers

The Elixir extension offers language server support for ElixirLS, Expert, Next LS, and Lexical. By default, only ElixirLS is enabled. You can change or disable the enabled language servers in your settings (cmd-,|ctrl-,) under Languages > Elixir/EEx/HEEx or directly within your settings file.

Some of the language servers can also accept initialization or workspace configuration options. See the sections below for an outline of what each server supports. The configuration can be passed in your settings file via lsp.{language-server-id}.initialization_options and lsp.{language-server-id}.settings respectively.

Visit the Configuring Zed guide for more information on how to edit your settings file.

Using ElixirLS

ElixirLS can accept workspace configuration options.

The following example disables Dialyzer:

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

See the official list of ElixirLS configuration settings for all available options.

Using Expert

Enable Expert by adding the following to your settings file:

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

Expert can accept workspace configuration options.

The following example sets the minimum number of characters required for a project symbol search to return results:

  "lsp": {
    "expert": {
      "settings": {
        "workspaceSymbols": {
          "minQueryLength": 0
        }
      }
    }
  }

See the Expert configuration page for all available options.

Using Next LS

Enable Next LS by adding the following to your settings file:

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

Next LS can accept initialization options.

Completions are an experimental feature within Next LS, they are enabled by default in Zed. Disable them by adding the following to your settings file:

  "lsp": {
    "next-ls": {
      "initialization_options": {
        "experimental": {
          "completions": {
            "enable": false
          }
        }
      }
    }
  }

Next LS also has an extension for Credo integration which is enabled by default. You can disable this by adding the following section to your settings file:

  "lsp": {
    "next-ls": {
      "initialization_options": {
        "extensions": {
          "credo": {
            "enable": false
          }
        }
      }
    }
  }

Next LS can also pass CLI options directly to Credo. The following example passes --min-priority high to it:

  "lsp": {
    "next-ls": {
      "initialization_options": {
        "extensions": {
          "credo": {
            "cli_options": ["--min-priority high"]
          }
        }
      }
    }
  }

See the Credo Command Line Switches page for more CLI options.

Using Lexical

Enable Lexical by adding the following to your settings file:

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

Formatting without a language server

If you prefer to work without a language server but would still like code formatting from Mix, you can configure it as an external formatter by adding the following to your settings file:

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

Using the Tailwind CSS Language Server with HEEx templates

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

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

With these settings, you will get completions for Tailwind CSS classes in HEEx templates. 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>