Back to home
Search contents

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

Published at
137 words
1min read

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