← 此頁是「第 7 章 · Vibe Coding 入門」的前置設定指南，動手前先看
第 7 章 · 前置設定

環境設定速查：從零裝起 VS Code + AI 助手

給「完全沒裝過任何工具」的學員，跟著步驟操作，約 30 - 60 分鐘可全部完成

← 返回 第 7 章 ↑ 課程目錄
第 7 章的動手做，需要你電腦上先有一套「編輯器＋AI 助手」的環境。對「從來沒寫過程式」的學員，這條起跑線太遠。這份前置指南把從零裝好 VS Code 與 AI 助手的所有步驟逐項拆開，含 Windows 與 Mac 兩個系統的操作差異、常見卡關處的排雷。看完此頁照著做完，就能順利進入第 7 章開始學 Vibe Coding。
0

誰需要這份指南

如果你符合下面任一條件，就應該先看完這份再回第 7 章：

  • 從來沒裝過 VS Code、終端機、命令列工具
  • 聽過「Git」「PowerShell」「Terminal」這些字，但不確定怎麼打開
  • 很想試 Vibe Coding，但卡在「不知道第一步要做什麼」

反之，如果你已經會用 VS Code、能在終端機跑指令，可以略過這份直接回第 7 章 §3。

全程要做的 7 件事

  1. 裝 VS Code（寫程式與看檔案的編輯器，Windows 與 Mac 都要裝）
  2. VS Code 介面中文化（裝完預設是英文，改成繁體中文）
  3. 裝 Git（只有 Windows 學員需要，Mac 內建）
  4. 裝 Codex 與啟動（OpenAI 的 AI 助手擴充，ChatGPT 免費帳號就能用）
  5. 裝 Gemini 與啟動（Google 的 AI 助手擴充，目前限企業帳號，先認識即可）
  6. 裝 3 個必備的 VS Code 擴充功能（HTML 即時預覽、PDF 閱讀、Markdown 編輯）
  7. 取得 Gemini API Key（之後第 7 章與案例頁會用到）
時間預估

全程約 30 - 60 分鐘，網路速度與軟體下載是主要變因。建議找一個不會被打斷的時段，一口氣做完。中間哪一步卡住可暫停，下次接著做。所有步驟都是免費的：Codex 用 ChatGPT 免費帳號就能開始，之後想擴大用量再考慮付費方案即可。

1

裝 VS Code

VS Code（Visual Studio Code）是 Microsoft 免費推出的程式編輯器，是 2026 年最多人用的編輯器之一。把它想成「Word 之於文書」，VS Code 就是「給程式碼、HTML、Markdown 用的編輯器」。等一下要裝的 AI 助手（Codex 或 Gemini），就是掛在 VS Code 裡面工作的，所以第一步先把它裝好。

到官方網站下載安裝檔

打開瀏覽器，到下列網址：

code.visualstudio.com

網站會自動偵測你的作業系統，顯示對應的下載按鈕（Windows 或 Mac），按下大按鈕即可下載。

執行安裝程式
Windows

到「下載」資料夾找剛才下載的 VSCodeUserSetup-x64-XX.exe，雙擊執行。安裝精靈會問幾個問題，全部按「下一步」即可（預設選項對新手最友善）。

建議在「選取附加的工作」這頁勾選「將『以 Code 開啟』動作加入 Windows 檔案總管的內容功能表」，之後對任何資料夾按右鍵就有「用 VS Code 開啟」的選項。

Mac

到「下載項目」找下載的 VSCode-darwin-universal.zip，雙擊解壓縮。把出現的 Visual Studio Code 圖示拖到「應用程式」資料夾，這個步驟很重要，沒拖就只是暫存解壓檔，沒裝到系統內。

之後可從 Launchpad 或 Command + 空白鍵搜尋「Visual Studio Code」開啟。

第一次打開 VS Code 確認沒問題

啟動後會看到歡迎頁（Welcome 分頁），左側有一排灰色圖示（檔案總管、搜尋、Git、執行、擴充功能等）。看到這個畫面就代表裝好了。

裝完先別關掉，接下來 § 2 要在 VS Code 內把介面切換成繁體中文。
2

VS Code 介面中文化

VS Code 預設介面是英文。對非英文圈使用者，繁體中文介面更好懂、學習門檻更低。下面用「擴充功能」方式換成繁體中文，全程 1 分鐘。

打開擴充功能面板

左側活動列點第 5 個圖示（四個小方塊組成的「擴充功能 Extensions」按鈕），或按下快捷鍵：

  • Windows：Ctrl + Shift + X
  • Mac：Cmd + Shift + X

右側會出現一個搜尋框與擴充功能列表。

搜尋繁體中文語言包

在搜尋框輸入：

在擴充功能搜尋框輸入Chinese (Traditional)

找到第一個結果「Chinese (Traditional) Language Pack for Visual Studio Code」，作者是「Microsoft」。確認作者是 Microsoft 才裝（避免裝到別人仿冒版）。

安裝並重啟

按下藍色「Install」按鈕，幾秒鐘安裝完成。VS Code 右下角會跳出提示「Change Language and Restart」（變更語言並重啟），點下去 VS Code 會自動重啟，介面就變成繁體中文了。

如果右下角沒跳出提示：按 Ctrl + Shift + P（Mac 用 Cmd），輸入「Configure Display Language」按 Enter，選「zh-tw」，再按提示重啟。
3

裝 Git（只有 Windows 需要）

Git 是「程式碼版本管理工具」，能幫你保留每一次的修改歷史，改壞了可以回到之前的版本。Codex 等 AI 助手會用 Git 來追蹤檔案變動。

Mac 學員可跳過

macOS 內建 Git，不需要額外安裝。可在終端機輸入 git --version 確認，看到版本號就代表已有。直接跳到 § 4 裝 Codex 即可。

Windows 必裝

Windows 沒有內建 Git，必須先裝才能讓 Codex 等 AI 助手順利運作。下面按步驟操作即可。

Windows 安裝步驟

到 Git 官方下載頁
git-scm.com/downloads/win

頁面會自動顯示「Standalone Installer」下載連結，64-bit 版本是現在的標準，點下去開始下載。

執行安裝（一直按 Next 即可）

雙擊下載的 Git-XX.exe，安裝精靈會問十幾個問題，全部用預設值就好，一路按「Next」到最後按「Install」。整個過程約 2 - 3 分鐘。

安裝精靈問的多是給進階使用者調整的細節，預設值對新手是最安全的選擇。哪天想客製再回頭調即可。
驗證 Git 是否裝好

按 Windows 鍵，輸入「Git Bash」按 Enter，會打開一個黑底白字的視窗。在裡面輸入：

在 Git Bash 輸入git --version

按 Enter 後若顯示類似 git version 2.xx.x.windows.1 的訊息，就代表 Git 裝好了。

4

裝 Codex 與啟動（OpenAI 的 AI 助手）

Codex 是 OpenAI 的程式協作代理：裝成 VS Code 擴充後，左側會多一個對話面板，你用白話下需求，它就直接讀寫你資料夾裡的檔案、幫你把東西做出來。用 ChatGPT 帳號登入就能用，免費帳號也可以（用量較小，課堂練習夠用）。

在擴充功能面板搜尋 codex

打開 VS Code，左側「擴充功能」面板（Ctrl/Cmd + Shift + X）搜尋「codex」，找到「Codex – OpenAI's coding agent」、作者 OpenAI（名字旁有藍勾勾），按 Install。

用 ChatGPT 帳號登入

裝好後，VS Code 左側活動列會多一個 Codex 圖示。點開，按「Sign in with ChatGPT」，瀏覽器會自動打開登入頁，登入你的 ChatGPT 帳號並按允許，回到 VS Code 就完成了。

還沒有 ChatGPT 帳號？先到 chatgpt.com 免費註冊一個再回來登入。

開一個練習資料夾，說一句話測試

在桌面新建一個乾淨資料夾（例如「my-first-vibe」），用 VS Code 上方選單「檔案 → 開啟資料夾」打開它。第一次會問「您是否信任此資料夾的作者？」，選「是，我信任作者」（你自己建的資料夾，當然信任）。

然後在 Codex 面板輸入：「幫我做一個會顯示今天日期的網頁」。看到它開始動工、資料夾多出檔案，就代表整套環境通了。

不要直接對整個桌面或文件資料夾開工，AI 會看到該資料夾下所有檔案。一定要先建一個「給 AI 用」的乾淨資料夾。
免費帳號的用量有限但夠練習；之後若常用，再考慮 ChatGPT Plus（每月 20 美元）擴大用量即可，不必一開始就付費。
5

裝 Gemini 與啟動（Google 的 AI 助手）

Gemini Code Assist 是 Google 出的同類擴充，裝法一樣簡單，用法也和 Codex 相同：開資料夾、在面板用白話下需求。但請先看下面的現況說明，再決定要不要裝。

在擴充功能面板搜尋 gemini

左側「擴充功能」面板搜尋「gemini」，找到「Gemini Code Assist」、作者 Google（藍勾勾），按 Install。

登入 Google 帳號

左側活動列會多一個 Gemini 圖示，點開後照指示登入 Google 帳號，登入成功就能在面板對話。

2026 年 6 月起的重要現況

個人 Google 帳號目前無法使用這個擴充

Google 自 2026 年 6 月 18 日起，停止「個人帳號」在 Gemini Code Assist 的服務（含免費個人版與 Google AI Pro／Ultra 訂閱）。目前只有公司或學校透過 Google Cloud 付費開通的帳號能登入使用，個人帳號登入會被擋下。

所以怎麼選：一般學員請以 § 4 的 Codex 為主力（ChatGPT 免費帳號就能用）；公司或學校有開通的學員，兩個都能裝、擇一常用即可。想體驗 Google 家的，可另外下載它免費的獨立編輯器 Antigravity（不是 VS Code 擴充，是一套長得很像 VS Code 的獨立軟體，用個人 Google 帳號即可）。

6

必裝 3 個 VS Code 擴充功能

VS Code 本身功能很多，但有幾個「幾乎每天都會用到」的擴充功能要先裝。下面 3 個是給 Vibe Coding 學員的必裝清單，全部免費。

共通安裝步驟：左側「擴充功能」面板（Ctrl/Cmd + Shift + X） → 搜尋下方關鍵字 → 確認作者 → 按 Install。

Live Preview
作者：Microsoft

VS Code 官方出品的 HTML 即時預覽工具。寫完 HTML 後不必雙擊檔案在瀏覽器開，VS Code 內就能看到結果，存檔自動重整。

怎麼用：打開任何 HTML 檔，右上角點「放大鏡 + 頁面」圖示（Show Preview），右側出現預覽分頁。

搜尋關鍵字：Live Preview（作者選 Microsoft）

vscode-pdf
作者：tomoki1207

把 PDF 直接在 VS Code 內打開。學員常需要把 PDF 拖給 AI 助手讀（論文、手冊、報價單），裝這個後不必切換 PDF 軟體。

怎麼用：裝好後在檔案總管雙擊任何 .pdf 檔，自動用 VS Code 內建檢視器開啟。

搜尋關鍵字：vscode-pdf（作者 tomoki1207，下載數很高的那個）

Markdown All in One
作者：Yu Zhang

Markdown 編輯神器。AI 助手的說明書檔 AGENTS.md、各種 README.md 都是 Markdown 格式，這個擴充提供即時預覽、快捷鍵、表格自動排版。

怎麼用：打開任何 .md 檔，右上角點「分頁圖示」（Open Preview to the Side），右側出現排版後的預覽。

搜尋關鍵字：Markdown All in One（作者 Yu Zhang）

為什麼選這 3 個

這 3 個對應 Vibe Coding 學員每天都會碰到的 3 種檔案格式：HTML（做網頁）、PDF（餵給 AI 讀）、Markdown（寫 AGENTS.md 與筆記）。其他擴充等需要時再裝（例如寫 Python 才裝 Python 擴充、寫 React 才裝 React 工具）。新手不要一次裝太多，每個擴充都消耗記憶體與啟動時間，少而精比較好。

7

取得 Gemini API Key

API Key（呼叫 AI 服務的密鑰，等同密碼）會在第 10 章「串接外部服務」、「資料庫循環系統」附錄與多個案例頁用到。Google 的 Gemini API 提供慷慨的免費額度（每分鐘 15 次、每天 1500 次），對個人練習綽綽有餘。先取得備用。

到 Google AI Studio 登入
aistudio.google.com

用你的 Google 帳號登入。如果還沒有 Google 帳號，先到 google.com 註冊（也免費）。

建立新的 API Key

登入後左下角找到並點「Get API key」按鈕。進入後右上角點「Create API key」（建立 API 金鑰）。

系統會問你要把這個 key 綁在哪個 Google Cloud 專案。選預設的「Create API key in new project」（在新專案內建立），等幾秒鐘。

馬上把 key 複製並安全保存

建立完成後會跳出一串長字元（類似 AIzaSy... 開頭）。立刻按「Copy」複製，貼到下列任一安全位置：

  • 密碼管理工具（推薦 1Password、Bitwarden）
  • VS Code 內建一個檔案「my-api-keys.txt」存著，並把該檔加進 .gitignore 避免被誤推上 GitHub
  • 記事本檔案，存在電腦但不上傳雲端
API Key 等同密碼，外洩後別人會用你的帳號計費或濫用。絕對不要：① 截圖貼到 LINE / FB；② 寫進公開 GitHub 程式碼；③ 寫進公開部落格範例。
了解免費額度的限制

2026 年 5 月時的免費額度：

  • 每分鐘最多 15 次請求
  • 每天最多 1500 次請求
  • 用完隔天自動重置

個人練習、小工具測試完全夠用。如果做的工具會被多人使用、流量大，再考慮升級付費方案。Google 政策可能隨時間變動，授課前可到 Gemini API 官方價格頁確認最新數字。

（重要）2026 年 6 月起：要把網址登記在「允許清單」

從 2026 年 6 月 19 日起，Google 政策變動：新申請的 Gemini API key 必須先指定「哪個網址才能用這把 key」，沒指定的 key 會被自動鎖住。可以把它想成銀行金融卡綁定門號，沒綁就刷不了。

什麼情況下要做這個設定：

  • 只在自己電腦練習、學習（例如本章後面跑 Gemini CLI、在自己電腦上呼叫 API）→ 暫時可以不設，但建議還是設好避免未來忘記
  • 要部署到 GitHub Pages、Vercel 等公開網站，給別人用 → 一定要設，不然 key 一上線就被鎖
  • 要分享給家人朋友用 → 也要設，把對方裝置或網址加進清單

怎麼設定（簡略流程，要設定時再詳查）：

  1. 到 Google Cloud Console 登入
  2. 左側選單找「APIs & Services（API 與服務）→ Credentials（憑證）」
  3. 找到剛建立的 API key，點進去編輯
  4. 「Application restrictions（應用程式限制）」選「HTTP referrers（網站）」
  5. 「Website restrictions（網站限制）」加上你要部署的網址，例如 https://your-name.github.io/*（最後的 /* 代表這個網域下所有頁面）
  6. 儲存後，這把 key 只能被該網域呼叫；其他人偷到也用不了，安全許多
這個設定其實是好事：以前無限制的 key 一旦外洩，全世界都能用你的帳號計費；綁網址後就算 key 被偷，只有指定網址才能呼叫，外洩風險大幅降低。
附

改用 Claude Code：終端機路線（選用）

前面 § 4、§ 5 的 Codex 與 Gemini 走「圖形介面擴充」路線，對初學者最友善。本課部分案例示範用的是 Anthropic 的 Claude Code：它走「終端機打指令」路線，較進階、也很強大，需要訂閱方案或 API 付費。有需要的人再展開下面的完整步驟，一般學員可以略過。

展開完整步驟：裝 Claude Code、在 VS Code 內啟動
附1

裝 Claude Code

Claude Code 是 Anthropic 的官方安裝程式，下面用官方推薦的一行指令裝最新版（也會自動更新）。Windows 與 Mac 指令不同，先確認自己的系統再做。

Windows 安裝路徑

以系統管理員身分打開 PowerShell

按 Windows 鍵 → 輸入「PowerShell」 → 右側出現「Windows PowerShell」結果 → 按右鍵 → 選「以系統管理員身分執行」。

怎麼確認是系統管理員模式：標題列會顯示「系統管理員：Windows PowerShell」，沒有「系統管理員」這幾個字就是模式錯了，重來一次。
貼上官方安裝指令

把下面這行整段複製，到 PowerShell 視窗按右鍵直接貼上（PowerShell 預設右鍵就是貼上）：

Windows PowerShell（系統管理員模式）irm https://claude.ai/install.ps1 | iex

按 Enter，等待約 2 - 5 分鐘下載並安裝。安裝程式會自動處理路徑設定。

關閉 PowerShell，重新打開驗證

完全關掉剛才那個 PowerShell 視窗（按右上角 X），重新打開一個新的（這次不用系統管理員模式），輸入：

在新的 PowerShell 視窗驗證claude --version

看到類似 2.x.x (Claude Code) 的版本號就代表裝好了。

Mac 安裝路徑

打開終端機（Terminal）

按 Command + 空白鍵，跳出 Spotlight 搜尋框，輸入「Terminal」按 Enter，會打開一個黑底（或白底，看你的系統設定）文字介面。

Mac 的 Terminal 跟 Windows 的 PowerShell 是同類東西，都是「用打字下指令操作電腦」的介面，只是名稱不同。Claude Code 在這兩種介面內都能跑。
貼上官方安裝指令

把下面這行整段複製，到 Terminal 按 Command + V 貼上：

Mac Terminalcurl -fsSL https://claude.ai/install.sh | bash

按 Enter，等待約 2 - 5 分鐘。安裝程式會自動把 claude 指令加進你的 shell 設定（zsh 或 bash 都自動偵測），不必手動修改。

也可以用 Homebrew 安裝（適合已熟悉 Homebrew 的進階使用者）：brew install --cask claude-code。Homebrew 版不會自動更新，要記得 brew upgrade claude-code。
關掉 Terminal 重開驗證

關掉現在這個 Terminal 視窗（Command + Q），重新打開一個新的（讓設定生效），輸入：

在新的 Terminal 驗證claude --version

看到版本號就代表裝好了。

常見排雷清單

Windows：「無法辨識為 cmdlet 的名稱」（最常見）

沒有完全關閉 PowerShell 就直接驗證，環境變數沒生效。完整關閉所有 PowerShell 視窗後重開即可。如果重開仍不行，到「系統內容 → 環境變數 → 編輯使用者 PATH」加上 C:\Users\你的名字\.local\bin 後再重開 PowerShell。

Windows：跑指令時出現「無法載入指令碼」

Windows 預設禁止跑第三方指令碼。在系統管理員 PowerShell 跑這行解除：Set-ExecutionPolicy -Scope CurrentUser RemoteSigned，跳出確認按 Y。

Mac：「command not found: claude」

同樣是沒有重開 Terminal。如果重開仍不行，輸入 source ~/.zshrc（zsh 用戶）或 source ~/.bashrc（bash 用戶）讓設定立刻生效。

還是不行怎麼辦：到 Claude Code 官方Quickstart 頁看最新指令（Anthropic 偶爾會更新安裝方式）。或在搜尋引擎查「Claude Code install 你的系統名稱 你看到的錯誤訊息」，社群有完整解法。

附2

在 VS Code 內啟動 Claude Code

VS Code 與 Claude Code 都裝好後，這一段讓兩者連起來，不必開兩個視窗切換。在 VS Code 內就能跑 Claude Code，所有檔案、終端機、AI 對話都在同一個畫面。

建立一個練習用資料夾

在電腦任何位置（建議桌面方便找）建立一個新資料夾，命名「my-first-vibe」或自己喜歡的名字。這個資料夾會用來放第一個練習專案。

不要直接在桌面或文件根目錄跑 Claude Code，因為 AI 會看到該資料夾下所有檔案。一定要先建一個「給 AI 用」的乾淨資料夾。
用 VS Code 打開該資料夾

打開 VS Code，從上方選單選「檔案 → 開啟資料夾」，選剛建立的資料夾，按「選取資料夾」（Win）或「開啟」（Mac）。

第一次打開新資料夾時，VS Code 會問「您是否信任此資料夾的作者？」，選「是，我信任作者」（這是你自己建的資料夾，當然信任）。

在 VS Code 內開啟終端機

從上方選單選「檢視 → 終端機」，或按快捷鍵：

  • Windows / Mac 都是：Ctrl + `（反引號，鍵盤 1 左邊那顆）

VS Code 下方會出現一個終端機面板，已自動切到剛才開啟的資料夾路徑。

跑 claude 啟動 Claude Code

在終端機輸入：

在 VS Code 終端機輸入claude

按 Enter。第一次跑會問幾個問題：

  • 偏好的顏色主題：選預設的「dark」即可
  • 登入方式：選「Claude Pro / Max 等訂閱方案」（如果你已訂閱）或「API key 模式」（用付費 API），瀏覽器會自動開啟授權頁，登入 Anthropic 帳號完成授權

看到對話提示符 > 就代表 Claude Code 啟動完成，可以開始輸入需求了。

（強烈推薦）安裝 Claude Code 官方 VS Code 擴充功能

純終端機操作對新手不友善。Anthropic 官方提供 VS Code 擴充功能，把黑底白字的對話介面換成圖形化側邊欄，學習門檻低很多。

在 VS Code 左側「擴充功能」面板（Ctrl/Cmd + Shift + X）搜尋「Claude Code」，找作者是「Anthropic」的版本，按 Install。

安裝後 VS Code 左側活動列會多一個 Claude 圖示，點下去就是圖形化對話介面，可以拖拉檔案、看歷史對話、切換模型。

擴充功能需要前面已裝好的 Claude Code 才能用，兩者是「圖形化介面 + 後台引擎」的關係。