Mastodon hachyterm.io

Vim and Svelte.js

Yesterday I explained how you can add linting and formatting support for Svelte.js with ESLint and Prettier. But how can you integrate it …

Last modified:

Yesterday I explained how you can add linting and formatting support for Svelte.js with ESLint and Prettier.

But how can you integrate it into (Neo)Vim and ALE?

1. Installation

  1. Follow the steps here to get up and running with ESLint and Prettier.
  2. Install ALE with your favorite Vim plugin manager (I use minpac).
  3. optional: Install burner/vim-svelte for syntax highlighting.

2. Configuration

There is no native support for .svelte files but you can define an alias.

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

Now, files with a .svelte extension will use the linters for CSS and JavaScript. Then it uses the linters you defined in the ale linters object.

You can also set up fixers (see above). I like to use prettier amongst others.

You have to install these tools globally (via npm) or locally in your project, if you want to use them. ALE won’t install them for you. The configuration file above tells ALE what linters to run, but if they’re not available on your system, they won’t work.

3. How to Use

If you run :ALEFix or :ALELint in (Neo)Vim, ALE should work.

I suggest customizing ALE to run when you save a file:

let g:ale_lint_on_save = 1
let g:ale_fix_on_save = 1
let g:ale_lint_on_enter = 0
let g:ale_lint_on_text_changed = 'never'