Fixing Svelte LSP Indexing in Helix

Prelude

If you are using the helix editor - which is an awesome piece of software btw. - to work in a Svelte project, and find that your LSP auto-imports aren't working, here might be a quick fix.

The problem

As I started learning Svelte, I quickly realized that the LSP is not working correctly. Specifically, I only received import suggestions AFTER manually opening a file. It seemed as if the LSP would only index files on-demand, which is pretty useless for a large project (even a small one). My configuration appeared correct. I skimmed through all the config files svelte.config.js, tsconfig.json, vite.config.ts trying every suggestion Google was spitting out for me. Unfortunately, nothing worked.

The explanation

I created the project with Vite using the command pnpm create vite ${project_name} --template svelte-ts. This created the project structure with the following files:

• tsconfig.json
• tsconfig.app.json
• tsconfig.node.json

And tsconfig.json had the following content:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

Okay, honestly this way of configuring the tsconfig file was new to me and I didn't know that you can split your config and reference them. TIL I guess, yay!

Now the problem, I am assuming, is that the svelteserver is looking for the include property in the tsconfig.json file, which it doesn't find, of course. This leads to the problem, that the LSP can not build the dependency graph of the project.

The include property is in the tsconfig.app.json

{
	"extends": "@tsconfig/svelte/tsconfig.json",
	"compilerOptions": {
      ...
	},
	"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

The solution

To fix it we can just create the following file in the root folder .helix/languages.toml with the following content:

[language-server.svelteserver.config.typescript]
tsconfigPath = "./tsconfig.app.json"