docs: Rework Elixir docs (#52421)
## Context - Mention support for EEx templates - Rearranges a few sections (HEEx, `elixir-ls` workspace configuration) - Corrects naming of HEEx and mention that language server configurations also need to be applied to it (and EEx) - Removes unnecessary instructions for how to install `elixir-ls` - the extension has been able to do this on its own for a long time; additionally, these instructions were very macOS-specific - Demonstrates how to pass initialization options to `next-ls` and workspace configuration options to `expert` - Rewords the formatting with Mix section - all language servers already use Mix for code formatting, so these instructions are only useful if you work _without_ a language server - Adjust Tailwind LSP configuration instructions ## How to Review Check for typos and that the wording/structure of the new/reworded sections is also good. Release Notes: - N/A --------- Co-authored-by: Finn Evers <finn.evers@outlook.de>
This commit is contained in:
AltCodeandFinn Evers authored and GitHub committed
1 parent
66c86da881
commit
2586a322fd
2 files changed
+182
-102
No files matched your search
+181
-101
@@ -7,111 +7,30 @@ description: "Configure Elixir language support in Zed, including language serve
|
||||
|
||||
Elixir support is available through the [Elixir extension](https://github.com/zed-extensions/elixir).
|
||||
|
||||
- Tree-sitter:
|
||||
- Tree-sitter Grammars:
|
||||
- [elixir-lang/tree-sitter-elixir](https://github.com/elixir-lang/tree-sitter-elixir)
|
||||
- [phoenixframework/tree-sitter-heex](https://github.com/phoenixframework/tree-sitter-heex)
|
||||
- Language servers:
|
||||
- Language Servers:
|
||||
- [elixir-lang/expert](https://github.com/elixir-lang/expert)
|
||||
- [elixir-lsp/elixir-ls](https://github.com/elixir-lsp/elixir-ls)
|
||||
- [elixir-tools/next-ls](https://github.com/elixir-tools/next-ls)
|
||||
- [lexical-lsp/lexical](https://github.com/lexical-lsp/lexical)
|
||||
|
||||
## Choosing a language server
|
||||
Furthermore, the extension provides support for [EEx](https://hexdocs.pm/eex/EEx.html) (Embedded Elixir) templates and [HEEx](https://hexdocs.pm/phoenix/components.html#heex) templates, a mix of HTML and EEx used by Phoenix LiveView applications.
|
||||
|
||||
The Elixir extension offers language server support for `expert`, `elixir-ls`, `next-ls`, and `lexical`.
|
||||
## Language Servers
|
||||
|
||||
`elixir-ls` is enabled by default.
|
||||
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 ({#kb zed::OpenSettings}) under Languages > Elixir/EEx/HEEx or directly within your settings file.
|
||||
|
||||
### Expert
|
||||
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.
|
||||
|
||||
Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > Elixir, or add to your settings file:
|
||||
Visit the [Configuring Zed](../configuring-zed.md#settings-files) guide for more information on how to edit your settings file.
|
||||
|
||||
```json [settings]
|
||||
"languages": {
|
||||
"Elixir": {
|
||||
"language_servers": ["expert", "!elixir-ls", "!next-ls", "!lexical", "..."]
|
||||
},
|
||||
"HEEX": {
|
||||
"language_servers": ["expert", "!elixir-ls", "!next-ls", "!lexical", "..."]
|
||||
}
|
||||
}
|
||||
```
|
||||
### Using ElixirLS
|
||||
|
||||
### Next LS
|
||||
ElixirLS can accept workspace configuration options.
|
||||
|
||||
Configure language servers in Settings ({#kb zed::OpenSettings}) under Languages > Elixir, or add to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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 ({#kb zed::OpenSettings}) under Languages > Elixir, or add to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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`:
|
||||
|
||||
```sh
|
||||
brew install elixir
|
||||
```
|
||||
|
||||
2. Install `elixir-ls`:
|
||||
|
||||
```sh
|
||||
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`](https://hex.pm). 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](https://hexdocs.pm/mix/Mix.html), configure it as an external formatter. Formatting will occur on file save.
|
||||
|
||||
Configure formatting in Settings ({#kb zed::OpenSettings}) under Languages > Elixir, or add to your settings file:
|
||||
|
||||
```json [settings]
|
||||
{
|
||||
"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](../configuring-zed.md#settings-files)).
|
||||
|
||||
The following example disables dialyzer:
|
||||
The following example disables [Dialyzer](https://github.com/elixir-lsp/elixir-ls#dialyzer-integration):
|
||||
|
||||
```json [settings]
|
||||
"lsp": {
|
||||
@@ -123,25 +42,182 @@ The following example disables dialyzer:
|
||||
}
|
||||
```
|
||||
|
||||
See [ElixirLS configuration settings](https://github.com/elixir-lsp/elixir-ls#elixirls-configuration-settings) for more options.
|
||||
See the official list of [ElixirLS configuration settings](https://github.com/elixir-lsp/elixir-ls#elixirls-configuration-settings) for all available options.
|
||||
|
||||
### HEEx
|
||||
### Using Expert
|
||||
|
||||
Zed also supports HEEx templates. HEEx is a mix of [EEx](https://hexdocs.pm/eex/1.12.3/EEx.html) (Embedded Elixir) and HTML, and is used in Phoenix LiveView applications.
|
||||
Enable Expert by adding the following to your settings file:
|
||||
|
||||
- Tree-sitter: [phoenixframework/tree-sitter-heex](https://github.com/phoenixframework/tree-sitter-heex)
|
||||
```json [settings]
|
||||
"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", "..."]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Using the Tailwind CSS Language Server with HEEx
|
||||
Expert can accept workspace configuration options.
|
||||
|
||||
To get all features (autocomplete, linting, and hover docs) from the [Tailwind CSS language server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) in HEEx files, add the following to your settings file ([how to edit](../configuring-zed.md#settings-files)):
|
||||
The following example sets the minimum number of characters required for a project symbol search to return results:
|
||||
|
||||
```json [settings]
|
||||
"lsp": {
|
||||
"expert": {
|
||||
"settings": {
|
||||
"workspaceSymbols": {
|
||||
"minQueryLength": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Expert configuration](https://expert-lsp.org/docs/configuration/) page for all available options.
|
||||
|
||||
### Using Next LS
|
||||
|
||||
Enable Next LS by adding the following to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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:
|
||||
|
||||
```json [settings]
|
||||
"lsp": {
|
||||
"next-ls": {
|
||||
"initialization_options": {
|
||||
"experimental": {
|
||||
"completions": {
|
||||
"enable": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Next LS also has an extension for [Credo](https://hexdocs.pm/credo/overview.html) integration which is enabled by default. You can disable this by adding the following section to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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:
|
||||
|
||||
```json [settings]
|
||||
"lsp": {
|
||||
"next-ls": {
|
||||
"initialization_options": {
|
||||
"extensions": {
|
||||
"credo": {
|
||||
"cli_options": ["--min-priority high"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Credo Command Line Switches](https://hexdocs.pm/credo/suggest_command.html#command-line-switches) page for more CLI options.
|
||||
|
||||
### Using Lexical
|
||||
|
||||
Enable Lexical by adding the following to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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](https://hexdocs.pm/mix/Mix.html), you can configure it as an external formatter by adding the following to your settings file:
|
||||
|
||||
```json [settings]
|
||||
"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](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) in HEEx templates, add the following to your settings file:
|
||||
|
||||
```json [settings]
|
||||
{
|
||||
"lsp": {
|
||||
"tailwindcss-language-server": {
|
||||
"settings": {
|
||||
"includeLanguages": {
|
||||
"phoenix-heex": "html"
|
||||
"elixir": "html",
|
||||
"heex": "html"
|
||||
},
|
||||
"experimental": {
|
||||
"classRegex": ["class=\"([^\"]*)\"", "class='([^']*)'"]
|
||||
@@ -149,10 +225,9 @@ To get all features (autocomplete, linting, and hover docs) from the [Tailwind C
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With these settings, you will get completions for Tailwind CSS classes in HEEx template files. Examples:
|
||||
With these settings, you will get completions for Tailwind CSS classes in HEEx templates. Examples:
|
||||
|
||||
```heex
|
||||
<%!-- Standard class attribute --%>
|
||||
@@ -170,3 +245,8 @@ With these settings, you will get completions for Tailwind CSS classes in HEEx t
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Erlang](./erlang.md)
|
||||
- [Gleam](./gleam.md)
|
||||
@@ -15,7 +15,7 @@ Languages which can be used with Tailwind CSS in Zed:
|
||||
- [CSS](./css.md)
|
||||
- [ERB](./ruby.md#using-the-tailwind-css-language-server-with-ruby)
|
||||
- [Gleam](./gleam.md)
|
||||
- [HEEx](./elixir.md#using-the-tailwind-css-language-server-with-heex)
|
||||
- [HEEx](./elixir.md#using-the-tailwind-css-language-server-with-heex-templates)
|
||||
- [HTML](./html.md#using-the-tailwind-css-language-server-with-html)
|
||||
- [TypeScript](./typescript.md#using-the-tailwind-css-language-server-with-typescript)
|
||||
- [JavaScript](./javascript.md#using-the-tailwind-css-language-server-with-javascript)
|
||||
|
||||
Reference in new issue
Block a user