跳至主要内容

VSCode 擴充套件推薦

精選的 Visual Studio Code 擴充套件集合，涵蓋開發效率、程式碼品質、主題美化等各個面向，適合不同開發需求。

必裝核心套件​

程式碼品質​

Git 整合​

開發效率​

語言特定套件​

JavaScript/TypeScript​

Python​

Web 開發​

React/Vue​

資料庫​

主題與美化​

熱門主題​

圖示套件​

字體推薦​

實用工具套件​

檔案管理​

編輯增強​

程式碼對齊​

  • Align Tail Comments - 行尾註解對齊

    適合個人專案使用，團隊開發建議由 lint tool/git hook 處理格式化，避免產生過多格式化相關的 diff

遠端開發​

特殊用途套件​

API 開發​

文檔撰寫​

效能監控​

套件管理技巧​

批次安裝​

# 使用 CLI 批次安裝套件
code --install-extension ms-python.python
code --install-extension esbenp.prettier-vscode
code --install-extension eamodio.gitlens

設定同步​

// settings.json 中啟用設定同步
{
  "settingsSync.keybindingsPerPlatform": false,
  "settingsSync.ignoredExtensions": [],
  "settingsSync.ignoredSettings": []
}

工作區推薦​

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript"
  ]
}

效能最佳化​

停用不需要的套件​

# 檢查已安裝的套件
code --list-extensions

# 停用特定套件
code --disable-extension EXTENSION_ID

# 只在特定工作區啟用
code --enable-proposed-api EXTENSION_ID

監控套件效能​

  1. 開啟命令面板 (Ctrl+Shift+P)
  2. 執行 "Developer: Show Running Extensions"
  3. 檢查啟動時間和記憶體使用量

團隊協作建議​

統一開發環境​

// .vscode/settings.json (專案層級)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.autoFixOnSave": true,
  "typescript.preferences.importModuleSpecifier": "relative"
}

程式碼品質檢查​

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "lint",
      "type": "shell",
      "command": "npm run lint",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

疑難排解​

常見問題​

# 重設 VSCode 設定
code --reset-settings

# 清除擴充套件快取
rm -rf ~/.vscode/extensions

# 檢查擴充套件衝突
code --disable-extensions

效能問題​

  • 定期清理未使用的套件
  • 避免安裝功能重複的套件
  • 使用工作區特定的套件設定
  • 監控套件的資源使用情況

See Also​