ESLint（リントツール）：Dev Basics／Keyword

ESLintはJavaScript用のリントツールであり、標準のルールに加えて独自のルールを作成してコードチェックを行える「プラガブル」な特性を持つ。

[かわさきしんじ，Insider.NET編集部]

連載目次

　ESLintはJavaScript用のリントツール（静的コードチェックツール）だ。その最大の特徴は「プラガブル」であることであり、開発者は標準のルールだけではなく、独自のリントルールを使ってコードのチェックを行える。JavaScript用のメジャーなリントツールとしてはこの他にもJSLint、JSHintもあるが、プラガブルである点でESLintはこれらのツールとは大きく異なっている。

ESLint公式サイト

ESLintの哲学

　ESLintが生まれた大きな理由は「開発者が独自のリントルールを作れるようにする」（to allow developers to create their own linting rules）ことにあり、そこから「全てがプラガブル」（Everything is pluggable）という哲学が生まれた。

　全てのルールは「プラガブル」つまり「リント実行時にどんなルールを使用するかを指定可能」であり（ルールに違反したときにそれをエラーとするか警告とするかも指定可能）、標準でバンドルされているルールと開発者が独自に作成したルールは、ESLintから見れば立場的には等しい（ESLintが提供するルール用のAPIは両者から利用可能であり、出力形式を指定するフォーマッタ用のAPIについても同じことがいえる）。

　標準でバンドルされているルールはあくまでもプラグインとして記述されるルールのお手本となるように書かれたものであり、ESLint自身が特定の流儀でのコードの書き方を強制することはない（これは作者の考えが大きく反映されているJSLintとは大きく異なる点だ）。特定のプロジェクトで特定のコーディングルールを規定するという場合、ESLintの持つこの柔軟性は有用だろう。

ESLintの実行例

　ESLintはnpmを利用して「npm install -g eslint」コマンドを実行することでインストールできる。以下では、ESLintの簡単な使い方を見ていこう。

　ここでは階乗を計算する以下のコードをサンプルとして利用する。

function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n-1);
}

var n = 10;
var result = fact(n);
console.log('factorial of ' + n + ' is ' + result);

階乗を計算するJavaScriptコード（index.jsファイル）

　ESLintを実行する前には、構成ファイルのセットアップが必要になる。これには「eslint --init」コマンドを実行する。すると、どのような方法で構成を行うかを指定するようにプロンプトが表示される。ここでは対話的に構成を行っている。この他には標準のスタイルガイドを使用する方法と、既存のJavaScriptコードを指定して、それを基にして（さらに対話的に）構成を行う方法がある。

> 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? No
? Where will your code run? Node
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Double
? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in C:\devbasics\eslintsample

ESLintの初期構成

　ここでは、ECMAScript 6の機能を使う（が、モジュールは使わない）、Node.jsアプリ、インデントには空白文字を使用、文字列はダブルクオートで囲むなどを指定している。

　初期構成が済むと、初期のルールが記述された構成ファイルが作成される（ここではJSON形式の.eslintrc.jsonファイルとしてある。構成ファイルのフォーマットも対話的な構成時に指定可能だ）。ここでは上で行った対話的な構成の結果（ECMAScript 2016を使用、文字列はダブルクオートで囲む、行末コードはWindows形式など）が記述されている。

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

.eslintrc.jsonファイル

　この状態で先ほどのコードをチェックしてみよう。これには「eslint index.js」コマンドを実行する。

> eslint index.js

C:\devbasics\eslintsample\index.js
  2:3   error  Expected indentation of 4 space characters but found 2  indent
  3:3   error  Expected indentation of 4 space characters but found 2  indent
  8:1   error  Unexpected console statement                            no-console
  8:13  error  Strings must use doublequote                            quotes
  8:35  error  Strings must use doublequote                            quotes

× 5 problems (5 errors, 0 warnings)

5つのエラーが発生した

　ご覧の通り、上記コードには5つの問題（エラー）があると結果が返される。この出力結果では「エラー箇所（行：列）、エラー／警告、問題の内容、ルール名」の順に情報が表示されるようになっている。全てが警告でなくエラーとなっているのは、構成ファイルでエラーとするようになっているからだ。また、ESLintの「Rules」ページでこのルール名を検索すると詳細な情報が得られる。

　問題のある箇所を簡単に説明すると、まず本フォーラムではインデントには半角スペース2つを使用しているため「4タブでないとダメ」といわれている。また、console.logメソッド呼び出しもエラーとなっている。最後に文字列をシングルクオートで囲んでいたため、これもエラーと判断された。

　インデントについては、デフォルトのルールの方が（本フォーラムでは）適切ではない。そこで、インデント幅を以下のように修正する。

{
  …… 省略 ……
  "rules": {
    "indent": [
      "error",
      2
    ],
    …… 省略 ……
  }
}

修正後の.eslintrc.jsonファイル

　また、console.logメソッド呼び出しについては、index.jsファイル内でこのチェックを無効化してみよう。ここでは、コメントの形でno-consoleルールのエラーレベルを「"off"」にするように指定している。エラーレベルには「"off"または"0"／"warn"または"1"／"error"または"2"」の3種類があり、"off"か"0"を指定するとそのルールのチェックが無効化される。

/* eslint no-console: "off" */

…… 省略 ……

console.log('factorial of ' + n + ' is ' + result);

JavaScriptコード内でESLintによるチェックを抑制（index.jsファイル）

　最後に文字列を囲んでいたシングルクオートをダブルクオートに修正して、再度、ESLintを実行すると次のように問題がなくなったことが分かる。

> eslint index.js

>

エラーがなくなった

　このように、ESLintでは非常に柔軟な形でどのルールを適用するか、そのエラーレベルをどうするかを指定可能だ（もっとも、コーディングスタイルはプロジェクトの初期である程度固めておくものであり、ESLintでエラーになるからといって、勝手にルールの適用を無効化するのは行儀がよくないだろう）。

　なお、.eslintrc.jsonファイル中には「"extends": "eslint:recommended"」という指定がある。これを指定すると、ESLintの「Rules」ページでチェックマークが付いているルールのチェックが有効化される。このプロパティを指定しておくと、JavaScriptコードでよく見られる問題をチェックしてくれるので、普段はこのチェックに頼りながら、上で見たように自身の環境やプロジェクトに合わせてルールの適用を上書きしていくのがよいだろう。

---

　本稿ではJavaScript用のリントツールであるESLintを見てきた。ESLintはプラガブルなリントツールであり、コードチェックに適用するルールを柔軟な形で設定できる。また、本稿では取り上げなかったが、独自のルールやフォーマッタを作成して、ESLintで利用できる。こうしたことから、開発者にとっては使い勝手のよいリントツールであるといえるだろう。

参考資料

• ESLint： ESLint公式サイト
• Rules： ESLintのルール一覧。エラー、ベストプラクティス、strictモード、変数、Node.js／CommonJS、コーディングスタイル、ECMAScript 6などのカテゴリごとにルールとその説明が行われている
• Getting Started with ESLint： ESLintの簡単な使い方の説明

「Dev Basics／Keyword」