Visual Studio Code你最唔知嘅16個隱藏功能

你每日打開 Visual Studio Code，可能只用咗佢好細部分嘅能力。好多開發者用咗幾年都冇發現，原來呢個編輯器底下藏咗一堆極實用嘅功能。今日同你分享 16 個隱藏功能，當中唔少係連老手都未必知道嘅秘密武器。

多游標編輯 一次改晒所有位置

好多時你需要改多個相同嘅字串。逐個改就太慢了。VS Code 俾你用多個游標同時編輯。

揀好你要改嘅字詞，按 Ctrl+D（Mac 係 Cmd+D）就可以逐個加入下一個相同字詞。如果你夠膽一次過改晒全部，用 Ctrl+Shift+L（Mac 係 Cmd+Shift+L）就得。

另一個方法係按住 Alt（Mac 係 Option）然後用滑鼠 click 你想改嘅位置。你仲可以用 Ctrl+Alt+Up/Down（Mac 係 Cmd+Option+Up/Down）嚟新增垂直游標。

呢個功能特別適合改變數名稱、批量修改 data structure 嘅 key、或者一次過更新多個 log 訊息。

內建 Git 管理 唔使開終端機

VS Code 嘅 Git 整合比你想像中強。左側嘅原始碼管理圖示係 Git 面板，但好多人只用佢嚟做 commit。

你可以喺入面直接睇 diff，拖放檔案嚟做 stage 或 unstage。右鍵 click 檔案可以直接揀選「還原」或者「忽略」。

仲有一個強大功能：你可以直接喺編輯器入面改 commit message，按 Ctrl+Enter 就 commit 到。想睇返歷史紀錄？開個 Git 輸出面板就睇到所有操作紀錄。

整合終端機 同一畫面做晒所有嘢

你唔需要另外開一個 terminal 視窗。用 Ctrl+（Mac 係 Ctrl+）就可以開出整合終端機。

佢支援多個分頁，你可以同時開住 bash、PowerShell、同埋 Node.js 嘅 REPL。仲可以將終端機放到編輯器右邊或者底部，甚至將佢變成一個獨立視窗。

其中一個好有用嘅隱藏功能係：你可以喺終端機入面直接拖放檔案路徑，咁就唔使自己打長長嘅路徑。

片段碼快速插入 慳返打字時間

VS Code 有內建嘅片段碼功能，但好多開發者唔知點樣自訂。

你可以用 Ctrl+Shift+P 開 Command Palette，然後輸入「Snippets」去管理片段碼。支援所有語言，你仲可以設定變數、Tabstop、同埋選擇清單。

舉個例，你可以整一個 React component 嘅片段碼，咁打 "rcc" 就自動彈成個 component 出嚟。

{
  "React Class Component": {
    "prefix": "rcc",
    "body": [
      "import React, { Component } from 'react';",
      "",
      "class ${1:ComponentName} extends Component {",
      "  render() {",
      "    return (",
      "      <${2:div}>$0</${2:div}>",
      "    );",
      "  }",
      "}",
      "",
      "export default ${1:ComponentName};"
    ]
  }
}

Command Palette 萬能嘅鍵盤入口

Command Palette 係 VS Code 嘅靈魂。按 Ctrl+Shift+P（Mac 係 Cmd+Shift+P）就開到。

你可以喺入面做任何嘢：開檔案、執行命令、安裝擴充功能、改設定、甚至執行除錯。唔使用滑鼠都可以操作晒所有功能。

其中一個隱藏技巧：你喺 Command Palette 輸入「?」就會見到所有可用嘅命令分類。仲可以輸入 @ 嚟搜尋目前檔案嘅符號，或者輸入 > 嚟執行特定命令。

Emmet 語法加速 HTML 同 CSS

你寫 HTML 同 CSS 時，VS Code 內建咗 Emmet 引擎。佢可以將簡短嘅語法變成完整嘅結構。

例如輸入 div>ul>li*5 然後按 Tab，就會自動生成：

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

仲有 lorem 可以生成填充文字，! 會產生完整嘅 HTML 模板。呢個功能喺快速 prototyping 時特別有用。

智慧重構工具 保持程式碼乾淨

VS Code 嘅重構功能唔單止係改變數名。佢支援幾種常見嘅重構操作。

選取一段程式碼，右鍵揀選重構，你就可以：
- 提取函數
- 提取變數
- 將程式碼移成獨立檔案
- 重新命名符號（F2）

呢啲重構操作會自動更新所有相關引用，唔怕改漏。

浮動除錯面板 追蹤變數變化

除錯面板唔只係顯示錯誤。你可以喺入面設定條件中斷點、日誌中斷點、同埋資料中斷點。

條件中斷點只會喺特定條件成立時暫停，例如 i > 10。日誌中斷點唔會暫停執行，只會輸出訊息，好適合追蹤迴圈入面嘅變化。

仲有一個實用功能：你可以喺除錯面板入面直接修改變數值，即時測試唔同情況。

工作區設定進階配置

VS Code 嘅設定可以分為三層：全域設定、工作區設定、同埋資料夾設定。

你可以喺 .vscode/settings.json 入面設定只適用於目前專案嘅選項。例如設定某個資料夾用特定嘅格式化規則、或者啟用唔同嘅語法檢查。

仲有一個隱藏技巧：你可以用 settings.json 入面嘅 [language] 語法嚟設定唔同語言嘅唔同選項。

{
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.tabSize": 4
  }
}

擴充功能群組管理

你安裝咗好多擴充功能後，可以將佢哋分組管理。VS Code 支援擴充功能嘅啟用/停用，仲可以根據工作區自動啟用。

喺擴充功能面板入面，你可以建立群組，例如「前端開發」、「後端開發」、「資料科學」。每次切換專案時，VS Code 會自動啟用相關嘅擴充功能。

呢個功能特別適合你同時做多個唔同領域嘅開發工作。

遠端開發支援 連線伺服器 Coding

VS Code 嘅 Remote Development 擴充功能令你可以喺本機編輯遠端伺服器嘅檔案。

支援 SSH、容器、同埋 WSL 三種模式。你可以好似操作本地檔案咁直接編輯遠端伺服器上嘅程式碼，執行終端機命令，甚至除錯。

呢個功能對用 Linux 伺服器做開發嘅人特別有用，唔使自己裝嘢喺伺服器上。

暫存檔案與工作追蹤

VS Code 有暫存檔案功能，俾你臨時記低啲嘢而唔使開新檔案。

按 Ctrl+N 開新檔案，入面寫嘅內容唔會自動儲存。當你需要記低某啲想法，或者暫時保存一段程式碼時，呢個功能好方便。

仲有一個叫「TODO Highlight」嘅擴充功能，可以幫你標記程式碼入面嘅 TODO 同 FIXME 註解，令你唔會漏咗要做嘅嘢。

圖形化依賴分析

如果你用 TypeScript 或者 JavaScript，VS Code 可以顯示程式碼嘅依賴關係。

按住 Ctrl 然後 click 一個函數名稱，VS Code 會跳轉到嗰個函數嘅定義。再按住 Alt 然後 click，可以睇到所有引用位置。

你仲可以安裝「Dependency Cruiser」呢類擴充功能嚟圖形化顯示成個專案嘅依賴結構。當你重構大型專案時，呢個功能幫你理解所有關聯。

自訂鍵盤快捷鍵 一切隨你心意

VS Code 俾你自訂每一個鍵盤快捷鍵。按 Ctrl+K Ctrl+S 就可以打開快捷鍵設定。

你可以搜尋任何命令，然後按鍵盤綁定新快捷鍵。仲支援 chord 鍵（例如先按 Ctrl+K 再按 Ctrl+B）。

以下係我個人推薦嘅一啲快捷鍵設定：

功能	預設快捷鍵（Windows）	預設快捷鍵（Mac）
打開 Command Palette	Ctrl+Shift+P	Cmd+Shift+P
多游標選取	Ctrl+D	Cmd+D
一齊改所有相同	Ctrl+Shift+L	Cmd+Shift+L
開終端機	Ctrl+| Ctrl+
格式化文件	Shift+Alt+F	Shift+Option+F
重新命名符號	F2	F2
切換側邊欄	Ctrl+B	Cmd+B
打開設定	Ctrl+,	Cmd+,

專家建議：你可以將常用嘅擴充功能命令綁定快捷鍵，例如將「開啟 Git 視窗」綁定到 Ctrl+Shift+G，咁就唔使每次用滑鼠。

進階搜尋與取代

VS Code 嘅搜尋功能唔只係簡單關鍵字搜尋。佢支援正規表達式、檔案類型過濾、同埋搜尋結果取代。

按 Ctrl+Shift+F 打開全域搜尋，你仲可以：
- 用 *.ts 嚟限制只搜尋 TypeScript 檔案
- 用 !**/node_modules/** 嚟排除特定資料夾
- 用正規表達式嚟做複雜搜尋

仲有一個好用嘅功能：搜尋結果入面可以直接編輯，改完之後按 Ctrl+Shift+L 就可以一次性取代。

內建 Markdown 預覽

你寫文件時，可以直接喺 VS Code 入面預覽 Markdown。按 Ctrl+Shift+V 開預覽視窗，或者按 Ctrl+K V 開側邊預覽。

預覽支援自訂 CSS、數學公式、同埋程式碼高亮。你仲可以用 Extension 加入表格、流程圖、甚至時序圖。

呢個功能對寫 README、技術文件、或者筆記嘅人特別有用。

成為真正嘅 VS Code 高手

以上 16 個隱藏功能，如果能夠熟練運用，你會發現日常開發流程變得順暢好多。唔需要再用滑鼠點來點去，鍵盤操作做晒所有嘢。試下逐個功能練習，你自然會揀出最適合自己嘅工作模式。記得勞動節假期、或者平時 coding 時，試下用新嘅快捷鍵提升效率。