在 WSL 中使用 Antigravity / VSCode 進行 AI 前端開發的準備

在 WSL 環境中，搭配 Antigravity / VSCode 這類支援 AI 的 IDE 進行前端開發前的基本準備流程。目標是建立一個穩定、可執行瀏覽器自動化測試與 AI 協作開發的環境。

一、環境前提

1. Windows 已安裝 WSL（建議使用 Ubuntu）

2. 已安裝 Node.js（建議使用 LTS 版本）

3. 使用 VSCode Remote - WSL 或 Antigravity 連線至 WSL 環境

    4. 確認 Node 版本： node -v

二、安裝 Playwright（前端測試與瀏覽器控制）

在 AI 協助開發前端頁面時，常會搭配 Playwright 做自動化測試與 DOM 驗證。在 WSL 中需要額外安裝 Linux 依賴套件。

步驟 1：更新套件清單
sudo apt-get update

備註:

uBuntu 24.04加強了安全性, 執行後若發生GPG key的警告,請執行以下指令:

1. 下載官方設定包

wget https://packages.microsoft.com/config/ubuntu/24.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb 

2. 安裝

sudo dpkg -i packages-microsoft-prod.deb

3. 刪除剛下載的暫存檔 

rm packages-microsoft-prod.deb

步驟 2：安裝 Playwright 必要的系統依賴
補齊 Linux 缺少的瀏覽器運行庫（例如 libgbm、libasound 等）：

npx playwright install-deps

步驟 3：安裝 Chrome
讓 Playwright 可以實際控制瀏覽器：

npx playwright install chromium

WSL 本質是 Linux 環境，預設並沒有完整的桌面瀏覽器依賴函式庫。如果直接執行 Playwright 測試，很可能會出現 shared library 錯誤。透過 install-deps 可以一次補齊。

在 AI 協助開發流程中，例如：

• 讓 AI 產生前端頁面

• 自動執行測試

• 驗證 UI 元素

• 模擬使用者操作

以上就是在 WSL 中使用 Antigravity / VSCode 進行 AI 前端開發前的基本準備流程紀錄。