01-2 打造專業級開發環境：VS Code 與 Bun

1. 編輯器首選：Visual Studio Code (VS Code)

別懷疑，2026 年依然是 VS Code 的天下。

必裝 Extensions (擴充套件) 2026 版

請打開 VS Code 左側的方塊圖示 (Extensions)，搜尋並安裝以下神器：

1. Biome (取代 Prettier/ESLint):
   • 為什麼裝它？ 它是 2026 的新標準，格式化速度比 Prettier 快 25 倍。
   • 功能：存檔瞬間幫你排版、補上分號、修正縮排。
2. Error Lens:
   • 為什麼裝它？ 它會把錯誤訊息直接顯示在程式碼行尾，不用滑鼠移上去才看得到。
   • 體驗：寫錯當下立刻被打臉，學習效率加倍。
3. Pretty TypeScript Errors:
   • 為什麼裝它？ 讓那些原本只有火星人看得懂的報錯訊息，變成人類可讀的英文。
4. Auto Rename Tag:
   • 功能：改 HTML 的 <div> 開頭，結尾的 </div> 會自動跟著變。

2. 安裝運行環境：Bun

我們略過原本繁瑣的 Node.js 安裝，直接用 PowerShell (Windows) 或 Terminal (Mac) 安裝 Bun。

Windows 使用者

打開 PowerShell (以管理員身分)，輸入：

powershell -c "irm bun.sh/install.ps1 | iex"

Mac/Linux 使用者

打開 Terminal，輸入：

curl -fsSL https://bun.sh/install | bash

安裝完後，輸入 bun --version。如果有看到版本號 (例如 1.2.x)，恭喜你，你的電腦已經裝上了渦輪引擎！

3. LAB 01: Hello World 三部曲

我們來做個實驗，用三種不同方式說 Hello。

實作 A: 瀏覽器 Console (最原始)

1. 打開 Chrome。
2. 按 F12 開啟開發者工具 -> 切換到 Console 分頁。
3. 輸入 alert("Hello Browser!") 按 Enter。
4. 結果：網頁會彈出視窗。這是 JS 最一開始的樣子。

實作 B: 使用 Bun (現代後端)

1. 在桌面建一個資料夾 js-2026-demo。
2. 用 VS Code 打開它。
3. 建立檔案 index.js。
4. 輸入：

   console.log("Hello Bun! I am super fast ⚡️");

5. 打開 VS Code 下方的 Terminal (Ctrl + ~)。
6. 輸入 bun run index.js。
7. 結果：終端機瞬間印出文字。

實作 C: 體驗 TypeScript (Bun 的超能力)

新手不用怕，這一點都不難！

1. 建立檔案 app.ts (注意是 .ts)。
2. 輸入：

   const greeting: string = "Hello TypeScript via Bun!";
   console.log(greeting);

3. 在 Terminal 輸入 bun run app.ts。
4. 結果：竟然直接跑起來了！ 註：如果是早期的 Node.js，這一步你會直接報錯，需要安裝一堆編譯工具。