Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (71 sloc) 3.36 KB
tags title
babel browserslist eslint postcss stylelint
ツールの設定を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を使用している。

You can’t perform that action at this time.