LoginSignup
16

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-11

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16