ツールの設定をpackage.jsonに書く

昨今のJavaScript開発ではBabelESLintなどのツールがよく使われるが、これらのツールを複数使用すると.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 CLIpostcssという名前でフィールドを作成すると読み込まれる。

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

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

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

stylelint

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

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

参考ページ:Loading the configuration object

browserslist

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

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

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

参考ページ:browserslist#browserslist

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

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

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