svelte-ts-mode Svelte Themes

Svelte Ts Mode

Svelte tree-sitter mode

An Emacs tree-sitter major mode for .svelte files.

It requires

  • Emacs (>= emacs-major-version 29) with tree-sitter support.

Upstream grammars:

Example language-source-alist for treesit-language-source-alist can be found in svelte-ts-mode-language-source-alist constant in svelte-ts-mode.el

You can use command M-x treesit-install-language-grammar to install these grammars once you have configured them in your treesit-language-source-alist.

Installation

[!CAUTION] Still in early development.

  • MELPA

    Not ready yet.

  • Elpaca

    (use-package svelte-ts-mode
      :ensure (:host github :repo "leafOfTree/svelte-ts-mode"))
    
  • Manually

    git clone https://github.com/leafOfTree/svelte-ts-mode --depth 1
    
    ; ~/.emacs
    (add-to-list 'load-path "/path/to/svelte-ts-mode")
    (require 'svelte-ts-mode)
    

    For Spacemacs, put them inside dotspacemacs/user-config.

    ; ~/.spacemacs
    (defun dotspacemacs/user-config ()
          
    (add-to-list 'load-path "/path/to/svelte-ts-mode")
    (require 'svelte-ts-mode)
    

Example Configuration

(use-package svelte-ts-mode
  :after eglot
  :ensure (:host github :repo "leafOfTree/svelte-ts-mode")
  :config
  (add-to-list 'eglot-server-programs '(svelte-ts-mode . ("svelteserver" "--stdio"))))

Tips

Set project-wide indentation offset for different languages

Create .dir-locals.el at the project root directory, and write content like the following into it:

;;; Directory Local Variables         -*- no-byte-compile: t; -*-
;;; For more information see (info "(emacs) Directory Variables")

((nil . ((typescript-ts-mode-indent-offset . 4)
         (js-indent-level . 4)
         (css-indent-offset . 4)
         (svelte-ts-mode-indent-offset . 2))))

This ensures indentation for a specific language(e.g. typescript) between its major mode and svelte-ts-mode are the same.

Credits

Inspired by mhtml-ts-mode

Top categories

Loading Svelte Themes