VSCode自定义快捷键和添加自定义快捷键按键到状态栏

perseverance522025-02-21 21:33

VSCode自定义快捷键和添加自定义快捷键按键到状态栏

📄在VSCode中想实现快捷键方式执行某些指令操作，可以通过配置组合式的键盘按键映射来实现，另外一种方式就是将执行某些特定的指令嵌入在面板菜单上，在想要执行的时候，鼠标点击对应按键图标即可实现操作。

📘VSCode自定义快捷键方法

  • 打开命令面板（快捷键 Ctrl+Shift+P）。

  • 搜索并选择"Preferences: Open Keyboard Shortcuts (JSON)"。

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

c 复制代码 
// 将键绑定放在此文件中以覆盖默认值
[

{
    "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插件为例：
  • 插件安装位置：（以最新插件版本位置为准）
bash 复制代码 
C:\Users\Administrator\.vscode\extensions\raspberry-pi.raspberry-pi-pico-0.17.4\package.json
  • 在成员对象(contributes)中，找到成员对应的命令(commands):
c 复制代码 
"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 复制代码 
C:\Users\Administrator\.vscode\extensions\raspberry-pi.raspberry-pi-pico-0.17.4\dist\extension.cjs
  • 搜索关键字StatusBarItemKey，定位到VSCode状态栏内嵌快捷键按键定义的地方。
c 复制代码 
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`：鼠标悬停在状态栏项目上时显示的工具提示信息。 总结

  • 添加成功后，重启VSCode，打开对应的工程时，所添加的图标会显示在状态栏上：

🛠自定义修改系统栏插件命令图标和内容

  • 🌿修改的属性内容：
c 复制代码 
 [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",
c 复制代码 
    [StatusBarItemKey.compile]: {
        // alt. "$(gear) Compile"
        text: "$(file-binary) Build",
        command: "raspberry-pi-pico.compileProject",
        tooltip: "Compile Project",
    },
  • 显示效果：（原来的Compile字符显示换成Build）
  • 🌟增加图标显示效果：（带图标显示效果的状态栏快捷键按键图标）
c 复制代码 
  [StatusBarItemKey.SWD]: {
        // alt. "$(gear) Compile"
        text: "$(debug-step-into) SWD",
        command: "raspberry-pi-pico.flashProject",
        tooltip: "CMSIS-DAP Project",
    },
  • 显示修改：（debug-step-into代表在SWD前面所显示的图标符号）

📒显示或隐藏对应的插件快捷键图标方法：

在状态栏上右键，找到对应的插件扩展，前面打钩的选项就是显示出来的，没有打钩的就不会显示在状态栏上。可以很方便的管理状态栏上的显示快捷键，将一些不常用无关紧要的快捷功能按键图标隐藏掉，简洁VSCode状态栏显示界面。


  • 🎉显示图标其相关图标代码和对应图标的显示效果可以参考下面的网址：
bash 复制代码 
https://code.visualstudio.com/api/references/icons-in-labels
相关推荐
wzfj1234521 小时前
vscode通过remote-ssh快速浏览远程pc的文件
vscode
ayaya_mana1 天前
VS Code 远程开发：SSH连接与远程资源管理器的配置
linux·ide·windows·vscode·远程资源管理
吞掉星星的鲸鱼1 天前
VScode安装codex
ide·vscode·编辑器
啊湘1 天前
VSCODE英文界面切换为中文(适用CURSOR等使用)
ide·vscode·编辑器·bug·cursor
叶庭云1 天前
一文理解在 VSCode 中成功使用 Claude Code 插件
vscode·插件·api key·vibe coding·claude code·base url·coding agent
zhaqonianzhu2 天前
【vsc】cpptools占用内存过大
vscode
智慧地球（AI·Earth）2 天前
Codex配置问题解析：wire_api格式不匹配导致的“Reconnecting...”循环
开发语言·人工智能·vscode·codex·claude code
markvivv2 天前
在 Kylin Linux Advanced Server for Kunpeng V10 上构建 VSCode 1.106
linux·vscode·kylin
zhangfeng11332 天前
Kiro python环境的设置 中文语言包设置，通用vscode ,因为kiro是vscode基础上做的
开发语言·vscode·python
微醺的老虎2 天前
【工具】vscode格式化json文件
ide·vscode·编辑器
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定06jdk21下载、安装（Windows、Linux、macOS）07【踩坑笔记】50系显卡适配的 PyTorch 安装082025-04-03 Latex学习1——本地配置Latex + VScode环境09Overleaf编译超时，超出免费计划编译时限（已解决）10KGG转MP3工具|非KGM文件|解密音频