您要打算开发 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 扩展。