VimでのLinter(ESLint)とFormatter(Prettier)を設定した話

経緯

JavaScriptをコーディングしていて、以前インストールしていたvim-pretterがうまく機能していなかったみたいだったので、設定を見直すことにしました。

うまく機能していなかった状態を説明すると、

  • LinterはJavaScript Standard Styleを採用していた
  • ESLint側でJSSを指定して、Prettierの連携の設定も書いていた
  • が、Vimでコーディングしていて、:Prettierを実行しても、JSSのルールではなくPrettierのデフォルトルールに修正されてしまっていた

という感じ。

実現したかったこととしては、VimでコーディングしながらLintチェックをしつつ、必要に応じてprettierでフォーマッティングしてほしい…みたいな感じです。

Pretterの公式サイトで、LintはLinterに、フォーマットはフォーマッターにやらせろやいっていうことも書かれており、自分としてはせやねって思う一方で、Lintのルールに沿ってフォーマッティングしてほしいみ……🥺という気持ちがあったので、ESLintの仕組みとPrettierの公式情報を見つつ、設定を見直しました。

やったこと

結果から話すと…………

ALEというプラグインを使うことにした(というかESLintではもともと使っていた) ESLintのルールをJSSに指定 Fixerをprettier-standardを指定 という流れです。

調べてみるとvim-prettier自体が、カスタマイズが全く出来ないことはないんですが、Fixのルールはあまり自由度がないと言うか……lintルールをフォーマッティングに適用する方法が見当たらなかったので……見つからないものを探しても仕方ないので、ALEのFixer使えばいいっかぁってなった次第です。

……ぶっちゃけると、深く探すのが途中でめんどくさくなったと言うか飽きてしまった( ºωº )

ALEの設定としては、こんな感じ。

let g:ale_linters = {
\   'javascript': ['standard'],
\}
let g:ale_fixers = {[f:id:ksmxxxxxx:20200730211702g:plain]
\   'javascript': ['prettier-standard'],
\   'css': ['prettier'],
\}
let g:ale_javascript_prettier_use_local_config = 1

こいつをvimのtomlとか、init.vimとか、vimrcにかくと良いと思います。

で、vimでコードをフォーマッティングするときに :ALEFix すると、ale_linters で指定したLintルールでFixしてくれます。くれるはずです。 私の環境ではちゃんと出来ました。

f:id:ksmxxxxxx:20200730211702g:plain

でもこれだと、他のLintルールになった時どうするのさ……

っていう、課題もあるのでもうちょっと試行錯誤してみようかなって感じです。

あと、JSだけでなくCSS……というかSass(scss)もLintチェックすることがそこそこあるので、そっちもいい感じに出来たら最高。