jamesbirtlesjamesbirtles
97

Svelte Language Server

screenshot of Svelte Language Server
svelte

A WIP language server for Svelte

Github

Overview

The Svelte Language Server is a language server protocol implementation that provides language-specific support for the Svelte framework. It allows editor and addon developers to add features such as diagnostics, auto-complete, and formatting to any editor without reinventing the wheel.

Features

  • Diagnostic messages: Provides warning and error messages specific to Svelte.
  • Svelte specific formatting: Supports formatting code using the prettier-plugin-svelte.
  • HTML support: Includes support for HTML code using the vscode-html-languageservice.
  • Hover info: Provides information on hover for Svelte code.
  • Autocompletions: Offers suggestions for code completions.
  • Emmet support: Integration with Emmet for faster HTML and CSS coding.
  • Symbols in Outline panel: Displays symbols in the outline panel for easy navigation.
  • CSS / SCSS / LESS support: Supports CSS, SCSS, and LESS code using the vscode-css-languageservice.
  • TypeScript / JavaScript support: Provides diagnostics, hover info, formatting, symbols, and code actions for TypeScript and JavaScript using TypeScript.

VS Code

  1. Open VS Code
  2. Go to the extensions panel (Ctrl + Shift + X)
  3. Search for "Svelte Language Server" and click install

Atom

  1. Open Atom
  2. Go to the package manager (Ctrl + Shift + P)
  3. Search for "Svelte Language Server" and click install

(Neo)Vim

  1. Open (Neo)Vim
  2. Install a plugin manager if you don't have one already (e.g., Plug, Vundle)
  3. Add the following line to your vimrc: 
    Plug 'sveltejs/language-tools', { 'do': 'yarn install --lock-file', 'for': 'svelte' }
  4. Run :PlugInstall to install the plugin

Summary

The Svelte Language Server is a powerful tool for Svelte developers that allows for language-specific features and smart support in any editor. With support for diagnostics, formatting, autocompletions, and more, it enhances the development experience for Svelte projects. By providing a plugin for popular editors like VS Code, Atom, and (Neo)Vim, it ensures easy installation and usage for developers.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.