Help us understand the problem. What is going on with this article?

共有設定でらくらく ESLint

More than 3 years have passed since last update.

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:

mysticatea
ESLint のメンテナ。Vue.js の開発チームメンバー。JavaScript 言語仕様書 ECMA-262 や JavaScript 構文解析器 Acorn のコントリビューター。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away