Emmet support

[aral]

Emmet is a productivity boost when working with HTML.

It’s one of those things I feel I will miss from VSCode.

I have no idea how difficult/feasible it would be to implement.

[sudormrfbin]

There are some Emmet LSPs from a cursory search, so I suppose when snippet support (#395) lands it'll be as easy as setting the LSP. Though right now we only allow a single LSP per buffer so that might need some overhaul to allow both the Emmet server and HTML server to work together. Alternatively i wonder if the HTML server has built-in support for Emmet.

[aral]

@sudormrfbin Unless I’m missing something at least VSCodes HTML LSP doesn’t seem to have Emmet included. I did find https://github.com/aca/emmet-ls but I haven’t tested it.

I did notice with the VSCode HTML LSP in Helix that some completions don’t work properly. e.g., <label fo[completion] results in <label for="$1">. (Not sure where to open a bug for that as the HTML LSP is currently not included.)

[sudormrfbin]

The $1 is probably a snippet cursor placeholder, though I'm not sure why it's getting inserted verbatim if it's a snippet.

[ItsEthra]

I have the same issue, whenever helix autocompletes tag it inserts $0, any way to fix it?

[iljarotar]

@aral thanks for suggesting emmet-ls. It works perfectly with html and since #2507 it's even possible to combine it with the typescript-language-server and make it work for tsx and jsx files as well. That's great!

[in0ni]

@aral thanks for suggesting emmet-ls. It works perfectly with html and since #2507 it's even possible to combine it with the typescript-language-server and make it work for tsx and jsx files as well. That's great!

Hello @iljarotar,

I've been using the multi lsp patch for some time, have a few lsp's configured but cannot get emmet-ls working, would you mind sharing your config? I am surely missing something, just setting the emmet-ls command, no args/config.

EDIT:
Ok -- so shortly after posting this, I saw that it started as a vscode plugin, so figured I needed the argument. This works:

[language-server.emmet-ls]
args = ["--stdio"]
command="emmet-ls"

[neilyio]

I can also confirm that I've got emmet-ls mostly working with this snippet in my languages.toml:

[language-server.emmet-ls]
args = ["--stdio"]
command="emmet-ls"

[[language]]
name = "html"
language-servers = ["vscode-html-language-server", "emmet-ls"]

...however, I'm noticing that upon selecting an Emmet completion, I get an "unhandled method" error for completionItem/resolve. I believe this is because emmet-ls is reporting to have the resolveProvider capability, but doesn't actually implement completionItem/resolve.

I've opened a PR here to emmet-ls to set resolveProvider: false, which keeps helix from making the LSP call that fails on the unimplemented method.

Please add to the conversation on that PR if you have more context on the right way to handle completionItem/resolve.

[gabydd]

Another option is https://github.com/olrtg/emmet-language-server I haven't tried it personally yet but it is included in nvim-lspconfig(which is how I found it)

[in0ni]

Another option is https://github.com/olrtg/emmet-language-server I haven't tried it personally yet but it is included in nvim-lspconfig(which is how I found it)

Nice find, looks like a good approach will probably give it a try in the next few days. Recent setup with emmet-ls works well, but not using it heavily.

[dawkrish]

nor my typescript-language-server, nor vscode-html-server, works
they are installed in path

[zvxvx]

Another option is https://github.com/olrtg/emmet-language-server I haven't tried it personally yet but it is included in nvim-lspconfig(which is how I found it)

Works great. Just waiting for surround to support enough chars to trigger emmet's tags so wrapping elements can be a breeze.

[BambooRaptor]

I can't seem to get my languages.toml file to compile. I've tried following the docs and the snipped posted on here by @neilyio

This is what it looks like:

[language-server.emmet-ls]
args = ["--stdio"]
command = "emmet-ls"

[[language]]
name = "html"
language-servers = ["vscode-html-language-server", "emmet-ls"]

And it keeps throwing this error:

Bad language config: unknown field `language-servers`, expected one of `name`, `scope`, `file-types`, `shebangs`, `roots`, `comment-token`, `text-width`, `soft-wrap`, `config`, `auto-format`, `formatter`, `diagnostic-severity`, `grammar`, `injection-regex`, `language-server`, `indent`, `debugger`, `auto-pairs`, `rulers`, `workspace-lsp-roots`
in `language`

[iljarotar]

@BambooRaptor it looks to me like you are using an older version of helix. The field language-servers was called language-server, before multiple language servers were supported.

[BambooRaptor]

@iljarotar praise the lord! You were right! I had helix double installed from chocolatey and winget and while the winget version is 24.07 (latest as far as I can tell), chocolatey version was 23.03 which is wha the path was picking up! Thanks!