VimのaleプラグインでVueへのESLintを非同期で実行する

はじめに

今回はVueファイルを編集する際にESLintでコード分析をして、ALEというVimプラグインで警告メッセージを表示する設定を行いたいと思います。ついでにPrettierでファイルの保存時に自動フォーマットをさせる設定もまとめておきます。

手順

ESLintインストール

まずはESLintをインストールします。

$ npm install --save eslint eslint-plugin-vue eslint-config-vue

Prettierインストール

先に述べた通りPrettierを実行する訳ではないのですが現プロジェクトの.eslintrc.jsでPrettierの設定ファイルを参照していて、Prettierをインストールしていないと怒られてしまうのでエラー回避のためだけにインストールをします。

必要なプラグインのみをインストールします。インストールするプラグインは.eslintrc.jsに依るのでご自身の環境に合わせてください。
※自分の環境ではESLint@6.8.0を指定していて、最新バージョンのprettier@8~との互換性が悪かったので7.0.0をインストールしました。

$ npm install --save eslint-plugin-pretteir eslint-config-prettier@7.0.0

Vimの設定

.vimrcに下記を記述します。今回Prettierは実行したくないのでfixersは定義していません。

"" ale
let g:ale_linters = {
\   'vue': ['eslint'],
\}
let g:ale_linters_explicit = 1 
let g:airline#extensions#ale#enabled = 1

ここからは保存時にPrettierで整形する設定です。上の設定に追記して下さい。
※厳密にはESLintの拡張機能としてPrettierが実行されていると思われます。

let g:ale_fixers = {
\   'vue': ['eslint'],
\}
let g:ale_fix_on_save = 1

デバッグ方法

もしESLintやPrettierの設定に詰まったら:ALEInfoでログを見て下さい。自分の場合だと複数のリポジトリで異なるプラグインを指定していて(例えばVueではなくNuxtとか)動作していない事があり、ログからデバッグを行いました。

大抵のバグは先人たちが踏んでいてググれば対処法が出てくるかと思いますのでよしなにお願いします。

以上です。

終わりに

勝手にファイルが編集されるのが気に入らなくて、今はPrettierを食わず嫌いしているのですが、正直なところ毎度怒られてから内容を確認するのも手間なのでもしかするとデビューするかもしれないと思うこの頃です。

以前RuboCop(Ruby用のLinter)の結果を今回と同様にALEプラグインで出力する設定をまとめておりますので、興味のある方はそちらもどうぞ。

後日談

別のプロジェクトでNuxt.jsを採用することになり、Nuxt.js用のLinterを設定する必要が発生しました。パーサのbabel-eslintなど.eslintrc.js依存のものも言えますが、互換性の障壁としてeslint@7.19.0以上にしないと、nuxt系のlinterがエラーを起こしたという情報をここに残しておきます。

$ npm install —save eslint@7.19.0
$ npm install --save @nuxtjs/eslint-config
$ npm install --save eslint-plugin-nuxt
$ npm install —save babel-eslint

コメントを残す