【App 工程師的前端轉生術 01】工欲善其事：把 VS Code 調教成你的 Xcode/Android Studio

01. 前言：為什麼我的 IDE 不會報錯？

當你剛從 App 開發轉到前端，第一次打開 VS Code 寫 React 時，你可能會有一種「裸奔」的不安全感。

• Android Studio: 你少寫一個分號，或者變數型別不對，IDE 會立刻紅字警告，甚至不讓你 Compile。
• Xcode: 你排版亂七八糟，按下 Cmd+B，編譯器會噴出一堆 Error。
• VS Code (預設狀態): 你寫了一堆 Bug，排版像被炸過一樣，它依然靜靜地看著你，直到你跑起來 Crash 為止。

這是因為 VS Code 本質上是一個 「編輯器 (Editor)」 而非 「整合開發環境 (IDE)」。

但別擔心，透過正確的插件 (Extensions) 與設定，我們完全可以把 VS Code 武裝成一個嚴謹的 IDE，讓它擁有 Linting (靜態分析)、Formatting (自動排版) 與 Debugging (斷點除錯) 的能力。

這一步如果不做，後面的架構設計寫得再好，都會被髒亂的代碼風格毀掉。

02. 必裝插件：你的編譯器與 Linter

在 Mobile 開發中，Compiler 幫我們做了很多事。在前端，我們需要組合不同的工具來達到類似效果。請前往 VS Code Extensions (Cmd+Shift+X) 安裝以下神器：

1. ESLint & Prettier (對應 SwiftLint / Ktlint)

這是最基礎的防護網。

• ESLint: 負責抓邏輯錯誤與規範（例如：變數宣告了但沒使用、禁止使用 any）。這就像是 Xcode 的 Warnings/Errors。
• Prettier: 負責管格式（縮排、換行、單引號/雙引號）。這就像是 Android Studio 的 Reformat Code。

2. Tailwind CSS IntelliSense

如果你按照我們之後的規劃使用 Tailwind，這個插件必裝。它能提供類似 Xcode Storyboard 的屬性提示，並顯示顏色預覽。

3. Pretty TypeScript Errors

TypeScript 的原生報錯訊息非常難讀（就像 C++ Template 的報錯一樣長）。這個插件會把它美化成人類看得懂的格式。

4. ES7+ React/Redux/React-Native snippets

提供快速生成的樣板代碼 (Boilerplate)。例如輸入 rafce 按 Tab，直接幫你生出一個標準的 React Functional Component。

03. 專案設定：自動化排版 (Format on Save)

在 App 團隊開發中，我們最討厭 merge request 出現一堆「只改了空白鍵」的變更。我們要強制執行 Format on Save。

在 Next.js 專案根目錄下，建立或修改 .vscode/settings.json。這就像是把 Xcode 的 Project Settings 變成文字檔，跟著專案一起 commit。

{
  // 對應 Android Studio 的 Reformat Code on Save
  "editor.formatOnSave": true,
  
  // 設定預設的 Formatter 為 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // 修正 ESLint 抓到的錯誤 (例如自動移除沒用的 import)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 讓 Tailwind 的 class 提示更聰明
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  
  // 排除搜尋不需要的檔案 (類似 .gitignore)
  "search.exclude": {
    "**/node_modules": true,
    "**/.next": true
  }
}

有了這個設定，你不需要再手動調整縮排。按下 Cmd+S，程式碼自動變整齊。

04. 除錯環境：告別 console.log

很多前端開發者習慣用 console.log 來除錯，這對習慣 LLDB (Xcode) 或 ADB Debugger (Android) 的我們來說簡直是原始人行為。

VS Code 其實有非常強大的 Debugger，可以直接設中斷點 (Breakpoint)。

設定 Launch.json

在 .vscode/launch.json 中加入以下設定，這對應到 Xcode 的 Schemes 或 Android 的 Run/Debug Configuration。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: Debug Server-Side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Next.js: Debug Client-Side (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

如何使用？

1. 點擊左側蟲子圖示 (Run and Debug)。
2. 選擇 "Next.js: Debug Server-Side" 並執行。
3. 在你的 page.tsx 或 route.ts 程式碼行號左邊點一下，出現紅點。
4. 觸發該功能，VS Code 就會停在中斷點，你可以查看變數 (po variable)、Call Stack，完全不用切換視窗。

05. 套件管理：你的 CocoaPods / Gradle

最後，快速對齊一下套件管理的概念。

• package.json:

  • 這就是你的 Podfile 或 build.gradle (Module)。
  • dependencies: 生產環境需要的庫 (React, Next.js)。
  • devDependencies: 開發環境需要的庫 (TypeScript, ESLint, Jest)。
  • scripts: 這對應到 Gradle Tasks 或 Xcode Build Phases。例如 npm run build 就是執行打包指令。

• package-lock.json / yarn.lock / pnpm-lock.yaml:

  • 這就是 Podfile.lock。絕對要 Commit 進 Git，確保團隊所有人的套件版本完全一致。

• node_modules/:

  • 這就是 Pods/ 或 .gradle/caches/。絕對不要 Commit。它非常大，隨時可以用 npm install 重抓。

06. 小結：準備起飛

現在，你的 VS Code 已經具備了以下能力：

1. 強型別檢查：TypeScript 加上 Pretty Errors。
2. 自動排版：Prettier 加上 Format on Save。
3. 靜態分析：ESLint 即時抓錯。
4. 斷點除錯：直接在 IDE 裡 Debug，不用依賴瀏覽器 Console。

這個環境已經非常接近你熟悉的 Xcode 或 Android Studio 了。

把環境架好只是第一步。在下一篇 Part 2: 觀念重塑 中，我們將正式進入 Next.js 的世界，我會用你最熟悉的 App Lifecycle (AppDelegate / Activity) 來解釋 Next.js 的運作原理，讓你不再被那些 layout, page, server component 的名詞搞得暈頭轉向。