VSCode自定义快捷键和添加自定义快捷键按键到状态栏-EW帮帮网

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"
}
]

对应的命令：

当程序编译好后，可以直接使用快捷键进行程序烧录操作。

“key”: “ctrl+shift+enter”
含义：这部分定义了触发对应命令的快捷键组合。在 Windows 和 Linux 系统中，当用户同时按下 Ctrl、Shift 和 Enter 这三个键时，VS Code 会尝试执行与之绑定的命令。在 macOS 系统中，Ctrl 会对应为 Command 键（前提是未对 VS Code 的按键映射进行特殊修改）。
用途：为用户提供了一种快速触发特定操作的方式，避免了通过菜单或命令面板来执行命令，提高了操作效率。
“command”: “raspberry - pi - pico.flashProject”
含义：指定了按下上述快捷键组合时要执行的具体命令。raspberry - pi - pico.flashProject 是一个特定的命令标识符，通常由扩展（这里是 Raspberry Pi Pico 扩展）定义。这个命令可能用于将项目代码烧录到 Raspberry Pi Pico 开发板上。
用途：将快捷键与特定的功能操作关联起来，当用户按下指定快捷键时，VS Code 会查找并执行该命令对应的逻辑。
“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",
    },
};

定义枚举类型 StatusBarItemKey
var StatusBarItemKey;：声明一个变量 StatusBarItemKey，用于后续存储枚举对象。
(function (StatusBarItemKey) {… })(StatusBarItemKey || (StatusBarItemKey = {}));：这是一个立即执行函数表达式（IIFE）。它的作用是创建一个局部作用域，避免变量污染全局作用域。
StatusBarItemKey || (StatusBarItemKey = {})：如果 StatusBarItemKey 已经存在，则使用它；否则，将其初始化为一个空对象。
在函数内部，为 StatusBarItemKey 对象添加了多个属性，这些属性作为枚举成员，每个成员都有一个对应的字符串值，这些值通常是 VSCode 命令的标识符。
定义状态栏项目对象 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

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

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

📘VSCode自定义快捷键方法

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

添加方法

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

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

网站公告

今日签到

热门文章

最新发布