制作Vs Code扩展时你需要了解的21个问题
liebian365 2024-11-22 17:15 17 浏览 0 评论
您要打算开发 VSCode 扩展吗? 或者,也许您正在为目前正在努力实现的目标而苦苦挣扎?
我们构建了一个 VSCode 扩展来帮助开发人员分享他们的最佳编码实践,在他们的 IDE 中访问它们,并获得自动建议。
由于我们花了一些时间来探索 VSCode API 提供的可能性,因此我们热衷于分享我们发现的一些有用材料,如果它能对您有所帮助,我们将很高兴。 顺便说一句,请随时在评论中提问任何问题!
这篇文章中回答的问题的列表
- #1 如何访问当前编辑器中的可见行?
- #2 如何获取选中的文本?
- #3 如何使用自定义图片对行进行标记
- #4 如何获取当前编辑器的编程语言?
- #5 如何在右键单击事件上添加菜单?
- #6 如何设置自定义快捷方式来执行操作?
- #7 如何列出打开的 VSCode 扩展面板?
- #8 如何检索所有已安装的 VSCode 扩展?
- #9 如何给一行代码加下划线?
- #10 如何获取当前标签页的文件名?
- #11 如何监听选项卡关闭事件?
- #12 如何监听打开标签页事件?
- #13 如何监听当前选项卡发生变化事件?
- #14 如何添加和访问 VSCode 扩展设置?
- #15 如何实现 Caret Listener?
- #16 如何获取当前行的插入符?
- #17 如何监听当前编辑器保存?
- #18 如何监听调用特定快捷方式?
- #19 如何更改我的 VSCode 扩展程序的徽标?
- #20 如何请求输入命令?
- #21 如何提示警告通知?
?? 请注意,对于以下所有示例,您可以使用以下导入
import * as vscode from 'vscode';
作为你的文件第一行。
#1 如何访问当前编辑器中的可见行?
如果您的扩展只需要处理在用户屏幕上可见的源代码,则下列代码段适合您:
const editor = vscode.window.activeTextEditor;
if (editor) {
const firstVisibleLine = editor.visibleRanges[0].start.line;
const lastVisibleLine = editor.visibleRanges[0].end.line;
// 对用可见的行的操作
}
请注意,如果编辑器被拆分,则 visibleRanges 属性可能会返回多个范围,无论是水平拆分还是垂直拆分。 因此,您可能需要处理数组中的所有范围才能访问完整的可见行集合。
#2 如何获取选中的文本?
您可以按如下方式实现:
const editor = vscode.window.activeTextEditor;
if (editor) {
const selection = editor.selection;
const text = editor.document.getText(selection);
console.log(`The selected text is: ${text}`);
}
#3 如何使用自定义图片对行进行标记(mark)
以下是如何在第 10 行向编辑器添加带有自定义图像的标记(mark):
const editor = vscode.window.activeTextEditor;
if (editor) {
const lineNumber = 10; //对应的行
const start = new vscode.Position(lineNumber, 0);
const end = new vscode.Position(lineNumber, 0);
const decorationRange = new vscode.Range(start, end);
const decorationOptions = {
gutterIconPath: '/path/to/your/custom/image.png',
gutterIconSize: 'contain', //可用值为“auto”、“contain”、“cover”和任何百分比值。
};
const decoration = vscode.window.createTextEditorDecorationType(decorationOptions);
editor.setDecorations(decoration, [decorationRange]);
}
4 #如何获取当前编辑器的编程语言?
即便您可以使用文件扩展名,但是VSCode 编辑器也会存储一个 languageId 属性:
const editor = vscode.window.activeTextEditor;
if (editor) {
let language = editor.document.languageId;
console.log(`The current document's language is ${language}`);
}
#5 如何在右键单击事件上添加菜单?
以下是如何设置命令并在菜单中注册项目的示例。
export function activate(context: vscode.ExtensionContext) {
// 定义命令
const commandId = 'extension.promyzeSayHello';
const sayHello = () => {
vscode.window.showInformationMessage('Hello World! This is Promyze!');
};
// 创建命令菜单项
const command = vscode.commands.registerCommand(commandId, sayHello);
const menuItem = vscode.commands.createMenuItem({
command,
label: 'Get Hello from Promyze',
});
// 将菜单项添加到上下文菜单
vscode.window.contextMenus.append(menuItem);
// 当停用时,禁用处理命令和菜单项
context.subscriptions.push(command, menuItem);
}
#6 如何设置自定义快捷方式来执行操作?
自定义键绑定可以帮助您的用户执行扩展中可用的命令:
export function activate(context: vscode.ExtensionContext) {
// 定义命令和动作
const commandId = 'extension.promyzeSayHello';
const sayHello = () => {
vscode.window.showInformationMessage('Hello World! This is Promyze!');
};
// 注册命令并绑定快捷键
context.subscriptions.push(
vscode.commands.registerCommand(commandId, sayHello),
vscode.keybindings.bindKey('ctrl+shift+p', sayHello),
);
}
请注意,您必须在对这些方法的单独调用中注册命令并绑定快捷键。 不要忘记将这些调用添加到 ExtensionContext 对象的订阅数组中,以便在停用扩展时处理它们。
要使用自定义快捷键绑定,您需要在扩展的 keybindings.json 文件中定义它:
{
"key": "ctrl+shift+p",
"command": "extension.promyzeSayHello",
"when": "editorTextFocus"
}
在此示例中,键绑定应仅在文本编辑器获得焦点时运行命令。
#7 如何列出打开的 VSCode 扩展面板?
要检索打开的扩展面板列表,您可以按如下方式进行:
const visiblePanels = vscode.window.visibleTextEditors.filter(editor => editor.viewColumn);
console.log(`There are ${visiblePanels.length} opened extensions panes.`);
visiblePanels.forEach(panel => {
console.log(`- Pane: ${panel.title}`);
});
此代码过滤可见文本编辑器的数组,以仅包括具有视图列(即扩展窗格)。
#8 如何检索所有已安装的 VSCode 扩展?
根据您的用例,您可能有兴趣列出安装在 VSCode 中的其他扩展:
export function activate(context: vscode.ExtensionContext) {
const extensions = context.extensions;
console.log(`There are ${extensions.length} extensions installed.`);
extensions.forEach(extension => {
console.log(`- Extension: ${extension.id} (${extension.extensionPath})`);
});
}
#9 如何给一行代码加下划线?
如果您打算突出显示一段代码以通知您的用户,例如,如果您的扩展充当 linter,则可以通过以下方式添加它(此处整行有一条蓝线):
const editor = vscode.window.activeTextEditor;
if (editor) {
const lineNumber = 0;
const start = new vscode.Position(lineNumber, 0);
const end = new vscode.Position(lineNumber, editor.document.lineAt(lineNumber).text.length);
const decorationRange = new vscode.Range(start, end);
const decorationOptions = {
isWholeLine: true,
overviewRulerLane: vscode.OverviewRulerLane.Right,
overviewRulerColor: 'blue',
textEditorDecorationType: vscode.TextEditorDecorationType.Underline
};
const decoration = vscode.window.createTextEditorDecorationType(decorationOptions);
editor.setDecorations(decoration, [decorationRange]);
}
#10 如何获取当前标签页的文件名?
下面的代码显示了如何获取文件名以及完整路径:
const editor = vscode.window.activeTextEditor;
if (editor) {
const fileName = editor.document.fileName;
console.log(`The file name of the current tab is ${fileName}.`);
//获取完整路径
const fileUri = editor.document.uri;
const filePath = fileUri.fsPath;
}
#11 如何监听标签页关闭事件?
为每个打开的选项卡维护一个缓存,这将是很有用,因此这可以避免内存泄漏:
export function activate(context: vscode.ExtensionContext) {
vscode.workspace.onDidCloseTextDocument(document => {
console.log(`Tab closed: ${document.fileName}`);
});
}
#12 如何监听打开标签页事件?
要在每次打开新选项卡时运行一段代码,这段代码适合你:
export function activate(context: vscode.ExtensionContext) {
vscode.workspace.onDidOpenTextDocument(document => {
console.log(`New tab opened: ${document.fileName}`);
});
}
值得注意的是,如果文档被打开但不在项目或工作区中,则不会触发该事件。
#13 如何监听当前标签页发生变化?
如果您需要在活动编辑器更新时触发一段代码:
export function activate(context: vscode.ExtensionContext) {
vscode.window.onDidChangeActiveTextEditor(editor => {
if (editor) {
console.log(`Current tab changed to: ${editor.document.fileName}`);
}
});
}
您还可以使用 onDidChangeVisibleTextEditors 事件,该事件在可见文本编辑器集更改时触发。
#14 如何添加和访问 VSCode 扩展设置?
要使用 Promyze VSCode 扩展,用户需要在扩展设置中输入 API 密钥。
此字段应在扩展的 package.json 文件中的“配置”部分的“属性”字段中定义:
{
"contributes": {
"configuration": {
"type": "object",
"title": "Promyze Settings",
"properties": {
"promyzeApiKey": {
"type": "string",
"default": "",
"description": "The Promyze API Key"
}
}
}
}
}
要读取代码中的设置值,可以使用 workspace.getConfiguration 方法:
const promyzeApiKey = vscode.workspace.getConfiguration().get('promyzeApiKey');
#15 如何实现 Caret Listener?
您可以使用 TextEditor 对象的 onDidChangeCursorPosition 事件,当光标位置在编辑器中发生变化时触发:
const editor = vscode.window.activeTextEditor;
if (editor) {
editor.onDidChangeCursorPosition(e => {
console.log(`Cursor moved to line: ${e.position.line}, column: ${e.position.character}`);
});
}
您还可以使用在光标选择更改时触发的 onDidChangeCursorSelection 事件。
#16 如何获取插入符的当前行?
如果您希望基于当前上下文进行计算操作,则获取插入符(光标)的当前行可能很有意义:
const editor = vscode.window.activeTextEditor;
if (editor) {
const position = editor.selection.active;
const line = position.line;
console.log(`Current caret line: ${line}`);
}
Position 对象表示光标的当前位置。 您也可以使用 editor.document.lineAt(position) 方法获得相同的结果,如下所示:
const currentLine = editor.document.lineAt(position);
console.log(`Current caret line: ${currentLine.text}`);
#17 如何监听当前编辑器保存事件?
如果您想在用户保存打开的编辑器的内容时运行操作,这将很有用。
您需要使用工作区模块的 onDidSaveTextDocument 事件,每当保存文本文档时都会触发该事件:
export function activate(context: vscode.ExtensionContext) {
vscode.workspace.onDidSaveTextDocument(document => {
if (vscode.window.activeTextEditor && vscode.window.activeTextEditor.document === document) {
console.log(`The editor has saved the following file: ${document.fileName}`);
}
});
}
请注意,在此示例中,它检查保存的文档是否是当前正在编辑的文档。
#18 如何监听调用特定快捷方式事件?
您是否需要在用户复制/剪切一段代码后执行操作? 然后,您可以使用命令模块并为快捷方式注册命令。
这是调用 editor.action.clipboardCutAction 命令时的示例(剪切一行):
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(vscode.commands.registerCommand('editor.action.clipboardCutAction', () => {
console.log('The cut command has been called');
}));
}
#19 如何更改我的 VSCode 扩展程序的徽标?
您需要在 package.json 文件的“图标”属性中指定图像的路径。 路径可以是相对的或绝对的:
"icon": "yourIcon.png"
VSCode 支持 PNG、JPEG 和 GIF 格式。 并且不要忘记将该文件包含在您的扩展中
#20 如何请求输入命令?
vscode.window.showInputBox() 函数将帮助您提示用户输入,例如在执行命令时:
export function createBestPracticeCommand() {
// 前置代码
vscode.window.showInputBox({
placeHolder: 'Enter your best practice name'
}).then(value => {
// 使用用户输入的值检索最佳实践名称
});
}
在用户输入一些内容并按下“Enter”后,then() 回调将以输入作为其参数被调用。 请注意,您可以为此方法使用 async/await。
#21 如何提示警告通知?
这是一个如何制作它的例子:
vscode.window.showWarningMessage("This is a warning message", {modal: true})
.then(response => {
if(response === "ok"){
// 用户点击ok
}
});
这里的 {modal: true} 是一个可选的配置对象,表示消息框应该是模态的。 第二个参数也可以是可选数组:
vscode.window.showWarningMessage("This is a warning message", 'ok', 'cancel').then(response => {
if(response === "ok"){
// 用户点击ok
}
});
警告消息将与“ok”和“cancel”两个按钮一起显示。
其他:
- 对于信息通知,您可以使用 showInformationMessage
- 对于错误通知,您可以使用 showErrorMessage
就是这样,伙计们! 我们希望它可以帮助您开始开发 VSCode 扩展。
相关推荐
- 记录一个ComboBox的设置问题,你可能没遇到过
-
ComboBox这个控件使用频率太高了,我从VC6编程开始就用它,一直用到C#到现在的Net6,要说我这么一个编程老手还能在它身上栽跟头,我都不敢相信。但是今天竟然被它无情的戏耍了。记录下这个问题,看...
- 组合框(Combo Box)应用之一_combo简单组合框
-
【分享成果,随喜正能量】对别人期待太高,本质上是对自身无能的逃避和推托,与其期待别人,不如依靠自己。你不害怕孤独,就不再寄期望于他人陪伴;你有底气解决问题,就不在寄期望于他人向你伸出援手。一个人期待值...
- Qt之QComboBox定制(二)_qt on_combobox_activated
-
上一篇文章Qt之QComboBox定制讲到了qt实现自定义的下拉框,该篇文章主要实现了列表式的下拉框,这一节我还将继续讲解QComboBox的定制,而这一节我将会讲述更高级的用法,不仅仅是下拉列表框,...
- 从零开始系列,用C#做软件产品:私人日记(九)ComboBox入门
-
第八节的内容早已写好发布,结果一直在审核中,不知道触动了哪条神经。评论中看到有一些网友都在问为什么不用WPF来开发,在这里我统一说明下:1)WPF界面设计相对复杂。由于它是矢量的,需要额外有很多容器做...
- QT-QSharedMemory_qt450-10是什么材料
-
1.QSharedMemory介绍...
- 进入Python的世界19-pyqt6不只是UI设计,其他模块功能如何运用
-
今天是大年初四,继续探讨pyqt6,给出使用的建议。PyQt6绝不仅仅局限于UI设计...
- 从零开始学Qt - 10:一文读懂Qt的元对象系统
-
Qt本身并不是一种编程语言,它实质上是一个跨平台的C++开发类库。它是用标准C++编写的,为开发GUI应用程序和非GUI应用程序提供了各种类。Qt对标准C++进行了扩展,引入一些新的概念和功能,例如信...
- QT实现抖动文字和滚动文字,附源码
-
前言不知道大家有没有发现今天的文章有什么不一样,哈哈,我自己胡拼乱凑弄了一个logo,好不好看就先不说了,最起码萌萌哒...当然这不是今天的重点,在做logo的时候,我原本想让文字动起来的,奈何技术有...
- Qt Concurrent的使用_qt是什么意思
-
1.简介QtConcurrent命名空间提供了高级api,使得无需使用诸如互斥、读写锁、等待条件或信号量等低级线程原语就可以编写多线程程序。使用QtConcurrent编写的程序会根据可用的...
- Qt使用FFmpeg播放视频_qt使用ffmpeg播放视频功能
-
一、使用场景...
- Qt中使用匿名函数lambda表达式_匿名函数lambda
-
一、为什么要使用匿名函数lamdba首先,lambda表达式可以使代码变得简单,C++中,一个lambda表达式表示一个可调用的代码单元。如代码:...
- EtherCAT运动控制卡开发教程之Qt(中):小线段连续轨迹加工
-
今天,正运动小助手给大家分享一下EtherCAT运动控制卡开发教程之Qt,主要介绍一下如何通过Qt编程实现小线段轨迹连续加工,暂停与继续。...
- 送亲人,用1小时制作精美电子相框 | Qt 示例
-
今天给大家分享:...
- Python之面向对象:综合应用,基于GUI实现会动的游戏英雄
-
引言本打算以上一篇文章作为面向对象模块的收尾,但是,犹豫了许久,还是决定再补充一篇,也就是今天这篇文章,打算基于Python的PyQt6/PySide6框架开发一个GUI程序,模拟实现一个在电脑桌面活...
- Qt——常用数据类型_qt基本数据类型
-
1.基础类型因为Qt是一个C++框架,因此C++中所有的语法和数据类型在Qt中都是被支持的,但是Qt中也定义了一些属于自己的数据类型,下边给大家介绍一下这些基础的数类型。...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 记录一个ComboBox的设置问题,你可能没遇到过
- 组合框(Combo Box)应用之一_combo简单组合框
- Qt之QComboBox定制(二)_qt on_combobox_activated
- 从零开始系列,用C#做软件产品:私人日记(九)ComboBox入门
- QT-QSharedMemory_qt450-10是什么材料
- 进入Python的世界19-pyqt6不只是UI设计,其他模块功能如何运用
- 从零开始学Qt - 10:一文读懂Qt的元对象系统
- QT实现抖动文字和滚动文字,附源码
- Qt Concurrent的使用_qt是什么意思
- Qt使用FFmpeg播放视频_qt使用ffmpeg播放视频功能
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)