モジュールのimportはどのように書いていますか？

相対パスの場合、階層が深くなればなるほど ../../../../SomeComponent のように ../ をいくつも並べることになり見た目にもわかりにくいです。これは相対パスがimport 先のファイルを起点としたパスになるためです。

一方で絶対パスと呼ばれる階層の上を起点としたパスの書き方があります。 @/src/components/Layout/SomeComponent のように @/ に続いて常に同じフォルダから始まるため、相対パスと比べて階層の見通しがとても良くなります。

React, TypeScript を使用するプロジェクトでの絶対パスで import する方法です。

要件

• React
• TypeScript
• Vite

ファイルディレクトリ

/
  src/
    components/
      SomeComponent.tsx
    index.tsx
  tsconfig.json
  vite.config.ts

設定方法

1. tsconfig.json に追記

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

2. vite.config.ts に追記

export default defineConfig({
  plugins: [
    ...
  ],
  resolve: {
    alias: {
      "@/src": "/src"
    },
  },
});

以上で設定は完了です。

例

src
|-- components/
|   |-- Button/
|       |-- Button.tsx
|
|-- pages/
    |-- UserProfile/
        |-- UserProfile.tsx

Button.tsx をimportする場合は以下のように書くことができます。

import Button from "@/src/components/Button/Button";