当前位置：首页 > article >正文

VSCode 插件开发实战（六）：配置自定义状态栏

article 2024/12/26 12:12:31

前言

VSCode 作为一款功能强大的代码编辑器，以其高度的可扩展性和丰富的插件生态系统而备受开发者青睐。在现代软件开发中，定制化和高效是提高生产力的关键。本文将详细介绍如何通过自定义插件在 VSCode 的状态栏中添加专属的功能项，帮助开发者实现个性化需求并提升工作效率。

定义命令

打开生成的项目文件夹，找到 package.json 文件，我们需要在其中定义我们的状态栏项。找到 contributes 部分，并添加以下内容：

"contributes": {
    "commands": [
        {
            "command": "extension.showStatusBar",
            "title": "Show Status Bar",
            "category": "Custom"
        }
    ]
}

这里我们定义了一个名为 extension.showStatusBar 的命令，并给它取了一个标题 “Show Status Bar”。这个命令会在我们的状态栏中展示一个自定义的状态栏项。

实现命令逻辑

接下来，我们需要在 src/extension.ts 文件中实现这个命令的逻辑。在 activate 函数中添加以下代码：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.showStatusBar', () => {
        const myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
        myStatusBarItem.text = '$(heart) Hello, VSCode!';
        myStatusBarItem.show();
        context.subscriptions.push(myStatusBarItem);
    });

    context.subscriptions.push(disposable);
}

在这段代码中，我们注册了一个命令 extension.showStatusBar，并在命令执行时创建了一个状态栏项。myStatusBarItem 通过 vscode.window.createStatusBarItem 创建，并设置了显示文本 $(heart) Hello, VSCode!，其中 $(heart) 是一个图标。最后，我们将状态栏项显示出来，并将其添加到 context.subscriptions 中，这样当插件被停用时，状态栏项会自动清除。

运行和调试

完成以上步骤后，我们就可以运行和调试我们的插件了。在 VSCode 中按下 F5，会启动一个新的 VSCode 窗口，加载我们的插件。在命令面板（ Ctrl+Shift+P 或 Cmd+Shift+P）中输入 Show Status Bar，你将看到状态栏中出现了一个带有心形图标和文本的项目。

进阶操作

现在，我们已经成功地在状态栏中添加了一个基本的自定义项。接下来，让我们进一步扩展这个插件，增加更多的功能，使它更加实用和有趣。

添加点击事件

首先，我们可以为状态栏项添加一个点击事件，这样当我们点击它时，可以触发一些自定义操作。更新 src/extension.ts 文件中的代码如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.showStatusBar', () => {
        const myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
        myStatusBarItem.text = '$(heart) Click me!';
        myStatusBarItem.tooltip = 'Click to show a message';
        myStatusBarItem.command = 'extension.showMessage';
        myStatusBarItem.show();
        context.subscriptions.push(myStatusBarItem);
    });

    let messageCommand = vscode.commands.registerCommand('extension.showMessage', () => {
        vscode.window.showInformationMessage('Hello from the Status Bar!');
    });

    context.subscriptions.push(disposable, messageCommand);
}

在这段代码中，我们为状态栏项添加了 tooltip 和 command 属性。tooltip 属性设置了当鼠标悬停时显示的提示信息，而 command 属性指定了当状态栏项被点击时执行的命令。在这里，我们定义了一个新的命令 extension.showMessage，并在点击状态栏项时显示一条信息消息。

动态更新状态栏项

有时候，我们可能需要动态地更新状态栏项的内容，例如根据当前的编辑器状态或外部事件。我们可以使用 VSCode 提供的 API 来实现这一功能。

让我们改进插件，使状态栏项显示当前打开文件的行数。更新 src/extension.ts 文件如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
    context.subscriptions.push(myStatusBarItem);

    let updateStatusBar = () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const lineCount = editor.document.lineCount;
            myStatusBarItem.text = `Lines: ${lineCount}`;
            myStatusBarItem.show();
        } else {
            myStatusBarItem.hide();
        }
    };

    vscode.window.onDidChangeActiveTextEditor(updateStatusBar, null, context.subscriptions);
    vscode.workspace.onDidChangeTextDocument(updateStatusBar, null, context.subscriptions);

    updateStatusBar();
}

在这段代码中，我们定义了一个 updateStatusBar 函数，用于更新状态栏项的文本内容。我们通过 vscode.window.activeTextEditor 获取当前活动的编辑器，并使用 editor.document.lineCount 获取当前文件的行数。我们还监听了 onDidChangeActiveTextEditor 和 onDidChangeTextDocument 事件，以在编辑器或文档内容变化时更新状态栏。

持久化数据

有时候，我们可能希望在插件的不同运行次之间持久化一些数据。VSCode 提供了 Memento 对象来实现这一功能。

让我们进一步扩展插件，记录点击状态栏项的次数并持久化数据。更新 src/extension.ts 文件如下：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
    context.subscriptions.push(myStatusBarItem);

    const updateStatusBar = () => {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const lineCount = editor.document.lineCount;
            myStatusBarItem.text = `Lines: ${lineCount}`;
            myStatusBarItem.show();
        } else {
            myStatusBarItem.hide();
        }
    };

    vscode.window.onDidChangeActiveTextEditor(updateStatusBar, null, context.subscriptions);
    vscode.workspace.onDidChangeTextDocument(updateStatusBar, null, context.subscriptions);

    updateStatusBar();

    let clickCount = context.globalState.get<number>('clickCount', 0);

    const handleClick = () => {
        clickCount++;
        context.globalState.update('clickCount', clickCount);
        vscode.window.showInformationMessage(`StatusBar clicked ${clickCount} times.`);
    };

    myStatusBarItem.command = 'extension.handleClick';

    let disposable = vscode.commands.registerCommand('extension.handleClick', handleClick);
    context.subscriptions.push(disposable);
}