IntelliJ IDEAでESLintを使ってみる

こんにちは、サービスグループの武田です。

皆さんはJavaScriptのプロダクトでLintツール（文法チェックツール）を使っていますか？現在参画しているプロジェクトではJSHintを使っていましたが、ESLintへの移行を検討しています。

IDEとしてIntelliJを使用しているので、その設定方法とJSHintからの移行方法を紹介します。

環境

• macOS Sierra
• IntelliJ IDEA Ultimate
• Homebrew
• nvm
• ESLint

ESLintをサポートしているのはIntelliJのUltimateのみなので注意が必要です。

またHomebrewはインストール済みとします。

サンプルコードの準備

検証用に新しいプロジェクトを作成し、そこにJSファイルとESLintファイルを用意します。

今回は以下のようなサンプルコードを用意しました。

mytool.js

function something(x, y) {
    if (x=="0"){
      return {
        x: 0
      }
    }else
    {
        z = x + y;
        return z ;
    }
}

.eslint.json

{
  "rules": {
    "block-spacing": 2,
    "camelcase": 2,
    "curly": 2,
    "eqeqeq": 2,
    "indent": [
      2,
      4,
      {
        "SwitchCase": 1
      }
    ],
    "keyword-spacing": 2,
    "no-undef": 2,
    "no-unused-expressions": 2,
    "no-unused-vars": 2,
    "no-use-before-define": [
      2,
      {
        "functions": false
      }
    ],
    "quotes": [
      2,
      "single"
    ],
    "semi": 2,
    "space-in-parens": [
      2,
      "never"
    ],
    "space-infix-ops": 2,
    "strict": [
      2,
      "function"
    ],
    "wrap-iife": [
      2,
      "any"
    ]
  }
}

ESLintのセットアップ

ESLintはNode上で動作するため、まずはNodeの環境を作る必要があります。

バイナリを直接入れてもいいですし、Nodeのバージョン管理を入れる方法もあります。

今回はnvmを利用して、6系の環境を作ります（なぜ6系なのかといえば、参画しているプロジェクトのNodeのバージョンが6系だったからです）。

$ brew install nvm

インストール後に書かれている通りの設定もしましょう。

nvmコマンドが実行できるか確認し、続いてNode、ESLintをインストールします。今回はNodeは6系の最新版をインストールしました。

$ nvm --version
0.33.4

$ nvm install 6.11.4

$ node -v
v6.11.4

$ npm install -g eslint

$ eslint -v
v4.9.0

IntelliJ IDEAの設定

仕上げとして、IntelliJからESLintを使えるように設定をします。

⌘ + ,またはメニューから設定を開きます。

検索バーにeslintと入力すれば絞り込みができます。 Languages & Frameworks > JavaScript > Code Quality Tools > ESLintが開けたら、[Enable]にチェックを入れ、[Node interpreter]と[ESLint package]に使用するパスを入力します。

設定ができたら[Apply]および[OK]をクリックして設定は完了です。

Lintの確認

設定が完了すると、自動的にESLintの設定ファイルを読み込んでエラーメッセージなどを表示してくれるようになります。

ESLintで検出されたエラーは、手動で修正して直すこともできますし、option + Enterのショートカットを利用することで自動的に修正することも可能です。

JSHintからESLintへのコンバート

先ほどの手順ではESLintのルールを新規で作成しましたが、すでにJSHintを使用していた場合、また0からルールを作り直すのは面倒ですよね。

最後に、JSHintの設定ファイルをESLintの設定ファイルにコンバートする方法を紹介して終わりにしたいと思います。

コンバーターはいくつかあるようですが、今回はpolyjuiceを使用してみます。

$ npm install -g polyjuice

$ polyjuice --jshint .jshintrc > .eslintrc.json

これだけです。簡単ですね。

まとめ

IntelliJは初めからESLintとの連携機能が含まれているため、少ない手間で使い始めることができます。

複数人で開発を進める際には品質の均一化が課題となりがちですが、こういったツールを利用することで低コストで担保することができるので非常に便利です。

またESLintは非常にたくさんのルールを細かく指定することができるため、納得感のあるルールも作りやすいと思います。

もしまだ使ってないようであれば、ぜひ検討してみてください。