137文字
1分
編集

Q. ESLintで特定の要素の利用を禁止したい

#A.

eslint-plugin-react にこれを出来るルールがある。

https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/forbid-elements.md

jsx
{
	rules: {
    "react/forbid-elements": [
      "error",
      {
        forbid: [
          {
            element: "button",
            message: "Use Button instead.",
          },
          {
	          element: "Column",
	          message: "Use flex layout instead.",
          },
          {
	          element: "DeprecatedElement",
	          message: "Not use DepecatedElement"
          },
        ],
      },
    ],
	}
}

#非推奨な要素などを禁止したい場合

eslint-plugin-import の no-deprecated が利用できる。

https://github.com/import-js/eslint-plugin-import/blob/HEAD/docs/rules/no-deprecated.md

ただし、eslint-plugin-import は非常に動作が重くなることがあるので、追加する場合は TIMING=1 を渡して eslint を実行するなど、パフォーマンスを計測しておくことをおすすめする。

https://github.com/import-js/eslint-plugin-import/issues/2416

https://github.com/import-js/eslint-plugin-import/issues/2340

編集