VimでALEを使ってvueファイルにeslintとstylelintを使う

ALEは標準ではJSファイルやCSSファイルにしか対応していません。

Linterなしでコードを書くのは辛いので非同期でlinterを実行してくれるvimのALE上で実行できるように設定しました。

方針としてはeslintやstylelintのプラグインやプロセッサーを通してとりあえずvueファイルに対してeslintとstylelintが実行できるようにします。

その後ALEの設定でvueファイルに対して各々のLinterを実行するようにします。以下がおそらく最小構成です。

$ npm install --save-dev eslint eslint-config-airbnb eslint-config-vue eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-vue stylelint stylelint-config-standard stylelint-processor-html

.eslintrc

---
extends: airbnb
plugins:
- vue

.stylelintrc

---
processors: stylelint-processor-html
extends: stylelint-config-standard

.vimrc

Plug 'w0rp/ale'
Plug 'posva/vim-vue'

let g:ale_linters = {
      \ 'html': [],
      \ 'css': ['stylelint'],
      \ 'javascript': ['eslint'],
      \ 'vue': ['eslint']
      \ }
let g:ale_linter_aliases = {'vue': 'css'}