VSCode自定義快捷鍵和添加自定義快捷鍵按鍵到狀態欄

---

📄在VSCode中想實現快捷鍵方式執行某些指令操作，可以通過配置組合式的鍵盤按鍵映射來實現，另外一種方式就是將執行某些特定的指令嵌入在面板菜單上，在想要執行的時候，鼠標點擊對應按鍵圖標即可實現操作。

📘VSCode自定義快捷鍵方法

• 打開命令面板（快捷鍵 Ctrl+Shift+P）。

• 搜索并選擇“Preferences: Open Keyboard Shortcuts (JSON)”。
  

• 在 keybindings.json 文件中添加自定義快捷鍵，例如：我這里配置的是Raspberry Pi Pico插件中的SWD下載程序用的快捷鍵

// 將鍵綁定放在此文件中以覆蓋默認值
[{"key": "ctrl+shift+enter","command": "raspberry-pi-pico.flashProject","when": "raspberry-pi-pico.isPicoProject"
}
]

• 對應的命令：
  

當程序編譯好后，可以直接使用快捷鍵進行程序燒錄操作。

1. “key”: “ctrl+shift+enter”
   含義：這部分定義了觸發對應命令的快捷鍵組合。在 Windows 和 Linux 系統中，當用戶同時按下 Ctrl、Shift 和 Enter 這三個鍵時，VS Code 會嘗試執行與之綁定的命令。在 macOS 系統中，Ctrl 會對應為 Command 鍵（前提是未對 VS Code 的按鍵映射進行特殊修改）。
   用途：為用戶提供了一種快速觸發特定操作的方式，避免了通過菜單或命令面板來執行命令，提高了操作效率。
2. “command”: “raspberry - pi - pico.flashProject”
   含義：指定了按下上述快捷鍵組合時要執行的具體命令。raspberry - pi - pico.flashProject 是一個特定的命令標識符，通常由擴展（這里是 Raspberry Pi Pico 擴展）定義。這個命令可能用于將項目代碼燒錄到 Raspberry Pi Pico 開發板上。
   用途：將快捷鍵與特定的功能操作關聯起來，當用戶按下指定快捷鍵時，VS Code 會查找并執行該命令對應的邏輯。
3. “when”: “raspberry - pi - pico.isPicoProject”
   含義：這是一個條件表達式，用于指定在何種情況下該快捷鍵綁定才會生效。raspberry - pi - pico.isPicoProject 是一個由 Raspberry Pi Pico 擴展定義的上下文條件，只有當當前項目被識別為 Raspberry Pi Pico 項目時，按下 Ctrl + Shift + Enter 組合鍵才會觸發 raspberry - pi - pico.flashProject 命令。
   用途：通過設置條件，可以避免在不相關的場景下誤觸發快捷鍵，提高快捷鍵使用的準確性和針對性。例如，如果當前打開的不是 Raspberry Pi Pico 項目，按下這個快捷鍵組合將不會執行燒錄操作。

• 需要執行的command可以在對應安裝的插件目錄里對應的package.json文件中找到所有命令的名稱定義。這里以我的電腦安裝的raspberry-pi-pico插件為例：
• 插件安裝位置：（以最新插件版本位置為準）

C:\Users\Administrator\.vscode\extensions\raspberry-pi.raspberry-pi-pico-0.17.4\package.json

• 在成員對象(contributes)中，找到成員對應的命令(commands):

"contributes": {"commands": [{"command": "raspberry-pi-pico.newProject","title": "New Pico Project","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.switchSDK","title": "Switch Pico SDK","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.switchBoard","title": "Switch Board","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.launchTargetPath","title": "Get path of the project executable","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getPythonPath","title": "Get python path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getEnvPath","title": "Get environment path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getGDBPath","title": "Get GDB path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getCompilerPath","title": "Get compiler path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getCxxCompilerPath","title": "Get C++ compiler path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getChip","title": "Get Chip","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getChipUppercase","title": "Get Chip Uppercase","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getTarget","title": "Get OpenOCD Target","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.getPicotoolPath","title": "Get Picotool path","category": "Raspberry Pi Pico","enablement": "false"},{"command": "raspberry-pi-pico.compileProject","title": "Compile Pico Project","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.runProject","title": "Run Pico Project (USB)","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.clearGithubApiCache","title": "Clear GitHub API cache","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.conditionalDebugging","title": "Conditional Debugging","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject && !inQuickOpen"},{"command": "raspberry-pi-pico.debugLayout","title": "Debug Layout","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.openSdkDocumentation","title": "Open SDK Documentation","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.configureCmake","title": "Configure CMake","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.switchBuildType","title": "Switch Build Type","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.importProject","title": "Import Pico Project","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.newExampleProject","title": "New Example Pico Project","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.uninstallPicoSDK","title": "Uninstall Pico SDK","category": "Raspberry Pi Pico"},{"command": "raspberry-pi-pico.flashProject","title": "Flash Pico Project (SWD)","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject"},{"command": "raspberry-pi-pico.cleanCmake","title": "Clean CMake","category": "Raspberry Pi Pico","enablement": "raspberry-pi-pico.isPicoProject && !raspberry-pi-pico.isRustProject"}],

在以上包含的成員-命令都可以設置對應的快捷鍵。

📗添加自定義快捷鍵按鍵到狀態欄

有時候插件安裝好后，在狀態欄上沒有我們所需要的快捷鍵按鍵圖標，但是插件里面是帶有有此快捷命令的，就可以自己添加。

添加方法

這里我還是以上面的raspberry-pi-pico插件中的SWD燒錄快捷鍵命令圖標，進行添加。

• 找到插件安裝目錄，配置狀態欄上內嵌的快捷鍵插件圖標定義是在extension.cjs文件中。

C:\Users\Administrator\.vscode\extensions\raspberry-pi.raspberry-pi-pico-0.17.4\dist\extension.cjs

• 搜索關鍵字StatusBarItemKey，定位到VSCode狀態欄內嵌快捷鍵按鍵定義的地方。

var StatusBarItemKey;
(function (StatusBarItemKey) {StatusBarItemKey["compile"] = "raspberry-pi-pico.compileProject";StatusBarItemKey["run"] = "raspberry-pi-pico.runProject";StatusBarItemKey["swd"] = "raspberry-pi-pico.flashProject";/*添加自己想要的快捷鍵按鍵到VSCode狀態欄上的指令*/StatusBarItemKey["picoSDKQuickPick"] = "raspberry-pi-pico.sdk-quick-pick";StatusBarItemKey["picoBoardQuickPick"] = "raspberry-pi-pico.board-quick-pick";
})(StatusBarItemKey || (StatusBarItemKey = {}));
const STATUS_BAR_ITEMS = {[StatusBarItemKey.compile]: {// alt. "$(gear) Compile"text: "$(file-binary) Compile",command: "raspberry-pi-pico.compileProject",tooltip: "Compile Project",},[StatusBarItemKey.run]: {// alt. "$(gear) Compile"text: "$(run) Run",command: "raspberry-pi-pico.runProject",tooltip: "Run Project",},/*添加自己想要的快捷鍵按鍵到VSCode狀態欄上的指令*/[StatusBarItemKey.SWD]: {// alt. "$(gear) Compile"text: "$(swd) SWD"command: "raspberry-pi-pico.flashProject",tooltip: "SWD Project",},[StatusBarItemKey.picoSDKQuickPick]: {text: "Pico SDK: <version>",command: "raspberry-pi-pico.switchSDK",tooltip: "Select Pico SDK",},[StatusBarItemKey.picoBoardQuickPick]: {text: "Board: <board>",command: "raspberry-pi-pico.switchBoard",tooltip: "Select Board",},
};

1. 定義枚舉類型 StatusBarItemKey
   var StatusBarItemKey;：聲明一個變量 StatusBarItemKey，用于后續存儲枚舉對象。
   (function (StatusBarItemKey) {… })(StatusBarItemKey || (StatusBarItemKey = {}));：這是一個立即執行函數表達式（IIFE）。它的作用是創建一個局部作用域，避免變量污染全局作用域。
   StatusBarItemKey || (StatusBarItemKey = {})：如果 StatusBarItemKey 已經存在，則使用它；否則，將其初始化為一個空對象。
   在函數內部，為 StatusBarItemKey 對象添加了多個屬性，這些屬性作為枚舉成員，每個成員都有一個對應的字符串值，這些值通常是 VSCode 命令的標識符。
2. 定義狀態欄項目對象 STATUS_BAR_ITEMS
const STATUS_BAR_ITEMS = {... };：定義一個常量對象 STATUS_BAR_ITEMS，用于存儲狀態欄項目的詳細信息。
   [StatusBarItemKey.compile]、[StatusBarItemKey.run] 等：使用計算屬性名，將 StatusBarItemKey 枚舉中的成員作為對象的屬性名。
   每個屬性對應一個對象，包含以下三個屬性：
   text：狀態欄項目顯示的文本內容，$(...) 是 VSCode 的圖標語法，用于在文本中顯示圖標。
   command：點擊狀態欄項目時要執行的 VSCode 命令的標識符。
   tooltip：鼠標懸停在狀態欄項目上時顯示的工具提示信息。
   總結

• 其他插件的狀態欄快捷鍵按鍵添加方法，應該也和這個類似，找到對應的StatusBarItemKey地方，按照現有的指令快捷鍵按鍵，依葫蘆畫瓢的方式補充添加即可。

• 添加成功后，重啟VSCode，打開對應的工程時，所添加的圖標會顯示在狀態欄上：
  

🛠自定義修改系統欄插件命令圖標和內容

• 🌿修改的屬性內容：

 [StatusBarItemKey.SWD]: {// alt. "$(gear) Compile"text: "$(swd) SWD",command: "raspberry-pi-pico.flashProject",tooltip: "CMSIS-DAP Project",},

• 🔬對應的狀態欄圖標顯示內容效果：（tooltip屬性值，影響鼠標移動到對應圖標上所顯示的內容提示信息）
  
• 🌿修改顯示名稱： text: "$(file-binary) Compile",修改為成： text: "$(file-binary) Build",

    [StatusBarItemKey.compile]: {// alt. "$(gear) Compile"text: "$(file-binary) Build",command: "raspberry-pi-pico.compileProject",tooltip: "Compile Project",},

• 顯示效果：（原來的Compile字符顯示換成Build）
  
• 🌟增加圖標顯示效果：（帶圖標顯示效果的狀態欄快捷鍵按鍵圖標）

  [StatusBarItemKey.SWD]: {// alt. "$(gear) Compile"text: "$(debug-step-into) SWD",command: "raspberry-pi-pico.flashProject",tooltip: "CMSIS-DAP Project",},

• 顯示修改：（debug-step-into代表在SWD前面所顯示的圖標符號）
  

📒顯示或隱藏對應的插件快捷鍵圖標方法：

在狀態欄上右鍵，找到對應的插件擴展，前面打鉤的選項就是顯示出來的，沒有打鉤的就不會顯示在狀態欄上。可以很方便的管理狀態欄上的顯示快捷鍵，將一些不常用無關緊要的快捷功能按鍵圖標隱藏掉，簡潔VSCode狀態欄顯示界面。

• 🎉顯示圖標其相關圖標代碼和對應圖標的顯示效果可以參考下面的網址：

https://code.visualstudio.com/api/references/icons-in-labels