南阳网站推广优化公司,公众号免费素材网站,网络公司名字大全寓意,做私人网站#x1f431; 个人主页#xff1a;不叫猫先生#xff0c;公众号#xff1a;前端舵手 #x1f64b;♂️ 作者简介#xff1a;前端领域优质作者、阿里云专家博主#xff0c;共同学习共同进步#xff0c;一起加油呀#xff01; #x1f4e2; 资料领取#xff1a;前端… 个人主页不叫猫先生公众号前端舵手 ♂️ 作者简介前端领域优质作者、阿里云专家博主共同学习共同进步一起加油呀 资料领取前端进阶资料可以找我免费领取 摸鱼学习交流我们的宗旨是在「工作中摸鱼摸鱼中进步」期待大佬一起来摸鱼(文末有我wx或者私信) 目录 一、状态栏介绍二、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方法创建了状态栏项目可以通过设置其各种属性如 text、tooltip、command 等来定义该项目的外观和行为。并且可以通过调用 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的APIcreateStatusBarItem创建一个状态栏对齐的方式为右对齐优先级的设置为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 selectedconst 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 managemyStatusBarItem 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-datesubscriptions.push(vscode.window.onDidChangeActiveTextEditor(updateStatusBarItem));subscriptions.push(vscode.window.onDidChangeTextEditorSelection(updateStatusBarItem));// update status bar item once at startupdateStatusBarItem();
}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;
}
