viteで作成したreactプロジェクトにimport aliasを設定する

学習元

Shin CodeさんのYouTube動画で詳しいことは解説されています。

import alias

作成したtsconfig.jsonに以下を追加する

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

設定を反映

tsconfig.jsonを変更するとvite.config.tsも変更する必要があります。
しかし毎回どちらも変更するのは面倒なので、tsconfig.jsonの変更を自動で反映させるようにします。
以下のモジュールを追加

npm i -D vite-tsconfig-paths

vite.config.tsを変更

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from "vite-tsconfig-paths"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

これでimport aliasの設定は完了です。