Overview of current features of language server + limitations

[dummdidumm]

This is an overview of the current state of the svelte-language-server - what it already can do, what it cannot, yet. If you feel a feature is missing or something that should work according to this list does not work, open a new issue.

HTML

autocompletion / auto imports

• autocompletion for normal html tags
• autocompletion for special svelte tags like <svelte:window>
• autocompletion for special svelte tags like #await

hover info

• hover info for normal html tags
• hover info for special svelte tags like <svelte:window>
• hover info for special svelte tags like #await

CSS

• support for CSS/Less/SCSS

autocompletion / auto imports

• autocompletion for css tags
• autocompletion for :global tag
• autocompletion for ids/classes/svelte component tags in css that are present in template (Class completion for CSS #84)
• autocompletion for ids/classes in template that are present in css (completion for ids/classes in the template #844, for CSS/Less/SCSS)
• autocompletion for ids/classes in template moustache tags like class that are present in css (completion for ids/classes in the template #844)

hover info

• hover info for css tags

go to definition

• go to definition from class in template to css
• go to definition from class in template moustache tags like class to css
• go to definition from css to template

Javascript / Typescript

• semantic highlighting (Add support for Semantic Highlighting (Tokens) #71)
• show svelte parser/compiler warnings/errors
• typescript-support for $-syntax ($: ... and $variableSubcribeShortHand) ((feat) add svelte2tsx for better ts support #57)

go to definition

• go to definition within script
• go to definition to non-svelte file
• go to definition from template to script ((feat) add svelte2tsx for better ts support #57)
• go to definition from component-tag to component ((feat) add svelte2tsx for better ts support #57)
• go to definition from component-property in template to component ((feat) add svelte2tsx for better ts support #57)

typechecking

• typechecking capabilities for script
• typechecking capabilities for component props ((feat) add svelte2tsx for better ts support #57)
• typechecking capabilities for component events (Discussion: How can we type the events supported by a component #424)
• support for //@ts-check / //@ts-nocheck
• JSDoc support
• correct component types (Show exported functions in auto-complete menu #307)

autocompletion / auto imports

• autocompletion/autoimport inside script
• autocomplete/autoimport of svelte component inside template ((feat) add svelte2tsx for better ts support #57)
• autocomplete of svelte component props ((feat) add svelte2tsx for better ts support #57)
• autocomplete of svelte component events from Svelte file
• autocomplete of svelte component events from d.ts definition ((feat) event completion/hover for components with a type definition #1057)

code actions

• organize imports support (organizeImports not working in vs-code #72)
• rename function/variable inside of svelte files (Support rename in Svelte files #110)
• rename function/variable outside of svelte but affecting svelte files (Support rename in Svelte files #110)
• rename svelte component default import (Support rename in Svelte files #110)
• rename svelte component prop of component A in component A (Support rename in Svelte files #110)
• rename svelte component prop of component A in component B (Support rename in Svelte files #110)
• rename/move svelte file and update imports (Support rename/move of Svelte files #111)
• extract into const/function ((feat) add extract into const/function refactorings #230)
• find references (VSCode: Implement reference browser command (editor.action.referenceSearch.trigger) #566)

Cross-cutting

• expand selection (Expand selection in VS Code doesn’t work correctly while the language mode is svelte. #556)

code-actions

• simple extract into component (Ability to extract Svelte HTML into a component #187)
• extract into component with semantic analysis what to extract (Ability to extract Svelte HTML into a component #187)

Limitations

The compiler is not designed for an editor.

See sveltejs/svelte#4818.

During editing, the likelihood that the code is invalid is very high. But the svelte compiler is designed to throw syntax errors to warn the user. Thus the features that rely on the svelte compiler won't work when there's a syntax error.

We did consider writing a dedicated parser for the editor but that seems to be too much work and maintenance burden. So it's not a priority, but we don't say it won't ever happen.

TypeScript language service is synchronous.

The Typescript's language service is mostly synchronous so we can't preprocess code before handing it off to svelte2tsx, because that's asynchronous (#339). That hinders features such as better Pug support. That's also one of the big roadblocks of eslint-plugin-svelte3. A svelte.preprocessSync might help, but was decided against for now.

Another problem that arises from the synchronous language service is the effort required to implement a TypeScript plugin (#580) which would help crossing the boundaries of TS/JS/Svelte and enable features such as "start rename in a TS file, Svelte files get updated, too". Even if we ignore preprocessing, the process of intellisense is still asynchronous because we use source-map to map the source code positions which is asynchronous.