VSCodeでのVite/Vue3アプリのデバック

Viteで起動したVue3アプリのデバックで苦戦したので備忘録を残す

1. (macのみ)setting.jsonの設定

macの場合、vsc内のターミナルにうまく環境変数が引き継がれなく、
yarnやpnpmのコマンドが使えないので、ターミナルの設定が必要。
setting.jsonに以下の設定を追加する。

.vscode/setting.json

{
 "terminal.integrated.profiles.osx": {
        "zsh": {
            "path": "zsh",
            "args": [
                "-i"
            ]
        }
    },
    "terminal.integrated.defaultProfile.osx": "zsh",
    "typescript.tsdk": "node_modules/typescript/lib",
}

2. launch.jsonの設定

launch.jsonに以下の設定を追加。
webRootとurlの設定が重要。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:4001",
            "webRoot": "${workspaceFolder}/${モノレポ構成の場合、プロジェクトのrootディレクトリ}",
        }
    ]
}

• type : edgeで起動する場合はmsedge
• request : launchを選択
• name : 任意の名前
• url : viteで起動する際のportと合わせる
• webRoot : viteで起動する本体が置いてあるディレクトリ。

3 viteでのvueアプリ起動

webRootで設定したディレクトリのvueアプリを起動させる。

$ vite --port 4001 --config vite.config.ts

4 デバックの起動

VSCのデバックボタンからデバックを起動させる。
開いたedgeのvueアプリはbreakポイントで止まるようになる。