个人主页:不叫猫先生,公众号:前端舵手
♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀!
资料领取:前端进阶资料可以找我免费领取
摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼(文末有我wx或者私信)
状态栏位于VS Code 工作台底部的水平区域,显示与工作区相关的信息和操作,主要分为左右两个区域。其中
VS Code 状态栏官方文档
createStatusBarItem
是VS Code 的一个API,用于创建一个自定义的状态栏项目。
语法:vscode.window.createStatusBarItem(alignment: StatusBarAlignment, priority: number)
参数解析:
alignment: 是一个枚举类型 StatusBarAlignment
的值,用于指定状态栏项目的对齐方式。可以是 StatusBarAlignment.Left
(左对齐)或 StatusBarAlignment.Right
(右对齐)。
priority: 类型为数字类型,用于指定状态栏项目的显示优先级。较低的数字意味着更高的优先级。例如,如果多个状态栏项目都被创建了,它们的优先级决定了它们在状态栏上的显示顺序。
一旦使用 createStatusBarItem
方法创建了状态栏项目,可以通过设置其各种属性(如 text
、tooltip
、command
等)来定义该项目的外观和行为。并且可以通过调用 show()
方法将状态栏项目显示在状态栏上,或调用 hide()
方法将其隐藏。
下面案例实现的功能为:显示选中的文本的总行数,并且当点击状态栏项目时候,会给用户一个提示框的提示。
先注册一个命令: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!`);
}));
使用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);
上面状态栏创建好了,但是状态栏的具体显示信息是什么呢?
思考:如果不选中文本则不显示,选中文本时显示,切换面板时状态栏也应该实时变化。
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();
}
当选中行数大于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();
}
}
当调用这个函数时,会接收一个 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;
}
最终的功能展示如下图所示:
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;
}