O hirunewani blog

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

Created at

ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。

A.

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

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

{
	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