VimとESLintを連携させる

January 15, 2017

テキストエディタにVimを使っています。 JavaScriptのlinterにはESLintを利用しており、
VimとESLintの連携を行うとコーディングが捗ったので、その設定を。

Pluginの導入

ESLintとVimを連携させるには下記のプラグインをインストールします。僕の場合はプラグインマネージャーにVundleを利用しているので、
下記のプラグインを.vimrcに追記して、:PluginInstallを実行します。

Plugin 'vim-syntastic/syntastic.git'

Syntasticの設定

ESLintのチェック結果をプレビューするために下記の設定を行います。

" ESLint configuration
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*

let g:syntastic_always_populate_loc_list = 1
let g:syntastic_loc_list_height = 5
let g:syntastic_auto_loc_list = 0
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 1
let g:syntastic_javascript_checkers = ['eslint']

let g:syntastic_error_symbol = '❌'
let g:syntastic_style_error_symbol = '⁉️'
let g:syntastic_warning_symbol = '⚠️'
let g:syntastic_style_warning_symbol = '💩'

highlight link SyntasticErrorSign SignColumn
highlight link SyntasticWarningSign SignColumn
highlight link SyntasticStyleErrorSign SignColumn
highlight link SyntasticStyleWarningSign SignColumn

eslint-cliの導入

ESLintがglobalにインストールされている場合は、ローカルのESLintを参照するように eslint-cliを追加します。

npm install -g eslint-cli

Vim

これで、ESLintがファイル保存時に対象のJavaScriptファイルをチェックするようになります。 :Errorコマンドでエラー内容を表示することもできます。

Imgur {:width=“800px”}

エラー結果が表示されない場合

eslintが動いていない可能性があるので、対象ファイルに対して直接下記コマンドラインで実行してみることをおすすめします。

eslint somefile.js

参考資料

In Editor Linting with Syntastic