All Articles

Vim and Svelte

While looking how to configure Vim for Svelte development I have found an article by Sophia Brandt (here: https://www.rockyourcode.com/vim-and-svelte-js/). While it is good I found it not enough in my situation.

I am using Vim with Ale and Deoplete. You can find my full .vimrc here: https://github.com/daliusd/cfg/blob/master/.vimrc

For proper syntax highlighting I have used evanleck plugin:

Plug 'evanleck/vim-svelte'

In order to have proper Ale configuration I have added following:

let g:ale_linter_aliases = {'svelte': ['css', 'javascript']}
let g:ale_linters = {'svelte': ['stylelint', 'eslint']}
let g:ale_fixers = {
...
\   'svelte': ['prettier', 'eslint'],
\}

This not only lints my code but automatically formats and fixes it.

The last part was to configure Deoplete (so I could have proper autocomplete).

For this I have to add context_filetype.vim plugin:

Plug 'Shougo/context_filetype.vim'

… and configure it …

if !exists('g:context_filetype#same_filetypes')
    let g:context_filetype#filetypes = {}
endif
let g:context_filetype#filetypes.svelte =
            \ [
            \    {'filetype' : 'javascript', 'start' : '<script>', 'end' : '</script>'},
            \    {'filetype' : 'css', 'start' : '<style>', 'end' : '</style>'},
            \ ]

For CSS auto-completion to work you need to add this:

call deoplete#custom#var('omni', 'functions', {
\ 'css': ['csscomplete#CompleteCSS']
\})

Read more about this in context_types issue 39. Now I have full development environment for Svelte emoji-relaxed