Vite+React+TypeScript+EsLintで、Importパスにエイリアスを使うためにハマったこと

Vite + React + TypeScript +EsLintで、パスエイリアスを書こうとしたら下記のようなエラーになったので、その解消方法です。

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

環境

• Windows11
• node: v16.13.2
• react: v17.0.2
• その他
  

Vite + React + TypeScriptでパスエイリアスの設定方法

src/components/Page1.tsxファイルに定義しているPage1コンポーネントを
下記のように@から始まるパスとしてインポートできるように設定します。

// このように指定していたimportを
import Page1 from './components/Page1'

// このようにインポートする
import Page1 from '@/components/Page1'

1. tsconfig.json

まずtsconfig.jsonのcompileOptionsに、baseUrlとpathsを設定します。

tsconfig.json(抜粋）

"compilerOptions": {
  "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
}

2. vite.config.ts

vite.config.tsのresolve.aliasを下記のように追加します。

export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: '/src' }]
  },
  plugins: [react()]
})

3. EsLint

eslint-import-resolver-typescript をインストールします。

npm install eslint-import-resolver-typescript --save-dev

そしてeslintrc.ymlのimport/resolverにtypescript: []を追加して typescript のサポートを有効にします。

.eslintrc.yml(抜粋)

settings:
  import/resolver:
    typescript: []