no-restricted-imports で使ってほしくない何かを import したときに ESLint で警告を出す
開発環境
- next 14.2.15
- eslint 8
前提
ESLintのルールを設定することでimport先を制限することを目的としています。
本題
ユースケースの紹介
分かりにくいので、具体例を出します。
例えば、Dialogコンポーネントを利用するとき、以下の2パターンのコンポーネントが利用できることになります。
- src/components/ui/dialog.tsx
- node_modules/@radix-ui/react-dialog/dist/index
基本的にはshadcn/uiを利用しているので、src/components/ui/配下のコンポーネントを利用するべきですが、たまーに間違えて@radix-uiから直接 import して利用してしまいます。
これをESLintの力を借りて防ぐのが今回の目的になります。
対応策
no-restricted-importsを利用します。
module.exports = {
...(省略),
rules: {
'no-restricted-imports': [
'error',
{
patterns: [
{
group: ['@radix-ui/*'],
message:
"共通コンポーネントの '@/components/ui/*' を使ってください。",
},
],
},
],
...(省略)
};
これで以下のようにエラーが発生するようになります。
'@radix-ui/react-accordion' import is restricted from being used by a pattern. 共通コンポーネントの '@/components/ui/*' を使ってください。eslintno-restricted-imports
shadcn/uiを利用しているときは、ほとんどの場合複数のコンポーネントを利用することになるはずなので、パターンマッチで全般的にエラーがかかるようにしています。
また、このままだとsrc/components/ui/配下のshadcn/uiから作成したコンポーネントにもエラーが出ています。
これらのファイル内ではエラーをもみ消したいので、個別にルールを無視してあげればOKです。
// eslint-disable-next-line no-restricted-imports
import * as AccordionPrimitive from '@radix-ui/react-accordion';さいごに
今回はshadcn/uiを利用するときに、@radix-uiからの直インポートを禁止するルールを作成しましたが、他にも同じようにnext/linkを、プロジェクトで定義した共通コンポーネントの使用に制限をかけることもできるので覚えておくと便利です。