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

はじめに

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.json の devDependencies 一覧にも追加されます。
npm install コマンドは package.json の内容を見て同様のパッケージをインストールしますので、package.json を git に登録するだけで、チームでツール類のバージョンを揃えることができます。便利です。
プラグインや共有設定を使う場合も --save-dev 付きでインストールしましょう。

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

shell

> ./node_modules/.bin/eslint src

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

そこで...

npm-scripts

npm にはタスクランナーとしての機能があります。
package.json の scripts フィールドにコマンドを書くと、パスが通っていない 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 を探して実行します (無かったらエラーです)。