VSCode 必備套件與快捷鍵

Visual Studio Code 是現代開發者的首選編輯器。但很多人只用了它 10% 的功能——正確設定的 VSCode 可以讓你的開發速度提升 3 倍以上。

🔥 Vibe Prompt

「幫我列出 VSCode 的最重要的 20 個快捷鍵、15 個必裝套件，並用 JSON 格式輸出我的 keybindings.json 和 settings.json 配置，針對前端 + Python 全端開發優化。」

必裝套件（依類別）

🧠 AI 輔助

| 套件 | 功能 | |------|------| | GitHub Copilot | AI 程式碼補全，最強生產力工具 | | Codeium | 免費替代方案，支援多種語言 | | Tabnine | 本地端 AI 補全，注重隱私 |

🐍 Python 開發

| 套件 | 功能 | |------|------| | Python (微軟官方) | IntelliSense、除錯、測試、程式碼導航 | | Pylance | 超快速型別檢查與自動補全 | | Python Docstring Generator | 自動產生文件字串 |

⚛️ 前端開發

| 套件 | 功能 | |------|------| | ESLint | JavaScript/TypeScript 程式碼品質檢查 | | Prettier | 統一的程式碼格式化工具 | | Tailwind CSS IntelliSense | Tailwind 類別自動補全 | | Auto Rename Tag | 自動同步修改配對標籤 |

🔧 通用工具

| 套件 | 功能 | |------|------| | GitLens | 超強 Git 視覺化工具 | | Error Lens | 行內顯示錯誤訊息 | | Thunder Client | 輕量級 API 測試用戶端 | | Material Icon Theme | 美化檔案圖示 | | One Dark Pro | 經典暗色主題 |

必知快捷鍵

# 通用編輯
⌘ + P          檔案快速切換
⌘ + ⇧ + P     命令面板
⌘ + D          選取下一個相同文字
⌘ + ⇧ + L     選取所有相同文字
⌘ + /          註解/取消註解
⌘ + ⌥ + ↓/↑   向下/上複製行
⌘ + ⇧ + K     刪除整行

# 多遊標編輯
⌥ + 點擊        加入額外遊標
⌥ + ⇧ + 拖曳   矩形選取
⌘ + ⌥ + ↑/↓    在上/下方加入遊標

# 導航與搜尋
⌘ + B          切換側邊欄
⌘ + ⇧ + F     全域搜尋
⌘ + T          搜尋符號（函數、類別）
F12             跳到定義
⌘ + ⇧ + F12   查看所有引用

# 編輯技巧
⌘ + .          快速修復
⌘ + ⇧ + R     重構
⌘ + [ / ]      縮排/取消縮排
⌘ + Enter      在下方新增行
⌘ + ⇧ + Enter 在上方新增行

最佳 settings.json 配置

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "newUntitledFile",
  
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.osx": "zsh",
  
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true
}

使用者程式碼片段 (Snippets)

建立常用程式碼片段，大幅減少重複輸入：

// python.json
{
  "Python Main Guard": {
    "prefix": "pmain",
    "body": [
      "if __name__ == '__main__':",
      "    $0"
    ],
    "description": "Python main guard"
  },
  "FastAPI Route": {
    "prefix": "froute",
    "body": [
      "@app.${1:get}('/${2:route}')",
      "async def ${3:handler}():${4:pass}"
    ]
  }
}

// typescript.json
{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Props} {}",
      "",
      "const ${2:Component}: React.FC<${1:Props}> = () => {",
      "  return (",
      "    <div>$0</div>",
      "  );",
      "};",
      "",
      "export default ${2:Component};"
    ]
  },
  "useState Hook": {
    "prefix": "ust",
    "body": [
      "const [${1:state}, set${1:State}] = useState<${2:type}>(${3:initialValue});"
    ]
  }
}

整合除錯器

VSCode 的除錯器可以取代 Chrome DevTools 和 pdb：

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node.js",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Debug Python",
      "program": "${workspaceFolder}/main.py",
      "console": "integratedTerminal"
    }
  ]
}

實戰練習

💡 Vibe Coding 練習：請 AI 幫你：

根據你的開發語言（Python / JS / Go / Rust）產生最佳 settings.json

建立常用的程式碼片段（CRUD API、測試案例、元件樣板）

設定一鍵除錯配置

整合 ESLint + Prettier 自動修復

設定美化終端機整合