JavaScriptで開発をしているならESLintは使った方がいい

先日、勉強会に参加した時に「ESLintというJavaScript用の検証ツールがある」という話を聞いたので早速入れてみましたんですが、メチャクチャ使えたので紹介します。

ESLintとは

JavaScript用のソースコード検証ツールです。バグを見つけたり、スタイルの統一などで利用されます。これを元にチームのスタイルガイドを作れてしまう優れものツールです。

ESLintのインストール

ESLintは、Node.js 4.0.0 以降で動作します。Node.jsをインストールしていない場合はインストールしてください。Homebrewでインストールする場合はこちらのコマンドになります。

$ brew install node

Node.jsのインストールが完了したらnpmコマンドを使ってインストールします。

$ npm install -D eslint

インストールが完了したらバージョンを確認してみましょう。

$ npm -v

ESLintを使ってみよう

インストールが完了したら、早速使ってみましょう。

まずはESLintの設定ファイルの作成をします。ここではコマンドから作成を行います。

$ eslint —init

いくつか質問をされますので１つ１つ答えてください。下記は１例です。

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

全て回答すると、.eslintrc.json（最後の質問によって拡張子は変わる）というファイルが作成されます。ファイルは以下のような感じになります。※質問の回答によって値は変化

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

次に検証するためのJavaScriptファイルを作成します。
とりあえずtest.jsとし、中身は以下のようにします。

function hello(name) {
    document.body.textContent = "Hello, " + nam + "!"
}

hello('ESLint!!');

これで準備は完了です。
早速検証してみましょう。

$ eslint test.js

/Users/XXXX/sample/eslint_sample/test.js
  1:16  error  'name' is defined but never used  no-unused-vars
  2:33  error  Strings must use singlequote      quotes
  2:45  error  'nam' is not defined              no-undef
  2:51  error  Strings must use singlequote      quotes
  2:54  error  Missing semicolon                 semi

✖ 5 problems (5 errors, 0 warnings)

各項目についてですが、以下のようになっています。

1:16     行番号:列番号
error     種類
'name' is defined but never used     メッセージ
no-unused-vars     ルール名

ルールについてはESLintのページに詳しく書いてあります。

List of available rules - ESLint - Pluggable JavaScript linter
http://eslint.org/docs/rules/

では、ここからファイルを修正し、エラーをなくしていきましょう。

function hello(name) {
    document.body.textContent = 'Hello, ' + name + '!';
}

hello('ESLint!!');

再度検証してみましょう。

$ eslint test.js

何も表示されなければOKです。

ESLintを導入してみて

こんなに使えるJavaScript検証ツールがあったのか・・というのが率直な感想です。細かくルールが設定できるし、ドキュメントもしっかりしているし（英語だけどコードのサンプルがあるのがありがたい）これがあればブランドガイドラインに沿った開発も容易にできちゃいます。レビュアーがチェックしていた内容もESLintに頼ればコスト削減できちゃいますね。

チームで開発をするなら間違いなく入れた方が良いツールです。

今回はコマンドで行いましたが、エディタでもプラグインで対応しているものがあり、リアルタイムチェックも検証してくれます。
そちらについては後日記事で紹介します。