Edited at

ESLint をグローバルにインストールせずに使う

More than 3 years have passed since last update.


はじめに

ESLint 最初の一歩では、ESLint をグローバル インストールしていました。

グローバル インストールすると eslint コマンドにパスが通って便利ですが、欠点もあります。


  • プロジェクト毎に異なるバージョンの ESLint を使えない。


    • ESLint が互換性のないバージョンアップをした時に困る (1.0.0, 2.0.0 のようなメジャーバージョンアップは互換性がありません)



  • 利用するプラグイン・共有設定もグローバル インストールしなければならない

  • チームで同じバージョンに揃えるのが手間である

npm のエコシステムでは、コマンドもプロジェクト ローカルにインストールして使うのが主流です。

そうすることで、package.jsonに依存バージョンとともに記述して共有することができます。

npm install 一発で、チームが同じ環境を揃えられるわけですね。

この記事では、プロジェクト ローカルに ESLint をインストールして使う方法を紹介します。


--save-dev

package.json は作成済みであることを想定します。

作っていない場合は、npm init 等のコマンドで作ってしまいましょう。


shell

> npm install --save-dev eslint


--save-dev オプションを使うことで、インストールされたパッケージは package.jsondevDependencies 一覧にも追加されます。

npm install コマンドは package.json の内容を見て同様のパッケージをインストールしますので、package.json を git に登録するだけで、チームでツール類のバージョンを揃えることができます。便利です。

プラグインや共有設定を使う場合も --save-dev 付きでインストールしましょう。

ただ、--save-dev でインストールすると不便な点が1つだけあります。


shell

> ./node_modules/.bin/eslint src


実行ファイルにパスが通らないので、実行するのが面倒です。

そこで...


npm-scripts

npm にはタスクランナーとしての機能があります。

package.jsonscripts フィールドにコマンドを書くと、パスが通っていない npm パッケージも素直に使うことができます。


package.json

{

"scripts": {
"lint": "eslint src"
},
"devDependencies": {
"eslint": "^2.8.0"
}
}


shell

> npm run lint



eslint-cli

エディタによってはグローバル インストールされた eslint しか使ってくれない不届き者もいます。また、npm run lint を定義したとしても、やっぱり eslint コマンドを使えると便利です。

そんなときに eslint-cli を使うことができます。

eslint-cli をグローバル インストールしておくと、--save-devでインストールした ESLint を実行する eslint コマンド が使えるようになります。


shell

> npm install -g eslint-cli

> npm install --save-dev eslint


shell

> eslint src


ローカルの ESLint を探して実行します (無かったらエラーです)。