What It Does
Claude Code currently has no built-in language server protocol (LSP) support for Svelte files. This means when you're working with .svelte components, Claude lacks the code intelligence features you get with other languages: no hover documentation, no go-to-definition, no find references, no document symbols, and no diagnostics.
The svelte-lsp plugin solves this by registering svelte-language-server as the LSP handler for .svelte files. This is the same language server that VS Code uses for Svelte development, giving Claude Code full LSP-powered intelligence for Svelte components.
Setup
Installation takes about 30 seconds:
# Quick install
npx svelte-lsp-claude
# Or manual install
npm install -g svelte-language-server
claude plugin marketplace add RA1NCS/svelte-lsp
claude plugin install svelte-lsp@svelte-lsp
After installation, restart Claude Code. The plugin automatically registers svelteserver --stdio as the LSP server for .svelte files.
Prerequisites:
- Node.js 16+
svelte-language-serverinstalled globally (included in quick install)- Claude Code with plugin support enabled
How It Works
The plugin leverages Claude Code's plugin system, which reads the lspServers field from plugin.json at startup. This maps .svelte file extensions to the Svelte language server, giving Claude the same LSP capabilities you'd expect from a dedicated IDE.
What's particularly useful is that the plugin includes a CLAUDE.md file that instructs Claude to proactively use LSP when working with Svelte files. This means Claude will automatically leverage the language server for:
- Hover documentation: See type information and documentation when hovering over Svelte components and directives
- Go-to-definition: Jump to component definitions with Ctrl+Click
- Find references: Find all usages of a component or variable
- Document symbols: Navigate component structure via outline view
- Diagnostics: Get real-time error checking and warnings
When To Use It
If you're building Svelte or SvelteKit applications with Claude Code, this plugin is essential. The difference is immediately noticeable:
- Component navigation: When Claude suggests using a component, you can now jump directly to its definition
- Error prevention: Get diagnostics before running code
- Learning Svelte: Hover docs help understand Svelte-specific syntax and APIs
- Refactoring: Find references makes renaming components safe and easy
Without this plugin, Claude treats .svelte files as plain text with some syntax highlighting. With it, you get full IDE-level intelligence that makes Svelte development in Claude Code comparable to VS Code.
The plugin is MIT licensed and open source, so you can inspect the implementation or contribute improvements. Given how quickly the Claude Code ecosystem is evolving, community plugins like this are becoming essential for language-specific workflows.
