主題
快速開始
歡迎來到 AI 時代的軟體工程工作坊！本指南將幫助你快速設置開發環境並開始使用 Claude Code 進行 AI 輔助開發。
前置需求
在開始之前，請確認你的電腦符合以下需求：
macOS
| 項目 | 需求 |
|---|---|
| 作業系統 | macOS 14 (Sonoma) 或更新版本 |
| 處理器 | Apple Silicon (M1/M2/M3/M4) 或 Intel |
| 記憶體 | 8 GB RAM（建議 16 GB+） |
| 硬碟空間 | 15 GB 以上可用空間 |
| 其他 | 建議安裝 Rosetta 2 |
Windows
| 項目 | 需求 |
|---|---|
| 作業系統 | Windows 10/11 64-bit (Pro, Enterprise, Education) 22H2+ |
| 處理器 | 64-bit 處理器，支援 SLAT |
| 記憶體 | 8 GB RAM（建議 16 GB+） |
| 硬碟空間 | 15 GB 以上可用空間 |
| 虛擬化 | BIOS 啟用 VT-x/AMD-V，WSL 2.1.5+ |
Windows 注意事項
- Windows Home 版本只能執行 Linux 容器，無法執行 Windows 容器
- 需要在 BIOS 中啟用硬體虛擬化（預設可能關閉）
- 建議使用 WSL 2 作為 Docker 後端
安裝順序
建議按照以下順序安裝，確保相依性正確：
1. Node.js v24 LTS (Krypton)
↓
2. Docker Desktop
↓
3. Claude Code (原生安裝)
↓
4. VS Code + 擴充套件
↓
5. MCP Servers (Context7, Playwright 等)
↓
6. 建立 CLAUDE.md（重要！）快速檢查
安裝完成後，執行以下命令確認環境：
bash
# 檢查 Node.js（應為 v24.x.x）
node --version
# 檢查 npm（應為 v10.x.x）
npm --version
# 檢查 Docker
docker --version
docker run hello-world
# 檢查 Claude Code
claude --version首次啟動 Claude Code
bash
# 進入你的專案目錄
cd your-project
# 啟動 Claude Code
claude
# 首次使用會引導你完成：
# 1. Anthropic 帳號登入
# 2. API 授權
# 3. 權限設定第一件要做的事：建立 CLAUDE.md
最重要的 Best Practice
根據 Anthropic 官方建議，CLAUDE.md 是 Claude Code 最重要的設定檔。它讓 Claude 了解你的專案規範。
使用內建指令自動產生：
bash
# 在 Claude Code 中執行
/init或手動建立 CLAUDE.md：
markdown
# CLAUDE.md
## 專案概述
[描述你的專案]
## 技術棧
- Next.js 16 + App Router
- TypeScript (strict mode)
- shadcn/ui + Tailwind CSS
## 開發指令
- `npm run dev` - 啟動開發伺服器
- `npm run build` - 建置專案
- `npm run lint` - 執行 ESLint
## 程式碼規範
- 使用 TypeScript，不使用 any
- 元件使用 PascalCase
- 優先使用 Server ComponentsVS Code 必裝擴充套件（2026）
AI 輔助開發
| 擴充套件 | 用途 |
|---|---|
| Claude Code | Anthropic 官方 VS Code 整合 |
| Cline | 自主任務執行、Plan-then-Act 模式 |
| GitHub Copilot | 即時程式碼補全 |
開發必備
| 擴充套件 | 用途 |
|---|---|
| ESLint | JavaScript/TypeScript 程式碼檢查 |
| Prettier | 程式碼格式化（啟用 Format on Save） |
| Error Lens | 即時顯示錯誤，不需 hover |
| Pretty TypeScript Errors | 美化 TypeScript 錯誤訊息 |
| GitLens | Git 增強功能 |
| Tailwind CSS IntelliSense | Tailwind 自動補全 |
一鍵安裝
bash
# 複製貼上到終端機執行
code --install-extension dbaeumer.vscode-eslint && \
code --install-extension esbenp.prettier-vscode && \
code --install-extension usernamehw.errorlens && \
code --install-extension yoavbls.pretty-ts-errors && \
code --install-extension eamodio.gitlens && \
code --install-extension bradlc.vscode-tailwindcss驗證完整環境
建立測試專案確認一切正常：
bash
# 建立測試專案
npx create-next-app@latest test-app --typescript --tailwind --app
cd test-app
# 啟動 Claude Code
claude
# 在 Claude Code 中測試
> 請幫我在首頁加入一個 "Hello World" 的標題如果 Claude 成功修改檔案，恭喜你！環境設置完成。
下一步
- 環境安裝 - 各工具詳細安裝步驟
- Claude Code 入門 - 學習 CLAUDE.md、Commands、Plan Mode
- MCP 設定 - 安裝 Context7、Playwright 等擴充功能
遇到問題？
- 查看官方文件：code.claude.com/docs
- 搜尋 GitHub Issues：github.com/anthropics/claude-code/issues
- 社群資源：ClaudeLog 有許多教學和 Best Practices