Q. ESLintで特定の要素の利用を禁止したい
ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。
Table of Contents
- # A.
- # 非推奨な要素などを禁止したい場合
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