Q. ESLintで特定のpropsを禁止にしたい

A.#

eslint-plugin-reactのルールであるforbid-component-propsとforbid-dom-propsが利用できる。

Component に対して禁止したければforbid-component-propsを、DOM に対して禁止したければforbid-dom-propsを利用すればいい。

今回は、style prop を全面的に禁止にしたいという相談だったので次のようにすれば良い。

1
{
2
  rules: {
3
    "react/forbid-component-props": [
4
      "error",
5
      {
6
        forbid: [
7
          {
8
            "propName": "style",
9
            "message": "Use css prop instead"
10
          }
11
        ],
12
      },
13
    ],
14
    "react/forbid-dom-props": [
15
      "error",
16
      {
17
        forbid: [
18
          {
19
            "propName": "style",
20
            "message": "Use css prop instead"
21
          }
22
        ],
23
      },
24
    ],
25
  }
26
}

特定の要素に限定または除外したい#

どちらのルールも同様の方法で制御することができる。

限定する場合は allowedFor を利用する。

1
{
2
  forbid: [
3
    {
4
      "propName": "style",
5
      "allowedFor": ["SomeCompnent"],
6
      "message": "Use css prop instead"
7
    }
8
  ],
9
},

特定の要素を除外する場合は、disallowdedFor を利用する。

1
{
2
  forbid: [
3
    {
4
      "propName": "style",
5
      "disallowedFor": ["SomeCompnent"],
6
      "message": "Use css prop instead"
7
    }
8
  ],
9
},