【Vite×React】import時のパスエイリアスを設定してみる

プライベートで開発中のVite × Reactアプリケーション。それなりの規模になってきて、そろそろ相対パスでimportするのが辛くなってきた。。

1import { PicturesApi } from '../../../api';
2import { useApiRequest } from '../../../hooks/useApiRequest';
3
4...
5

そこで今回は、パスエイリアスを設定してこの辛みから逃れてみます。

大まかには以下の２通りがありそう。

1. vite.config.tsのresolve.alias記述とtsconfig.json設定の組み合わせ

vite.config.tsにを記述し、それとtsconfig.jsonでのパスエイリアス設定を組み合わせて設定する方法です。

vite.config.ts
1export default defineConfig({
2resolve: {
3  alias: [
4    { find: '@picture-app/', replacement: `${__dirname}/src/` },
5  ],
6},
7  plugins: [react()],
8});
9

tsconfig.json
1{
2  "compilerOptions": {
3  "baseUrl": "./",
4  "paths": {
5    "@picture-app/*": ["src/*"],
6  },
7    ...
8

この手法での主な注意点は、

• vite.config.tsのaliasに定義するreplacementは末尾のまでちゃんと書く
• tsconfig.jsonは末尾のをしっかり書く

こと。

2. vite-tsconfig-pathsとtsconfig.json設定の組み合わせ

２つ目はを利用した設定方法です。まずは該当パッケージをインストール。

1npm i -D vite-tsconfig-paths
2

vite.config.ts
1import react from '@vitejs/plugin-react';
2import { defineConfig } from 'vite';
3import tsconfigPaths from 'vite-tsconfig-paths';
4
5export default defineConfig({
6plugins: [react()],
7plugins: [react(), tsconfigPaths()],
8});
9

tsconfig.json
1{
2  "compilerOptions": {
3  "baseUrl": "./",
4  "paths": {
5    "@picture-app/*": ["src/*"],
6  },
7    ...
8

こちらの手法だと、パスエイリアスに関する設定記述はtsconfig.jsonの側に一元化することができるので、時間が経つごとにありがたみが増しそう。ということで今回はこちらの手法を選択しました。

おまけ: VSCode でパスエイリアスの補完が効くように

Path Autocompleteの拡張機能を入れつつ、以下のように設定を追加することで補完も効かせられます。

.vscode/settings.json
1 {
2  "path-autocomplete.pathMappings": {
3    "@picture-app": "${folder}/src",
4  }
5   ...
6 }
7

ちなみにこちらは末尾のを気にしなくてもOK。

https://chaika.hatenablog.com/entry/2022/05/14/083000

https://github.com/KiKiKi-KiKi/ts-react-app#gear-vscode-settings-for-auto-completion-of-path-aliases