vim-svelte

Vim syntax highlighting and indentation for Svelte 3 components.

This is mostly just HTML syntax highlighting with some keywords added and all expressions inside of { and } highlighted as JavaScript.

Highlighting includes:

HTML attributes with a colon like on:click or transition:fade highlighted as Keyword.
#if, /if, :else, and :else if highlighted as Conditional.
#await, /await, :catch, :then, and @html highlighted as Keyword.
#each and /each highlighted as Repeat.

Dependencies

The JavaScript highlighting depends on pangloss/vim-javascript. That ships with sheerun/vim-polyglot so if you're already using that then you should be set.

Installation

The simplest way to install vim-svelte is via a package manager like Pathogen, Vundle, NeoBundle, Plug, or minpac. I personally use minpac, but it shouldn't matter whatsoever.

For example, using minpac:

call minpac#add('evanleck/vim-svelte')

Or using Plug:

Plug 'evanleck/vim-svelte'

vim-svelte should work just fine with Vim 8's native package loading as well.

Options

To disable indentation within <script> and <style> tags, set one of these variables in your vimrc:

let g:svelte_indent_script = 0
let g:svelte_indent_style = 0

Integrations

matchit.vim: vim-svelte should work out of the box and allow moving between HTML tags as well as flow control like #if/:else//if.
ALE: vim-svelte should work out of hte box with eslint and a few other linters/fixers. PRs welcome if the one you want is missing.

Tests

Indentation tests are provided and any contributions would be much appreciated. They can be run with make test which will clone vader.vim into the current working directory and run the test suite.

Alternatives

burner/vim-svelte

davidroeca / vim-svelte