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の代わりに利用可能。

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

パーサーに別のnpmを利用するのであれば、.eslintrcでparserオプションを宣言する。
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

優先順位は以下の通り。

JavaScriptのコメント
/* eslint-disable */、/* eslint-enable */
/* global */
/* eslint */
/* eslint-env */
CLIオプション
--global
--rule
--env
-c、--config
プロジェクトの設定
Lint対象のファイルと同じディレクトリの.eslintrc
Lint対象のファイルと同じディレクトリのpackage.json
親のディレクトリの.eslintrc、package.jsonを辿る
デフォルトの設定
enviroments.json
eslint.json

Extending Configuration Files

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

Comments

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

Ignoring File/Dir

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

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

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

makotot / eslint-rules-example Goto Github PK