Vim
Vue.js

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

More than 1 year has passed since last update.

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'}