.eslintrc.jsなどの自分の設定ファイルはデフォルトで除外設定になっているのか、そのままではエラーになります。これは--ignore-patternまたは--no-ignoreオプションを使ってそのコマンド中のみ解除できます。
以下のように実行で動くはずです。
yarn eslint --fix .eslintrc.js --ignore-pattern '!.eslintrc.js'
yarn eslint --fix .eslintrc.js --no-ignore # すべて解除独自のグローバル変数とは、いきなりコード上に現れる本来のグローバルオブジェクト（windowなど）には存在しない値のことです。
例えば以下のような場合に現れる可能性があります。
<script>の中のコードで変数定義で追加された値
Webpack のプラグイン（ProvidePlugin等）で定義された値
これらで定義された値をいきなりコード上で使うと ESLint （eslint-loader）によりReferenceErrorが起こされる可能性があります。
これを直すには.eslintrcへglobalsセクションを追加します。その値はオブジェクトを置き、構造は{グローバス変数名: true}のような形です。
例えば、fooとbarというグローバル変数を許可したいなら
{
"globals": {
"foo": true,
"bar": true
}
}のような設定になります。
overridesセクションなどが複雑になってきていると、このファイルにちゃんとお目当ての設定が当たってるかデバッグしたくなる時があります。そんな時は CLI の--print-configオプションが使えます。
使い方は簡単で--print-config <対象のファイル名>という形で実行するだけです。
eslint --print-config path/to/hogehoge.js
# {
# "rules": [...],
# "plugins": [...]
# }確認したレベルでは「各セクション毎にマージされる」です。
例えばモノレポなどでルート.eslintrcを１つ置き、各ワークスペースにも.eslintrcを置いているとします。
# tree
.
├── ...
├── .eslintrc
└── packages
└── foo
├── ...
└── .eslintrcルートの設定は適当にこんな感じにしました。
{
"root": true,
"env": {
"browser": false,
"node": false
},
"rules": {
"no-unused-vars": 0,
"eqeqeq": 0
}
}上記でのpackages/foo/.eslintrcをこのようにしました。
{
"env": {
"node": true
},
"rules": {
"no-unused-vars": 2
}
}さて、ここでpackages/foo以下のファイルへの設定は考えられるもので、
マージされる（完全に置き換わる）
各セクションレベルでマージされる（ディープマージ）
どれが正解なのかという疑問がでてきました。
対象のファイルへ適用される設定を調べるには--print-configオプションが使えます。
ルートで、
eslint --print-config packages/foo/foo.js結果はこうでした。（envとrules以外のセクションは削除してます）
{
"env": {
"browser": false,
"node": true
},
"rules": {
"no-unused-vars": 2,
"eqeqeq": 0
},
"root": true
}そんな時は子.eslintrcにroot:trueを追加します。実は ESLint はルート設定まで遡り設定をディープマージしていくような動作をします。これがroot:trueにより「自分自身ファイルがルートです」となることでで親設定を拾わず、それだけの設定にすることができます。
{
"root": true,
"env": {
"node": true
},
"rules": {
"no-unused-vars": 2
}
}結果。
{
"env": {
"node": true
},
"rules": {
"no-unused-vars": 2
},
"root": true
}eslint-plugin-import のimport/orderを有効にすることで、importブロックの並びがバラバラな時に基準に沿って並び替えてくれます。
まずはインストールして、
yarn add -D eslint-plugin-import以下の2行を.eslintrcなどの設定ファイルのextendsセクションへ追加します。
{
"extends": [
"...",
"plugin:import/errors",
"plugin:import/warnings"
]
}これでimport系のrulesが使えるようになり、また以下のルールが有効に設定されました。
{
"rules": {
"import/no-named-as-default": [1],
"import/no-named-as-default-member": [1],
"import/no-duplicates": [1],
"import/no-unresolved": [2],
"import/named": [2],
"import/namespace": [2],
"import/default": [2],
"import/export": [2],
"...": "..."
}
}これではまだ整頓されません。
整頓されるようにするにはimport/orderルールを自分で設定する必要があります。それには以下のような1行をrulesセクションに追加します。
{
"...": "...",
"rules": {
"import/order": ["error"],
}
}
