PhpStorm で vite.config.js の Alias を認識させる

vite いいぞ

JS の import は Webpack でもそうですが、パスのエイリアスを使うことで絶対パス指定のように書けてすっきりしますね

import * from "../../../libs/lib.js" // こんなパスは嫌だ (ファイル名も)
// ↓
import * from "~/libs/lib.js"

上記の場合はエイリアスの文字に ~ を指定しています

vite.config.js はこんな感じ

vite.config.js

export default defineConfig({
    // 中略
    resolve: {
        alias: {
	    '~': path.join(__dirname, 'src'),
        },
    },
})

で、これはこれですっきりなのですが PhpStorm でインポート元が参照できませんでした

PhpStorm にエイリアスを知らせるすべは無いか調べたところ、次のようにすれば解決しました

1. プロジェクトルートに phpstorm.config.js を設置する
2. 内容を以下のようにして保存する
3. 解決

phpstorm.config.js

System.config({
    "paths": {
        "~/*": "./src/*",
    },
})

普段は PhpStorm しか使わないのですが JetBrains IDE はどれでもいけそうな気がします