保姆级VSCode 插件开发
例如：第一章 VSCode 插件开发入门之状态栏
文章目录
前言
今天我们来说一下VSCode 状态栏（Status Bar）的认识和相关开发，如何在状态栏中添加交互按钮。
一、VSCode状态栏（Status Bar）的认识
在 Visual Studio Code (VSCode) 中, 状态栏（Status Bar）是位于窗口底部的一条信息栏, 用于显示与当前工作环境和活动相关的重要信息。它提供了多种功能和信息，帮助用户更好地理解和控制他们的开发环境。具体如图所示：
VSCode 的状态栏是一个集成了多种信息和功能的界面元素，能够帮助开发者快速获取上下文信息和执行常见操作。利用状态栏提供的信息，用户可以更高效地管理代码编辑、调试和版本控制等任务。
- 在状态栏（Status Bar）上点击右键，可以选择显示哪些状态。（鼠标悬停在状态栏上的不同状态按钮可以看到状态对应的名称）
- 状态栏的按钮可以实现点击执行某些操作的功能。
- 如果状态栏被隐藏了，
- 可以在工具栏中的View -> Appearance -> Status Bar 中打开或隐藏
- 也可以点击左下角的设置图标，进入设置界面，找到“Appearance”或者直接搜索“Status Bar”，确保状态栏的可见性被开启。
- 按下Ctrl+Shift+P打开命令面板，输入“Status Bar”或者“活动栏”，选择“切换状态栏可见性”或者“切换活动栏可见性”来显示状态栏。
二、如何在VSCode插件中添加交互式按钮？
1.extension.ts中代码解析
代码如下（示例）：
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// Create a new status bar item that we can now manage
const myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100); // 创建一个状态栏项， 位置在右侧，优先级为100（优先级越高，显示的位置越靠右）
myStatusBarItem.text = '$(debug-start) Hello World'; // 状态栏项显示的文本，也就是按钮的名字
myStatusBarItem.tooltip = 'Click to execute Hello World command'; // 鼠标悬停在按钮上时显示的提示信息
myStatusBarItem.command = 'extension.helloWorld'; // 点击按钮时执行的命令
myStatusBarItem.show(); // 显示状态栏项，让状态栏项显示在状态栏中
// Register the command that is invoked when the status bar item is clicked
const helloWorldCommand = vscode.commands.registerCommand('extension.helloWorld', () => { // 注册一个命令，当点击状态栏项时执行
vscode.window.showInformationMessage('Hello World!'); // 显示一个信息提示框
});
// Add to a list of disposables which are disposed when this extension is deactivated
context.subscriptions.push(myStatusBarItem); // 将状态栏项添加到插件的订阅列表中
context.subscriptions.push(helloWorldCommand); // 将命令添加到插件的订阅列表中， 添加到插件的订阅列表中，当插件被停用时，这些订阅会被自动释放
}
export function deactivate() {}
2.package.json
代码如下（示例）：
......
"contributes": {
"commands": [
{
"command": "MdPreview.helloWorld",
"title": "Hello World"
}
]
},
......
3.运行结果展示
运行结果如下：
4. 按钮显示之Octicons图标集
myStatusBarItem.text = '$(debug-start) Hello World'; // 状态栏项显示的文本，也就是按钮的名字
其中$(debug-start)就代表Hello World 前面的有三角号，这个是可以修改的。在 VS Code 中，状态栏项的图标可以使用 Octicons 图标集。以下是一些常用的图标：
$(check) - ✔️
$(x) - ❌
$(alert) - ⚠️
$(info) - ℹ️
$(question) - ❓
$(sync) -