從 launch.json 啟動的配置來決定執行的流程

執行順序

當 VS Code 中的 tasks.json 和 launch.json 配合運作時，會依照一定的順序來執行。理解這個順序能幫助確保開發流程順利進行。以下是執行順序的詳細說明：

1. 觸發 launch.json 配置中的 "preLaunchTask"

• 當你啟動除錯（例如按下 F5）時，VS Code 會首先執行 launch.json 中指定的 preLaunchTask。這個任務是用來準備環境的，例如啟動後端服務或執行其他必要的初始化步驟。
• 在我們的配置中，"preLaunchTask": "run-backend" 會啟動後端服務。

2. 執行 run-backend 任務

• 在 tasks.json 中，run-backend 任務會啟動後端服務（例如使用 dotnet run 啟動 ASP.NET Core）。這會在 VS Code 的終端窗口中運行，並且此任務執行過程會顯示在 VS Code 的「終端」面板中。
• 這個步驟的目的是確保後端服務已經啟動，並且準備好處理請求。

3. 啟動前端服務（如果設定了 preLaunchTask）

• 如果在 launch.json 中還設定了其他前端啟動配置（例如啟動 Vue 3 的開發伺服器），這個步驟將會在後端啟動之後執行。
• 在我們的配置中，"command": "npm run dev" 會啟動 Vue 3 開發伺服器。

4. 開始除錯會話

• 當 preLaunchTask 所有任務都完成後，VS Code 會開始進行除錯會話。
• 在 launch.json 中，指定了 program（例如 .dll 文件）以及其他配置，VS Code 將會開始啟動你的應用程式並附加到它上面進行除錯。

5. 執行開發伺服器或其他工作

• 一旦後端和前端的開發伺服器都啟動，你的應用將會處於可以進行交互或進行其他測試的狀態。

總結

1. 啟動後端服務
   當你按下 F5，VS Code 會執行 preLaunchTask（這是 tasks.json 中的 run-backend 任務），啟動後端應用。

2. 啟動前端開發伺服器
   當後端服務成功啟動後，launch.json 中的 Vue Dev Server 任務將會啟動 Vue 3 開發伺服器。

3. 除錯程序啟動
   在這一過程中，VS Code 會開始啟動除錯會話，並且你的應用會在啟動後的環境中運行，可以進行除錯和查看日誌。

4. 進入開發模式
   當一切都啟動完成後，前端應用會在開發模式下運行，你可以開始進行調試、查看應用的功能，並對應用進行測試。