More than 5 years have passed since last update.

共有設定でらくらく ESLint

Last updated at 2016-02-26Posted at 2015-11-07

ESLint はデフォルトでは何も警告してくれず、しかも膨大な設定項目があるために使い始めが大変です。

ところで、ESLint は共有設定という仕組みを持っていて、誰でも "自分の設定" を共有することができます。
そして、使いはじめる人は共有された設定を使って簡単に ESLint を使い始めることができます。
共有設定の一部が気に入らなかった場合には、(設定ファイルを書いて) そこだけ自分好みに上書きできます。

この記事では、有名な共有設定を紹介していきます。

eslint-config-eslint

設定ファイル
ES5 Only.

ESLint 自身が使っている設定です。
インデント幅が 4 だったり、文字列がダブルクォーテーションだったりとオーナーの趣味が出ています。
私は好きです。

shell

> npm install -g eslint eslint-config-eslint
> eslint -c eslint your-code.js

または

package.json

{
  "devDependencies": {
    "eslint": "^2.0.0",
    "eslint-config-eslint": "^3.0.0"
  },
  "scripts": {
      "lint": "eslint -c eslint your-code.js"
  }
}

shell

> npm install
> npm run lint

eslint-config-google

設定ファイル
ES2015

Google JavaScript Style Guide のための設定です。
GitHub の Google リポジトリにあります。

shell

> npm install -g eslint eslint-config-google
> eslint -c google your-code.js

または

package.json

{
  "devDependencies": {
    "eslint": "^2.0.0",
    "eslint-config-google": "^0.4.0"
  },
  "scripts": {
      "lint": "eslint -c google your-code.js"
  }
}

shell

> npm install
> npm run lint

eslint-config-airbnb

設定ファイル
ES2015 + React

Airbnb JavaScript Style Guide (日本語訳) のための設定です。
いち早く ECMAScript 2015 に対応したスタイルガイドを作成したため、人気があります。

shell

> npm install -g eslint eslint-config-airbnb eslint-plugin-react
> eslint -c airbnb your-code.js

または

package.json

{
  "devDependencies": {
    "eslint": "^2.0.0",
    "eslint-config-airbnb": "^6.0.0",
    "eslint-plugin-react": "^4.1.0"
  },
  "scripts": {
      "lint": "eslint -c airbnb your-code.js"
  }
}

shell

> npm install
> npm run lint

eslint-config-standard

設定ファイル
ES2015

セミコロン書かない派の急先鋒です。
「俺こそが標準だ!」という意気込みを感じる名前ですね。

shell

> npm install -g eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise
> eslint -c standard your-code.js

または

package.json

{
  "devDependencies": {
    "eslint": "^2.0.0",
    "eslint-config-standard": "^5.0.0",
    "eslint-plugin-standard": "^1.3.2",
    "eslint-plugin-promise": "^1.0.8"
  },
  "scripts": {
      "lint": "eslint -c standard your-code.js"
  }
}

shell

> npm install
> npm run lint

eslint-config-mysticatea

設定ファイル
ES2015

そして有名ドコロに混ぜで自分の設定も晒してみます。

shell

> npm install -g eslint eslint-config-mysticatea
> eslint -c mysticatea your-code.js

または

package.json

{
  "devDependencies": {
    "eslint": "^2.0.0",
    "eslint-config-mysticatea": "^2.0.0"
  },
  "scripts": {
      "lint": "eslint -c mysticatea your-code.js"
  }
}

shell

> npm install
> npm run lint