search
LoginSignup
145
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

共有設定でらくらく ESLint

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

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

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

eslint-config-eslint

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

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

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

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

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

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

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

See Also:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
145
Help us understand the problem. What are the problem?