Viteでvanilla-tsアプリ作成とデバッグ方法

Viteでvanilla-tsアプリ作成とデバッグ方法

ひな形プロジェクト作成

$ npm create vite@latest vite_test -- --template vanilla-ts
$ cd vite_test
$ npm i

ひな形プロジェクトが作成されます。

npm scritps

npm run devで開発モードで起動します。デフォルトポートは5173です。

http://localhost:5173/

localhost

こんな画面が起動します。

VSCodeでデバッグ

launch.jsonを作成します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VSCodeのプラグインは特に必要ありません。

npm run devで開発モードで起動後、F5を押せばChromeが起動します。ブレイクポイントを張っている個所で止まるようになります。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^