React Nativeでreact-useを正しくimportするためのBiome / ESLintの設定

https://github.com/streamich/react-use

react-use を便利でよく使うのですが、React Nativeだと以下のようにimportしてしまうとエラーが発生します。

import { useMount } from 'react-use'

ツリーシェイクが有効になっていないので、ブラウザでのみ動作するフックもインポートされてしまい、React Nativeでは動作しないためエラーになってしまいます。
正しくimportするなら以下のようにする必要があります。

import useMount from 'react-use/lib/useMount';

が、VSCodeの補完はuseMountをreact-useからインポートしてくるし、毎回手書きで修正するのは面倒すぎる……、と思っていたのですが、解決策がありました。

Biome / ESLintの設定をする

https://github.com/streamich/react-use/issues/483#issuecomment-1319177486

これを参考にすればOK。

ESLintの設定

.eslintrc.json

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "react-use",
        "message": "Please import the specific function from react-use instead of the whole library (e.g. import useTimeout from 'react-use/lib/useTimeout')"
      }
    ]
  }
}

Biomeの設定

僕はBiome派なのですが、こっちも同じように設定可能でした。

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "noRestrictedImports": {
          "options": {
            "paths": {
              "react-use": "Please import the specific function from react-use instead of the whole library (e.g. import useTimeout from 'react-use/lib/useTimeout')"
            }
          },
          "level": "error"
        }
      }
    }
  }
}

結果

こうしておくと、こんな感じでエラーを出してくれるようになります。

useXxx を使おうとしたときも、 react-use/lib/useXxx からimportするような補完をしてくれて最高。

まとめ

React Native で react-use をよく使うよって人は絶対設定しよう。