建立高效的開發環境

一個好的開發環境能大幅提升工作效率。這篇文章分享我多年來累積的開發環境配置經驗。

編輯器選擇：VSCode

VSCode 是我的首選編輯器，原因很簡單：

輕量但功能強大
豐富的插件生態
優秀的 TypeScript 支援
內建 Git 整合

必裝插件

1. 代碼品質

ESLint：即時檢查代碼問題
Prettier：自動格式化代碼
Error Lens：在行內顯示錯誤

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

2. 開發效率

GitHub Copilot：AI 輔助編程
Path Intellisense：自動補全檔案路徑
Auto Rename Tag：同步修改 HTML 標籤

3. 視覺優化

Material Icon Theme：美觀的檔案圖標
One Dark Pro：舒適的配色主題
Indent Rainbow：縮排視覺化

快捷鍵設定

自訂幾個常用快捷鍵：

{
  "key": "cmd+shift+e",
  "command": "workbench.view.explorer"
},
{
  "key": "cmd+shift+f",
  "command": "workbench.action.findInFiles"
}

終端工具

iTerm2 + Oh My Zsh

Mac 使用者必備的終端組合。

# 安裝 Oh My Zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# 推薦主題
ZSH_THEME="powerlevel10k/powerlevel10k"

# 推薦插件
plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
  docker
)

常用別名

在 .zshrc 中設定常用指令的別名：

# Git 相關
alias gs="git status"
alias ga="git add"
alias gc="git commit -m"
alias gp="git push"

# 專案相關
alias dev="npm run dev"
alias build="npm run build"

# 快速導航
alias projects="cd ~/Projects"

瀏覽器開發工具

Chrome DevTools

必學的調試技巧：

Console 技巧

// 顯示物件結構
console.table(users);

// 計時器
console.time('API Call');
await fetchData();
console.timeEnd('API Call');

// 追蹤呼叫堆疊
console.trace();

Network 面板
- 模擬慢速網路
- 檢查請求時間
- 複製為 cURL 命令
Performance 面板
- 錄製頁面載入
- 分析性能瓶頸
- 檢查記憶體洩漏

版本控制最佳實踐

Git 配置

# 設定使用者資訊
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# 設定預設編輯器
git config --global core.editor "code --wait"

# 啟用顏色輸出
git config --global color.ui true

Commit Message 規範

遵循 Conventional Commits：

feat: 新增使用者登入功能
fix: 修正購物車計算錯誤
docs: 更新 README
style: 調整按鈕樣式
refactor: 重構 API 層

專案管理工具

包管理器：pnpm

相比 npm 和 yarn，pnpm 更快且節省空間：

# 安裝 pnpm
npm install -g pnpm

# 使用 pnpm
pnpm install
pnpm add react
pnpm dev

Monorepo：Turborepo

管理多個相關專案：

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

生產力技巧

1. 使用代碼片段

在 VSCode 中創建自訂代碼片段：

{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "export default function ${1:Component}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ]
  }
}

2. 自動化工作流

使用 npm scripts 自動化常見任務：

{
  "scripts": {
    "setup": "npm install && npm run build",
    "clean": "rm -rf dist node_modules",
    "type-check": "tsc --noEmit",
    "lint": "eslint . --ext .ts,.tsx",
    "test": "jest --watch"
  }
}

3. 文件範本

建立專案範本，快速開始新專案：

# 使用 degit 克隆範本
npx degit user/repo my-new-project
cd my-new-project
npm install

保持更新

定期檢查並更新工具：

# 檢查過時的套件
npm outdated

# 更新所有套件
npm update

# 檢查 VSCode 插件更新
# Command Palette -> Extensions: Show Outdated Extensions

總結

建立高效的開發環境需要時間和實驗。從基礎開始，逐步加入符合自己工作流程的工具。記住，工具是為了提升效率，不要讓工具配置成為目的本身。

定期審視自己的工作流程，移除不常用的工具，保持環境的簡潔和高效。