【保姆级VSCode 插件开发之状态栏按钮展示和交互】

保姆级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) - 🔄
$(gear) - ⚙️
$(trash) - 🗑️
$(search) - 🔍
$(cloud) - ☁️
…
Octicons 是 GitHub 开发的一套图标字体，广泛用于 GitHub 的界面设计。Octicons 包含多种类别的图标，包括：
导航图标: 如 chevron、arrow 等。
文件类型图标: 如 file, folder 等。
状态图标: 如 check, alert 等。
社交图标: 如 star, heart 等。

总结

通过本篇文章你可以学习到状态栏的基本开启和隐藏，并能独立实现在插件中添加状态栏项。了解到Octicons图标集，并显示在状态栏项上。当然这个图标集可以显示在其他text属性中。