コンポーネントを直接Firestoreに依存させないためのeslintルール

ありがたいことに、ここ数か月リード的な立場になってきておりコードレビューの量が多くなってきました。
そこで、自動化やシステム化できる部分はしていき本質的な部分をレビューしたいと考えました。
現在はフロントエンドにReact(Next.js)、バックエンドにはFirebaseを使用しデータベースにはFirestoreを使うという環境にいます。
その中でレビューの負担を軽減するためにいいのではないかと思ったesilntをルールをこの記事に残します。

目的

コンポーネントでのfirebase/firestoreのimportを禁止することによって、コンポーネントがfirestoreを知らなくてもいいようにしたい(コンポーネントが直接firestoreに依存しないようにしたい)
コンポーネントはデータベースに何を使っているかを知っている必要はなく、データベースとのやり取りは基本的にカスタムフック等に分離すればいいという考えです。

前提

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

上記いずれかで生成した直後のNext.jsアプリケーションを想定しています。
Create React App等で作成している場合は、eslint, eslint-plugin-importの導入が必要になります。

方法

eslintのno-restricted-importsでは特定のファイルで特定のpathのimportを禁止するということができなかったのでeslint-plugin-importのimport/no-restricted-pathsを使用します。
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-restricted-paths.md

以下の記述を.eslintrc.jsonのrulesに追加します。

    "import/no-restricted-paths": [
      "error",
      {
        "zones": [
          {
            "from": "node_modules/firebase/firestore",
            "target": "**/*.tsx",
            "message": "コンポーネントでfirebase/firestoreをimportしないでください"
          }
        ]
      }
    ]

任意の.tsxファイルで以下の画像のようなエラーが出ていることが確認できると思います。

結果

eslintでコンポーネントから直接firebase/firestoreを利用しないという制限をかけられて嬉しい！
コードレビューでの見落としがなくなって嬉しい！