Svelte & Typescript LSP Errors

[Proziam]

Summary

Same issue on Windows running helix in powershell 7.4.1 and Arch linux (not in WSL).

I've been running into consistent errors when working with svelte (current, not svelte 5). Lots of "expected" a token where no such token would make sense, or syntax highlighting gives up in random places even in very short documents which leaves 50% or more of the text plain.

I've tried re-installing and updating the TS and Svelte language servers per the documentation - https://github.com/helix-editor/helix/wiki/How-to-install-the-default-language-servers. And I've tried completely deleting any configuration in languages.toml to no avail.

For a sanity check I installed VScode and didn't experience the same issues so I'm probably just doing something wrong.

Reproduction Steps

I tried this:

1. hx in some svelte project
2. Write some code or move some stuff around
3. Syntax highlighting or incorrect errors appear
4. reload-config (sometimes works)
5. LSP restart (sometimes works)

I expected this to happen:
Syntax highlighting to work normally and not to see random errors

Instead, this happened:
Syntax highlighting breaks, random errors pop up on correct code

Helix log

~/.cache/helix/helix.log

2024-02-12T18:09:35.207 helix_term::application [ERROR] received malformed notification from Language Server: Unhandled
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "SnapshotManager File Statistics:\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Project files: 74\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Svelte files: 28\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "From node_modules: 474\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Total: 553\n"
2024-02-12T18:27:39.446 helix_term::application [ERROR] received malformed notification from Language Server: Unhandled
...
2024-02-12T21:10:24.125 helix_lsp::transport [ERROR] svelteserver err <- "CompileError [ParseError]: Expected =\n"
2024-02-12T21:10:24.125 helix_lsp::transport [ERROR] svelteserver err <- "  3 | \tid=\"companies\"\n"
2024-02-12T21:10:24.125 helix_lsp::transport [ERROR] svelteserver err <- "  4 | \tcla\t<div class=\"mx-auto max-w-7xl\">\n"
...
2024-02-12T17:42:09.180 helix_lsp::transport [ERROR] Tried sending response into a closed channel (id=Num(146)), original request likely timed out
2024-02-12T17:42:47.033 helix_lsp::transport [ERROR] Tried sending response into a closed channel (id=Num(159)), original request likely timed out
2024-02-12T17:42:47.184 helix_lsp::transport [ERROR] Tried sending response into a closed channel (id=Num(160)), original request likely timed out
2024-02-12T17:42:47.311 helix_lsp::transport [ERROR] Tried sending response into a closed channel (id=Num(161)), original request likely timed out
2024-02-12T17:42:59.502 helix_lsp::transport [ERROR] svelteserver err <- "SnapshotManager File Statistics:\n"
2024-02-12T17:42:59.502 helix_lsp::transport [ERROR] svelteserver err <- "Project files: 74\n"
2024-02-12T17:42:59.502 helix_lsp::transport [ERROR] svelteserver err <- "Svelte files: 28\n"
2024-02-12T17:42:59.502 helix_lsp::transport [ERROR] svelteserver err <- "From node_modules: 474\n"
2024-02-12T17:42:59.502 helix_lsp::transport [ERROR] svelteserver err <- "Total: 553\n"
2024-02-12T18:09:29.765 helix_lsp::transport [ERROR] svelteserver err: <- StreamClosed
2024-02-12T18:09:29.765 helix_lsp::transport [ERROR] tailwindcss err: <- StreamClosed
2024-02-12T18:09:29.765 helix_lsp::transport [ERROR] typescript-language-server err: <- StreamClosed
2024-02-12T18:09:34.349 helix_lsp::transport [ERROR] svelteserver err <- "Initialize language server at  file:///C:/Users/Proziam/code/...\n"
2024-02-12T18:09:34.365 helix_lsp::transport [ERROR] svelteserver err <- "Initialize new ts service at  c:/Users/Proziam/code/.../tsconfig.json\n"
2024-02-12T18:09:34.384 helix_lsp::transport [ERROR] svelteserver err <- "Trying to load configs for c:/Users/Proziam/code/...\n"
2024-02-12T18:09:35.001 helix_lsp::transport [ERROR] svelteserver err <- "Loaded config at  c:\\Users\\Proziam\\code\\...\\svelte.config.js\n"
2024-02-12T18:09:35.021 helix_lsp::transport [ERROR] svelteserver err <- "SnapshotManager File Statistics:\n"
2024-02-12T18:09:35.021 helix_lsp::transport [ERROR] svelteserver err <- "Project files: 74\n"
2024-02-12T18:09:35.021 helix_lsp::transport [ERROR] svelteserver err <- "Svelte files: 28\n"
2024-02-12T18:09:35.021 helix_lsp::transport [ERROR] svelteserver err <- "From node_modules: 0\n"
2024-02-12T18:09:35.021 helix_lsp::transport [ERROR] svelteserver err <- "Total: 74\n"
2024-02-12T18:09:35.207 helix_term::application [ERROR] received malformed notification from Language Server: Unhandled
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "SnapshotManager File Statistics:\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Project files: 74\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Svelte files: 28\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "From node_modules: 474\n"
2024-02-12T18:27:15.889 helix_lsp::transport [ERROR] svelteserver err <- "Total: 553\n"
2024-02-12T18:27:39.446 helix_term::application [ERROR] received malformed notification from Language Server: Unhandled
2024-02-12T18:33:42.395 helix_lsp::transport [ERROR] typescript-language-server err: <- StreamClosed
2024-02-12T18:33:42.395 helix_lsp::transport [ERROR] tailwindcss err: <- StreamClosed
2024-02-12T18:33:42.395 helix_lsp::transport [ERROR] err: <- Other(failed to send a message to server

Platform

Windows / Linux

Terminal Emulator

Powershell 7.4.1 and Wezterm

Installation Method

Winget and built from source, AUR on Arch

Helix Version

23.10

[valerio-pescatori]

why was this converted into a discussion? @the-mikedavis
Btw I think I'm having the same problem on macOS:

the syntax highlight for types outside of function does not seem to work properly, I also have a couple of colleagues who have the same problem.

this is my language config for svelte:

[[language]]
name = "svelte"
auto-format = true
language-servers = [ { name = "tailwindcss-ls", except-features = ["hover"] }, "svelteserver", "emmet-ls", "eslint-ls" ]
formatter = { command = "prettier", args = ["--parser", "html"]}

and this is my hx --health svelte:

Configured language servers:
  ✓ tailwindcss-language-server: /Users/valerio.pescatori/.volta/bin/tailwindcss-language-server
  ✓ svelteserver: /Users/valerio.pescatori/.volta/bin/svelteserver
  ✓ emmet-language-server: /Users/valerio.pescatori/.volta/bin/emmet-language-server
  ✓ vscode-eslint-language-server: /Users/valerio.pescatori/.volta/bin/vscode-eslint-language-server
Configured debug adapter: None
Highlight queries: ✓
Textobject queries: ✘
Indent queries: ✓

I also have the "typescript-svelte-plugin" installed and configured inside my tsconfig.json.

does anybody else have the same issues?

[the-mikedavis]

We use discussions for bug reports that need further debugging to determine whether it's a bug within Helix or the language server or tree-sitter parser.

I do see the bug in the snippet you attached - thanks for the example! We're treating that block like javascript because these patterns in the injections.scm queries are out of order:

helix/runtime/queries/svelte/injections.scm

Lines 22 to 37 in 062fb81

	((script_element
	(raw_text) @injection.content)
	(#set! injection.language "javascript"))
	((raw_text_expr) @injection.content
	(#set! injection.language "javascript"))
	(
	(script_element
	(start_tag
	(attribute
	(quoted_attribute_value (attribute_value) @_lang)))
	(raw_text) @injection.content)
	(#match? @_lang "(ts|typescript)")
	(#set! injection.language "typescript")
	)

I will post a patch once the current github outage subsides (edit: #9777)

[valerio-pescatori]

We use discussions for bug reports that need further debugging to determine whether it's a bug within Helix or the language server or tree-sitter parser.

Oh thanks! I did not know that 😄 .
Also thank you for the quick reply and for the amazing work on this project 🔥

[Antonio-Bennett]

@valerio-pescatori Hey sorry to hijack, how do you setup eslint currently? In helix I do not see any of the eslint diagnostics so when I run lint from cli I see a bunch of warnings or errors from rules I cannot see while coding

[valerio-pescatori]

@Antonio-Bennett you need to install this package: https://github.com/hrsh7th/vscode-langservers-extracted
It includes 4 lsps extracted from vscode including vscode-eslint-language-server.

Once installed you need to adjust your language.toml for eslint to work with your desired language, I have an example here that adds the vscode-eslint-language-server lsp to js, ts, jsx, tsx, html, css and scss files.