airbnbのESLintルール利用時にjsx-a11y/label-has-associated-controlのエラーが消えない問題

問題

こんなコードを書いたとき・・

<div>
  <label htmlFor='name'>名前</label>
  <input id='name' name='name'/>
</div>

htmlForを付けているのにESLintのエラーが消えない😥

A form label must be associated with a control  jsx-a11y/label-has-associated-control

結論

.eslintrc.cjsのrulesに下記を追記して、airbnbのルールを上書きする⭐

.eslintrc.cjs

    'jsx-a11y/label-has-associated-control': ['error', {
      labelComponents: [],
      labelAttributes: [],
      controlComponents: [],
      assert: 'either',
      depth: 25
    }],

解説

airbnbのルールでは、下記が定義されている。

    'jsx-a11y/label-has-associated-control': ['error', {
      labelComponents: [],
      labelAttributes: [],
      controlComponents: [],
      assert: 'both', // ⭐コレのせい
      depth: 25
    }],

参照: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react-a11y.js#L121-L129

assertオプションがbothになっている場合、
htmlForだけではなく、ネストもさせないとエラーになってしまう。

assert asserts that the label has htmlFor, a nested label, both or either. Available options: 'htmlFor', 'nesting', 'both', 'either'.

参照: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md#rule-options

なので、これをboth以外にしてやればいい。

オプション	意味
htmlFor	htmlForのみOK
nesting	ネスト形式のみOK
both	htmlForとネスト形式の両方が必要
either	どちらかでOK

.eslintrc.cjs

    'jsx-a11y/label-has-associated-control': ['error', {
      labelComponents: [],
      labelAttributes: [],
      controlComponents: [],
      assert: 'either', // ⭐変更
      depth: 25
    }],