ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。
そこで今回は人気のプログラミングエディタ、AtomとESLintを組み合わせた使い方について紹介します。
プラグインについて
Atomでは多数のプラグインを提供しています。その中でもESLintで使うのはAtomLinter/linter-eslint: ESLint plugin for Atom Linterになります。これをAtomのプラグインインストーラーからインストールします。
ESLintについて
このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。
https://gist.github.com/goofmint/19ef24c514edbebadb1102d2e504818a
プロジェクト以下でだけ使う場合には次のようになるでしょう。
https://gist.github.com/goofmint/85654f507bb376f67e46e6655c6c0f36
Linter ESLintの設定
多数の設定がありますので、今回は幾つか設定を紹介します。
- Disable when no ESLint config is found (in package.json or .eslintrc)
設定が見つからない時にはESLintのチェックを行わなくする設定です。通常は無効にしておいて良いかと思います。 - Fix errors on save
保存時に自動的にエラーを修正します。有効で良いでしょう。 - Use global ESLint installation
システム全体にインストールしたESLintを使うかどうかです。好みに合わせて選択しましょう。
ファイルを開く
後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い印があるところがチェックに引っかかった部分になります。
マウスオーバーで指摘事項が表示されます。
Fix errors on saveが有効になっていると保存時、自動的にエラーを修正してくれます（修正できないエラーもあります）。
基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージの最後にはリンクがあり、それをクリックするとより詳細にエラーメッセージを学べるようになっています。
JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Atomを使っている方はぜひLinter ESLintを使ってみましょう。