百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分析 > 正文

制作Vs Code扩展时你需要了解的21个问题

liebian365 2024-11-22 17:15 18 浏览 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中也定义了一些属于自己的数据类型,下边给大家介绍一下这些基础的数类型。...

取消回复欢迎 发表评论: