VS Code 完整設定教學｜程式設計師必備攻略

Visual Studio Code（簡稱 VS Code）是目前最受程式設計師喜愛的程式編輯器。它輕量、速度快、擴充性強，無論你是網頁開發者、後端工程師、資料科學家還是業餘玩家，都能找到適合你的工具鏈。本文將帶你從頭到尾打造一個完整的 VS Code 開發環境。

一、必要擴充套件安裝

VS Code 的強大之處在於其豐富的擴充套件生態系。以下為你精選各類型的必備推薦：

1.1 前端開發推薦

ESLint

程式碼語法檢查工具，自動修正程式碼風格問題，支援 JavaScript、TypeScript、JSX、TSX。

Prettier - Code formatter

程式碼格式化工具，統一程式碼風格，支持 HTML、CSS、JavaScript、JSON 等多種語言。

Live Server

即時預覽 HTML 頁面，支援熱重載，修改程式碼後瀏覽器自動刷新，網頁開發必備。

Auto Close Tag

自動補全 HTML/XML 標籤，輸入開標籤時自動產生閉標籤，大幅提升標籤編寫效率。

1.2 後端與通用開發

Python

微軟官方 Python 擴充套件，提供 IntelliSense、偵錯支援、程式碼格式化、Linting 等完整功能。

GitLens — Git supercharged

強化 Git 功能，在編輯器中直接檢視程式碼的提交歷史、作者資訊、分支狀態，超強大的 Git 視覺化工具。

REST Client

在 VS Code 中直接發送 HTTP 請求，測試 API 無需切換到 Postman 或 curl 命令列工具。

Thunder Client

輕量級 API 測試工具，介面簡潔美觀，支援 Collection、Environment 設定，適合快速測試 API。

1.3 開發者工具套件

Bracket Pair Colorizer 2

以顏色區分配對的括號，讓巢狀結構一目了然，不再為找不到對應括號而苦惱。

Indent Rainbow

以彩虹色彩標示縮排層級，幫助你快速識別程式碼的巢狀深度，Python、YAML 等語言特別有用。

Error Lens

將程式碼錯誤、警告直接顯示在行尾，即時掌握問題所在，無需 hover 才能看到錯誤詳情。

Peacock

為不同工作區設定不同顏色，當你開啟多個 VS Code 視窗時能快速區分，跨專案作業超方便。

💡 建議：第一次安裝擴充套件時，可以先安裝「Extension Pack」套件組，例如「Vue 3 Extension Pack」或「Python Extension Pack」，一次安裝多個相關套件，省時省力。

二、鍵盤快速鍵大全

熟練使用鍵盤快速鍵是提升開發效率的關鍵。以下整理開發者最常用的快速鍵分類：

2.1 多游標編輯

功能	Windows/Linux	macOS
在下方新增游標	`Ctrl + Alt + ↓`	`Ctrl + Option + ↓`
在上方新增游標	`Ctrl + Alt + ↑`	`Ctrl + Option + ↑`
選取下一個符合詞	`Ctrl + D`	`Cmd + D`
選取所有符合詞	`Ctrl + Shift + L`	`Cmd + Shift + L`
新增游標於點擊處	`Alt + 點擊`	`Option + 點擊`
矩形選取（框選）	`Shift + Alt + 拖曳`	`Shift + Option + 拖曳`

2.2 搜尋與取代

功能	Windows/Linux	macOS
全域搜尋	`Ctrl + Shift + F`	`Cmd + Shift + F`
檔案內搜尋	`Ctrl + F`	`Cmd + F`
全域取代	`Ctrl + Shift + H`	`Cmd + Shift + H`
取代	`Ctrl + H`	`Cmd + H`
快速切換檔案	`Ctrl + P`	`Cmd + P`
跳至指定行	`Ctrl + G`	`Cmd + G`

2.3 程式碼導航

功能	Windows/Linux	macOS
跳至定義	`F12`	`F12`
預覽定義	`Alt + F12`	`Option + F12`
尋找所有參照	`Shift + F12`	`Shift + F12`
返回上一個游標位置	`Alt + ←`	`Cmd + -`
前進至下一個游標位置	`Alt + →`	`Cmd + Shift + -`
折疊所有區塊	`Ctrl + K Ctrl + 0`	`Cmd + K Cmd + 0`
展開所有區塊	`Ctrl + K Ctrl + J`	`Cmd + K Cmd + J`

2.4 常用編輯快捷鍵

功能	Windows/Linux	macOS
複製上行並貼上	`Shift + Alt + ↑`	`Shift + Option + ↑`
刪除當前行	`Ctrl + Shift + K`	`Cmd + Shift + K`
註解當前行	`Ctrl + /`	`Cmd + /`
格式化文件	`Shift + Alt + F`	`Shift + Option + F`
重命名符號	`F2`	`F2`
召喚命令面板	`Ctrl + Shift + P`	`Cmd + Shift + P`

三、偵錯功能詳解

VS Code 內建強大的偵錯工具，支援 JavaScript、TypeScript、Python、C++、Java 等多種語言。以下為你詳細說明各項偵錯功能：

3.1 中斷點設定

中斷點是偵錯的基礎，讓程式在特定位置暫停執行，檢查變數狀態：

行中斷點：在行號左側點擊即可設定，紅點表示已啟用的中斷點
條件中斷點：右鍵點擊中斷點，設定條件式中斷，如 count > 10
命中計數中斷點：設定中斷點在執行 N 次後才觸發，適合迴圈偵錯
函式中斷點：在呼叫堆疊中設定中斷點，當進入指定函式時暫停
例外中斷點：在偵錯面板中設定，當拋出例外時自動暫停

3.2 監視視窗（Watch）

監視視窗讓你追蹤特定變數或表達式的值：

// 在 Watch 面板中新增監視 expressions
user.name           // 監視物件屬性
array.length        // 監視陣列長度
result > 0          // 監視條件判斷
this.method()       // 監視函式回傳值

按下 F5 開始偵錯後，即可在 Watch 面板中即時查看這些表達式的值變化。

3.3 呼叫堆疊閱讀

呼叫堆疊（Call Stack）顯示目前執行到哪個函式，以及如何到達該函式：

頂層框架：目前執行暫停的位置
上層框架：呼叫目前函式的上一層函式
點擊框架：可以檢視該層的區域變數和參數
重新啟動框架：在偵錯面板中可以恢復到特定框架重新執行

💡 偵錯技巧：使用「步驟跳過」（Step Over）逐行執行，搭配 Watch 監視關鍵變數，能快速定位問題根源。對於複雜的迴圈，建議設定條件中斷點，避免在正確的迭代時還要重複按「繼續」。

四、整合終端機設定

VS Code 內建整合終端機，無需切換視窗即可執行命令列工具：

4.1 開啟與切換

功能	Windows/Linux	macOS
開啟整合終端機	Ctrl + `	Cmd + `
新增終端機分頁	Ctrl + Shift + `	Cmd + Shift + `
切換終端機分頁	`Ctrl + Tab / Ctrl + Shift + Tab`	`Cmd + Tab / Cmd + Shift + Tab`

4.2 終端機設定

在 settings.json 中可以自訂終端機行為：

{
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "Fira Code",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.scrollback": 10000,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.shell.osx": "/bin/zsh"
}

4.3 分割編輯器

可以將終端機與程式碼並排顯示：按下 Ctrl + Shift + 5 可選擇「分割向右」將終端機移到右側，實現程式碼與終端機同步查看。

五、設定同步與配置管理

VS Code 的設定同步功能讓你可以在多台設備間同步個人配置：

5.1 登入與同步

按下 Ctrl + Shift + P 召喚命令面板，輸入「設定同步開啟」或「Turn on Settings Sync」，使用 Microsoft 帳號或 GitHub 帳號登入即可。同步內容包括：

擴充套件列表
使用者設定（settings.json）
鍵盤快速鍵自訂
UI 佈局配置
Snippet 自訂片段

5.2 settings.json 核心配置

{
    // 編輯器基本設定
    "editor.fontSize": 16,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.lineHeight": 1.6,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    
    // 檔案探索
    "files.exclude": {
        "**/.git": true,
        "**/node_modules": true,
        "**/__pycache__": true
    },
    
    // 檔案自動儲存
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    
    // 工作區設定
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme"
}

5.3 推薦佈景主題

One Dark Pro

最受歡迎的暗色系主題，配色護眼舒適，適合長時間編碼。

Dracula Official

經典暗色系主題，紫紅色調鮮明，語法高亮清晰。

GitHub Dark

GitHub 官方暗色主題，熟悉 GitHub 介面的開發者首選。

Night Owl

專為夜貓子設計的高對比度主題，淺色文字在深色背景上清晰可讀。

六、實作練習題

✏️ 練習一：安裝並設定 Python 開發環境

安裝 Python 擴充套件
建立新的 Python 檔案，練習設定中斷點
使用 Watch 面板監視一個迴圈變數的變化
嘗試條件中斷點：當計數器達到 5 時暫停

✏️ 練習二：多游標編輯實戰

選取多個相同的變數名稱（Ctrl + D）
使用矩形選取一次修改多行程式碼縮排
將多個文字游標放在不同位置，同時輸入相同的程式碼
練習 Alt + 點擊 新增自訂游標位置

✏️ 練習三：Git 協作工作流

安裝 GitLens 擴充套件
查看任意一行程式碼的提交歷史與作者資訊
使用 GitLens 比較兩個版本的差異
練習在整合終端機中執行基本的 Git 命令

✏️ 練習四：自訂 VS Code 環境

設定屬於自己的 settings.json 配置
安裝並切換喜歡的佈景主題
自訂至少三個常用的鍵盤快速鍵
建立一個常用的程式碼片段（Snippet）

七、結語

VS Code 的功能遠不只本文所述，但掌握以上這些核心技能，你已經具備成為高效開發者的基礎。建議你逐漸將這些快捷鍵和功能融入日常工作中，一開始可能會有些不習慣，但堅持使用兩週後就會形成肌肉記憶，大幅提升編碼效率。

持續探索 VS Code 的擴充套件生態系，你會發現更多寶藏工具。如果你想學習更多關於特定語言或框架的 VS Code 設定，歡迎參考我們的其他教學文章。

VS Code 完整設定教學｜程式設計師必備攻略 - Spaxe

一、必要擴充套件安裝

1.1 前端開發推薦

ESLint

Prettier - Code formatter

Live Server

Auto Close Tag

1.2 後端與通用開發

Python

GitLens — Git supercharged

REST Client

Thunder Client

1.3 開發者工具套件

Bracket Pair Colorizer 2

Indent Rainbow

Error Lens

Peacock

二、鍵盤快速鍵大全

2.1 多游標編輯

2.2 搜尋與取代

2.3 程式碼導航

2.4 常用編輯快捷鍵

三、偵錯功能詳解

3.1 中斷點設定

3.2 監視視窗（Watch）

3.3 呼叫堆疊閱讀

四、整合終端機設定

4.1 開啟與切換

4.2 終端機設定

4.3 分割編輯器

五、設定同步與配置管理

5.1 登入與同步

5.2 settings.json 核心配置

5.3 推薦佈景主題

One Dark Pro

Dracula Official

GitHub Dark

Night Owl

六、實作練習題

✏️ 練習一：安裝並設定 Python 開發環境

✏️ 練習二：多游標編輯實戰

✏️ 練習三：Git 協作工作流

✏️ 練習四：自訂 VS Code 環境

七、結語