no-restricted-imports で使ってほしくない何かを import したときに ESLint で警告を出す

2024-10-20

2 months ago

開発環境

next 14.2.15
eslint 8

前提

ESLintのルールを設定することでimport先を制限することを目的としています。

本題

ユースケースの紹介

shadcn/uiを利用するとき、shadcn/ui自体がradix-uiを利用しているので、二重でインポートできる状態になります。

分かりにくいので、具体例を出します。

例えば、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/*' を使ってください。",
          },
        ],
      },
    ],
  ...(省略)
};

.eslintrc.js

これで以下のようにエラーが発生するようになります。

'@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を、プロジェクトで定義した共通コンポーネントの使用に制限をかけることもできるので覚えておくと便利です。

参照

https://eslint.org/docs/latest/rules/no-restricted-imports