ESLint rules example

Configuration

ESLintのオプションの設定は以下２つのいずれかで。

• JavaScriptのコメント
• .eslintrcファイルかpackage.json内のeslintConfig、もしくはCLIで設定ファイルを指定

Configurable options

• Enviroments : どの環境で実行する想定か
• Globals : スクリプト実行時に追加するグローバル変数
• Rules : 有効にするルールとそのエラーレベル

Language options

JavaScriptの言語オプションを定義できる。デフォルトでは、ES5の構文のみサポート。設定でES6やJSXのサポートを追加可能。
.eslintrcでecmaFeaturesプロパティを使って設定する。設定できるオプションは以下。
全てのオプションがデフォルトfalse。

• arrowFunctions: アロー関数を有効にする
• binaryLiterals: 2進数リテラルを有効にする
• blockBindings: letとconstを有効にする
• classes: クラスを有効にする
• defaultParams: デフォルトパラメータを有効にする
• destructuring: 分解代入を有効にする
• forOf: for ofループを有効にする
• generators: generatorsを有効にする
• modules: モジュールとグローバルのstrictモードを有効にする
• objectLiteralComputedProperties: 計算されたプロパティ名を有効にする
• objectLiteralDuplicateProperties: strictモードでの重複したプロパティ名を有効にする
• objectLiteralShorthandMethods: オブジェクトリテラルのメソッドのショートハンド記法を有効にする
• objectLiteralShorthandProperties: オブジェクトリテラルのプロパティのショートハンド記法を有効にする
• octalLiterals: 8進数リテラルを有効にする
• regexUFlag: 正規表現でのuフラグを有効にする
• regexYFlag: 正規表現でのyフラグを有効にする
• restParams: 可変長引数を有効にする
• spread: spread operatorを有効にする
• superInFunctions:
• templateStrings: テンプレート文字列を有効にする
• unicodeCodePointEscapes: コードポイントのエスケープを有効にする
• globalReturn: グローバルスコープでのreturnを有効にする
• jsx: JSXを有効にする

Parser

デフォルトのパーサーはEspree。以下の要件を満たすパーサーであればEspreeの代わりに利用可能。

1. ローカルにインストールできるnpm
2. Esprimaと互換性があるインターフェースを持ってる(parseメソッドが必要)
3. Esprimaと互換性があるASTとトークンオブジェクトを生成する

パーサーに別のnpmを利用するのであれば、.eslintrcでparserオプションを宣言する。
ESLintに適合するパーサーは以下。

• Esprima
• Esprima-FB
• Babel-ESLint

カスタムパーサーを使う場合でも、ES5に無いものはecmaFeaturesの設定が必須。

Enviroments

定義済みのグローバル変数を設定するのとデフォルトで有効/無効にするルールを決める。使用できるenviromentsは以下。

• browser: ブラウザのグローバル変数
• node: Node.jsのグローバル変数とNode.jsに特化したルール
• worker: workersのグローバル変数
• amd: amdの仕様に従ってrequire()とdefine()をグローバル変数として定義
• mocha: すべてのMochaのテスト用グローバル変数
• jasmine: すべてのJasmine(v1.3とv2.0)のテスト用グローバル変数
• phantomjs: Phantomjsのグローバル変数
• jquery: jqueryのグローバル変数
• prototypejs: Prototype.jsのグローバル変数
• shelljs: ShellJSのグローバル変数
• meteor: meteorのグローバル変数
• mongo: mongoのグローバル変数
• applescript: applescriptのグローバル変数
• es6: モジュールを除いたすべてのES6の機能を有効にする

JavaScriptのコメントでも設定ファイルの中でも、CLIのenvオプションでも宣言可能。

JavaScriptのコメントなら以下のようにする。

/* eslint-env node, mocha */

設定ファイルに記述するなら、envで。

{
  "env": {
    "browser": true,
    "node": true
  }
}

package.jsonに記述するなら、

{
  ...,
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
    }
  }
}

Globals

ESLintはデフォルトで、同じファイルで定義されてないけどアクセスしている変数に対して警告を出す。
globalsで許可するグローバル変数を定義できる。

JavaScriptのコメントなら、以下で。

/* global foo, bar */

読み取り専用なら、falseで。

/* global foo:false, bar:false */

設定ファイルに記述するのであれば、globalsキーで定義する。上書き可能ならtrueで。読み取り専用ならfalseで。

{
  "globals": {
    "foo": true,
    "bar": false
  }
}

Plugin

サードパーティのプラグインも使えるようになってる。npmでインストールしないといけない。
設定ファイルに記述する場合、pluginsキーを使う。eslint-plugin-プレフィックスは省略可能。

{
  "plugins": [
    "plugin-name",
    "eslint-plugin-name"
  ]
}

Rule

ESLintは大量のルールを持っていて、それはデフォルトで無効だったり、有効だったりする。どのルールを利用して、どのルールを利用しないかは、JavaScriptのコメントか設定ファイルで定義すればいい。
ルールの有効無効を切り替えるには、ルールのIDに対して0〜2の値を設定する。

• 0: 無効にする
• 1: 警告にする
• 2: エラーにする

JavaScriptのコメントで書くなら、以下のようにする。

/* eslint: quotes: [2, "double"], curly: 1 */

設定ファイルの中で定義するなら、以下のようにする。

{
  "rules": {
    "quotes": [2, "double"]
    "curly": 1
  }
}

Shared Settings

設定ファイルに共有設定を追加することができる。設定ファイルにsettingsオブジェクトを追加すれば、全てのルールで共有される。
カスタムのルールを追加した時などに有用らしい。

{
  "settings": {
    "sharedData": "hoge"
  }
}

Configuration File

設定ファイルを使う手段は２つ。いずれもデフォルトの設定を上書きする。

• CLIで-cオプションをつけて設定ファイルを指定
• .eslintrcかpackage.json

Configuration Hierarcy

優先順位は以下の通り。

1. JavaScriptのコメント
2. /* eslint-disable */、/* eslint-enable */
3. /* global */
4. /* eslint */
5. /* eslint-env */
6. CLIオプション
7. --global
8. --rule
9. --env
10. -c、--config
11. プロジェクトの設定
12. Lint対象のファイルと同じディレクトリの.eslintrc
13. Lint対象のファイルと同じディレクトリのpackage.json
14. 親のディレクトリの.eslintrc、package.jsonを辿る
15. デフォルトの設定
16. enviroments.json
17. eslint.json

Extending Configuration Files

extendsで設定ファイルの拡張ができる。

Comments

package.json以外の設定ファイルはコメントが書ける。

Ignoring File/Dir

プロジェクトのルートディレクトリに.eslintignoreをつくれば、無視するファイル、ディレクトリを決められる。
Lint対象外のパスのグロブパターンを1行毎に記述する。グロブパターンに使われているのはminimatch。

• #始まりの行はコメント扱い
• !始まりの行は、その前に無視リストに入れたパターンを否定するパターン
• {}は複数のファイルパターンを参照する

node_modules/**は常に無視される。

Links

• Documentation - ESLint - Pluggable JavaScript linter