dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする

(2016/10/24追記)
しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。

(追記ここまで)

はじめに

vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じるようになります。
Syntastic はそのための vimプラグインで、JavaScript に限らず様々な言語の構文チェックを行うことが可能です。

参考:以前 Python 用に設定した時の記事

今回は JavaScript の代表的な linter (syntax checker) である ESLint を使い、vim で ES2015 を書くときの構文チェック環境を構築してみます。


よく見る設定

vim es6 syntastic」とかでググってよく見るのは以下のように、ESLint をグローバルインストールして使う方法です。

$ npm install -g eslint
.vimrc
" プラグイン管理に NeoBundle を使用している場合
NeoBundle 'scrooloose/syntastic'
let g:syntastic_javascript_checkers=['eslint']

たしかにこれで問題なく動作しますが、通常 ESLint はプロジェクト(アプリケーション)ごとに package.json に含まれていて
npm install でローカルインストールして gulp や npm scripts から使うことの方が多いと思います。

そのため、ESLint をグローバルインストールせずに構文チェックを行う方法がないか調べてみたところ、
こちらの vim プラグインを使うと実現できそうなことがわかりました。


今回の設定

先ほどの syntastic-local-eslint.vim を使った方法だと、.vimrc は以下のようになります。

" プラグイン管理に NeoBundle を使用している場合
NeoBundle 'scrooloose/syntastic'
NeoBundle 'pmsorhaindo/syntastic-local-eslint.vim'

let g:syntastic_javascript_checkers=['eslint']

" ここから下は Syntastic のおすすめの設定
" ref. https://github.com/scrooloose/syntastic#settings

" エラー行に sign を表示
let g:syntastic_enable_signs = 1
" location list を常に更新
let g:syntastic_always_populate_loc_list = 0
" location list を常に表示
let g:syntastic_auto_loc_list = 0
" ファイルを開いた時にチェックを実行する
let g:syntastic_check_on_open = 1
" :wq で終了する時もチェックする
let g:syntastic_check_on_wq = 0


使い方

実際のアプリケーション(前に書いた Redux の Todo App を使用)に ESLint を試してみます。
今回は ESLint の設定に eslint-config-airbnb を使用します。

まず、既に package.json が存在するものとして、以下のコマンドで必要なパッケージをインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint babel-eslint

eslint-config-airbnb は eslint 以外にも必要なパッケージがいくつかあるため、このようになっています。
また、今回は parser に babel-eslint を指定するため一緒にインストールしています。

インストールしたら、.eslintrc を作成します。

.eslintrc
{
  "parser": "babel-eslint",
  "extends": "airbnb"
}

この状態で vim を開き、:NeoBundleInstall を実行して Syntastic と syntastic-local-eslint をインストールし、
JavaScript ファイルを開くと以下のように表示されます。

f:id:dackdive:20160428020551p:plain

ESLint で検出されたエラー行に >> という sign が表示されています。
該当行にカーソルを移動するとエラー内容が下部に表示されます。

f:id:dackdive:20160428020920p:plain

また、:Errors コマンドでエラー一覧の location list を表示することができます。

f:id:dackdive:20160428021051p:plain

location list の行で Enter を押すと該当行にジャンプすることができるので、
ファイル行数が多いときに役立ちます。

なお、この location list は .vimrc

let g:syntastic_auto_loc_list = 0

を 1 に変えると常に表示されるようになります。

構文チェック実行中はファイル保存のたびにチェックが実行されるようになるため保存時の動作が重くなります。
こまめに :w するという方は以下のコマンドで構文チェックの ON/OFF を切り替えると良さそうです。

:SyntasticToggleMode

なお、今回動作を試したコードはこちらにあります。(Redux の basics チュートリアル
https://github.com/zaki-yama/redux-tutorial/tree/master/basics


おわりに

この設定のおかげで、コードを書きながらこまめに構文チェックを行うことができるようになりました。

以前 ESLint を試したとき、gulp から実行しようとするとどうしてもデフォルトの対象がアプリケーション全体になってしまい
編集したファイル以外の大量のエラーによって本来確認したいファイルを見つけづらいという問題がありました。
vim から実行できるようになったことで、編集中のファイルのエラーだけを確認することができるようになり、開発はだいぶしやすくなったと思います。

おまけ

Atom だとこちらの記事が参考になりそうです。