【VS Code插件开发】状态栏(五)

个人主页:不叫猫先生,公众号:前端舵手
‍♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀!
资料领取:前端进阶资料可以找我免费领取
摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼(文末有我wx或者私信)

【VS Code插件开发】状态栏(五)_第1张图片

目录

  • 一、状态栏介绍
  • 二、createStatusBarItem
  • 三、案例
    • 1、注册命令,触发状态栏执行
    • 2、创建状态栏
    • 3、状态栏的内容显示
      • (1)状态栏项目的显示/隐藏
      • (2)计算选中的总行数
    • 4、展示
    • 5、全部源码

一、状态栏介绍

状态栏位于VS Code 工作台底部的水平区域,显示与工作区相关的信息和操作,主要分为左右两个区域。其中

  • 左侧:与整个工作区相关的项目(状态、问题/警告、同步)
  • 右侧:上下文相关的项目(语言、间距、反馈)

具体如图所示:
在这里插入图片描述

VS Code 状态栏官方文档

二、createStatusBarItem

createStatusBarItem是VS Code 的一个API,用于创建一个自定义的状态栏项目。

语法:vscode.window.createStatusBarItem(alignment: StatusBarAlignment, priority: number)

参数解析:

  • alignment: 是一个枚举类型 StatusBarAlignment 的值,用于指定状态栏项目的对齐方式。可以是 StatusBarAlignment.Left(左对齐)或 StatusBarAlignment.Right(右对齐)。

  • priority: 类型为数字类型,用于指定状态栏项目的显示优先级。较低的数字意味着更高的优先级。例如,如果多个状态栏项目都被创建了,它们的优先级决定了它们在状态栏上的显示顺序。

一旦使用 createStatusBarItem方法创建了状态栏项目,可以通过设置其各种属性(如 texttooltipcommand 等)来定义该项目的外观和行为。并且可以通过调用 show()方法将状态栏项目显示在状态栏上,或调用 hide()方法将其隐藏。

三、案例

下面案例实现的功能为:显示选中的文本的总行数,并且当点击状态栏项目时候,会给用户一个提示框的提示。

1、注册命令,触发状态栏执行

先注册一个命令:demoPlugin.showSelectionCount,当触发状态栏的项目的时候给用户一个提示框,显示选中的行数。

	const myCommandId = 'demoPlugin.showSelectionCount';
	subscriptions.push(vscode.commands.registerCommand(myCommandId, () => {
		const n = getNumberOfSelectedLines(vscode.window.activeTextEditor);
		vscode.window.showInformationMessage(`Yeah, ${n} line(s) selected... Keep going!`);
	}));

2、创建状态栏

使用VS Code的API:createStatusBarItem,创建一个状态栏,对齐的方式为右对齐,优先级的设置为100。并且将之前注册的命令(demoPlugin.showSelectionCount)与状态栏项目关联起来,以便在点击项目时触发上面的命令。

let myStatusBarItem: vscode.StatusBarItem;
myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
myStatusBarItem.command = myCommandId;
subscriptions.push(myStatusBarItem);

上面状态栏创建好了,但是状态栏的具体显示信息是什么呢?

思考:如果不选中文本则不显示,选中文本时显示,切换面板时状态栏也应该实时变化。

3、状态栏的内容显示

export function activate({ subscriptions }: vscode.ExtensionContext) {
let myStatusBarItem: vscode.StatusBarItem;
myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
myStatusBarItem.command = myCommandId;
subscriptions.push(myStatusBarItem);
  updateStatusBarItem();
}

(1)状态栏项目的显示/隐藏

当选中行数大于0显示,否则隐藏。其中

  • vscode.window.activeTextEditor:为当前活动的文本编辑器。
  • myStatusBarItem.text :设置状态栏的具体显示内容
  • $(megaphone):为VS Code内置图标(产品图标),可在视图和编辑器中使用,也可在悬停、状态栏和扩展中使用。产品图标参考
  • myStatusBarItem.show():显示状态栏
  • myStatusBarItem.hide():隐藏状态栏
function updateStatusBarItem(): void {
	const n = getNumberOfSelectedLines(vscode.window.activeTextEditor);
	if (n > 0) {
		myStatusBarItem.text = `$(megaphone) ${n} line(s) selected`;
		myStatusBarItem.show();
	} else {
		myStatusBarItem.hide();
	}
}

(2)计算选中的总行数

当调用这个函数时,会接收一个 vscode.TextEditor 对象作为参数,该对象代表当前的文本编辑器。该函数的目标是计算当前文本编辑器中所选行的总数。

  • editor.selections:它返回一个数组,其中包含了当前文本编辑器中所有的选择范围(selections)。在 VS Code 中,用户可以同时选择多个不连续的文本区域,因此 editor.selections 返回一个包含这些选择范围的数组。

  • .reduce((prev, curr) => prev + (curr.end.line - curr.start.line), 0):这是一个数组方法 reduce 的调用,用于将数组中的每个选择范围的行数差累加起来。
    reduce 方法接受一个回调函数,这个回调函数会在数组中的每个元素上被调用。在这个例子中,回调函数有两个参数:

    • prev:累加的结果。在每次迭代中,它保存之前的累加值。

    • curr:当前迭代的选择范围(当前元素)。

    • 0:这是 reduce 方法的初始值,也就是累加的初始值。在第一次迭代时,prev 将被设置为初始值 0,然后会在每次迭代中更新。

最终,reduce 方法会遍历所有的选择范围,将它们的行数差累加起来,从而得到当前文本编辑器中所选行的总数。如果没有选择范围或者 editor 参数为 undefined,则函数将返回 0,表示没有选择任何行。

function getNumberOfSelectedLines(editor: vscode.TextEditor | undefined): number {
	let lines = 0;
	if (editor) {
		console.log(editor,'editor')
		console.log(editor.selections,'edieditor.selectionstor')
		lines = editor.selections.reduce((prev, curr) => prev + (curr.end.line - curr.start.line), 0);
	}
	return lines;
}

4、展示

最终的功能展示如下图所示:

5、全部源码


import * as vscode from 'vscode';

let myStatusBarItem: vscode.StatusBarItem;

export function activate({ subscriptions }: vscode.ExtensionContext) {

	// register a command that is invoked when the status bar
	// item is selected
	const myCommandId = 'demoPlugin.showSelectionCount';
	subscriptions.push(vscode.commands.registerCommand(myCommandId, () => {
		const n = getNumberOfSelectedLines(vscode.window.activeTextEditor);
		vscode.window.showInformationMessage(`Yeah, ${n} line(s) selected... Keep going!`);
	}));

	// create a new status bar item that we can now manage
	myStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
	myStatusBarItem.command = myCommandId;
	subscriptions.push(myStatusBarItem);

	// register some listener that make sure the status bar 
	// item always up-to-date
	subscriptions.push(vscode.window.onDidChangeActiveTextEditor(updateStatusBarItem));
	subscriptions.push(vscode.window.onDidChangeTextEditorSelection(updateStatusBarItem));

	// update status bar item once at start
	updateStatusBarItem();
}

function updateStatusBarItem(): void {
	const n = getNumberOfSelectedLines(vscode.window.activeTextEditor);
	if (n > 0) {
		myStatusBarItem.text = `$(megaphone) ${n} line(s) selected`;
		myStatusBarItem.show();
	} else {
		myStatusBarItem.hide();
	}
}

function getNumberOfSelectedLines(editor: vscode.TextEditor | undefined): number {
	let lines = 0;
	if (editor) {
		console.log(editor,'editor')
		console.log(editor.selections,'edieditor.selectionstor')
		lines = editor.selections.reduce((prev, curr) => prev + (curr.end.line - curr.start.line), 0);
	}
	return lines;
}

你可能感兴趣的:(VS,Code插件开发极速入门,vscode,插件,状态栏)