01

昨今のJavaScript開発ではBabelやESLintなどのツールがよく使われるが、これらのツールを複数使用すると.babelrcや.eslintrcなどの設定ファイルがリポジトリのルートディレクトリに複数存在することとなる。

ツールの数が増えると設定ファイルも増えるので、管理するファイルが増える。そこで、いくつかのツールはpackage.jsonに設定を記述できるので、これを利用すると個別の設定ファイルを作成せずに済む。

Babel

Babelはbabelという名前でフィールドを作成すると読み込まれる。

{
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

参考ページ：Use via package.json

ESLint

ESLintはeslintConfigという名前でフィールドを作成すると読み込まれる。

{
  "eslintConfig": {
    "extends": "eslint:recommended"
  }
}

参考ページ：Configuring ESLint

PostCSS CLI

PostCSS CLIはpostcssという名前でフィールドを作成すると読み込まれる。

PostCSS CLIが対応している（正確にはPostCSS CLIが使用しているpostcss-load-configが）のであって、PostCSS本体は対応していないようだ。

{
  "postcss": {
    "from": "/path/to/src.css",
    "to": "/path/to/dest.css"
  }
}

参考ページ：postcss-load-config#packagejson

stylelint

stylelintはstylelintという名前でフィールドを作成すると読み込まれる。

{
  "stylelint": {
    "extends": "stylelint-config-standard"
  }
}

参考ページ：Loading the configuration object

browserslist

browserslistはbrowserslistという名前でフィールドを作成すると読み込まれる。

Autoprefixerやbabel-preset-envなどのモジュールがこれを使用している。

{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions"
  ]
}

参考ページ：browserslist#browserslist

browserslistフィールドとbabel-preset-envの設定を含んだbabelフィールドはどちらが優先されるかは不明。

設定を読み込むモジュール

設定を読み込むモジュールには以下のようなものがある。上記のツールの多くはcosmiconfigを使用している。