vscode扩展开发_vscode 扩展开发

官方文档

VS Code API | Visual Studio Code Extension API

官方文档

https://code.visualstudio.com/api/references/vscode-api

vscode扩展整体开发流程

vscode插件开发流程 - 掘金

• vscode插件开发调试

  1. 卸载开发的插件

  2. 执行watch脚本, 监听代码的变化

  3. 点击编辑器按F5, 进入调试状态

  4. Reload Window刷新页面

  5. 审核元素

         帮助 --> 切换开发人员工具

• 外部登录交互

    背景

    当一个外部的应用程序或者网页试图通过特定的 URI 模式（通过链接快速执行 VSCode 中的命令 即:vscode://）启动或者与 VSCode 进行交互时，使用这个registerUriHandler可以注册一个处理程序(handler)以响应和处理这些 URI 请求。

    registerUriHandler 在 Visual Studio Code (VSCode) 中通常用于让你的扩展(extension)能够响应和处理外部调用的 URI (统一资源标识符)。

    VSCode打开外部链接

  vscode.env.openExternal(vscode.Uri.parse(url))
  

    VSCode扩展处理URI

  vscode.window.registerUriHandler({
      handleUri(uri) {
          if(uri.scheme === 'vscode') {
              // 解析和处理 URI 中的参数
              const query = new URLSearchParams(uri.query);
          }
      }
  });
  

    在 Visual Studio Code (VSCode) 中，可以通过构建特定的 URI 并使用 vscode:// 协议来快速执行 VSCode 内的命令。URI 的格式通常如下：

  vscode://<publisher>.<extension>/<command>?<params>
  

    extensionID：<publisher>.<extension>， 可在扩展的设置位置复制

  • <publisher> 是扩展的发布者名称。

  • <extension> 是扩展的名称。

  • <command> 是要执行的命令。

  • <params> 是传递给命令的参数，采用 URL 查询字符串的格式。

• 状态栏设置快捷入口

    在extension.ts文件中创建状态栏

  // 创建状态栏快速入口
  let statusBarItem = vscode.window.createStatusBarItem(
      vscode.StatusBarAlignment.Right,
      10
   );
   statusBarItem.command = "vscode.view.focus";
   statusBarItem.tooltip = "xxx";
   // 状态栏text设置需以package.json中配置的icons的key为准
   statusBarItem.text = `$(xxx-dark)`;
   statusBarItem.show();
  

    在package.json中创建一个图标

  "icons": {
       "xxx-dark": {
          "description": "icon",
          "default": {
            // fontPath需是woff/woff2/ttf格式
            "fontPath": "images/xxx.woff",
            "fontCharacter": "\\e900"
          }
       }
  }
  

woff字体可以通过https://icomoon.io/app/#/select生成

1. 上传svg

2. 选中上传的图标, 点击右下角的Font

3. Download

• 侧边栏标题旁设置操作区

  

        在package.json文件中menus下设置view/title

"view/title": [
     {
          "command": "login",
          // 什么情况下进行展示, loginSuccess表示触发命令时进行展示
          "when": "loginSuccess && view == vscode.view",
          // 分组, 如不设置, 则会统一管理
          "group": "navigation"
      }
]

配置view/title之后需设置commands

commands: [
    {
        "command": "login",
        "title": "已登录",
        // 设置不可交互
        "enablement": "false",
        // $(icon-name) vscode设置图标语法
        "icon": "$(clear-all)"
    }
]

要触发loginSuccess需使用

vscode.commands.executeCommand('setContext', 'loginSuccess', true);

• 使用 VS Code 的语言特性获取所有的文档符号

  const editor = vscode.window.activeTextEditor!;
  // 该方式可以获取到全部的变量和函数的行号; 缺点是执行时间过久
  const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>("vscode.executeDocumentSymbolProvider", editor.document.uri);
  

• 代码透镜

• class MyCodeLensProvider {
      provideCodeLenses(document: vscode.TextDocument) {
        // 在这里实现你的逻辑来确定在哪些范围以及如何创建 CodeLens
        let lenses: vscode.CodeLens[] = [];
   
        // 假设我们为每个函数声明创建 CodeLens
        for (let i = 0; i < document.lineCount; i++) {
          const lineOfText = document.lineAt(i);
          if (lineOfText.text.startsWith("function")) {
            const range1 = new vscode.Range(i, 0, i, lineOfText.text.length);
            const command1: vscode.Command = {
              // 此命令将用于 CodeLens 交互
              command: "extension.showCodeLens",
              title: "代码解释", // 显示在 CodeLens 上的文本
              arguments: [], //传递到command命令的参数, 只能传递至registerCommand注册的命令
            };
   
            const range2 = new vscode.Range(i, 0, i, lineOfText.text.length);
            const command2: vscode.Command = {
              command: "extension.showCodeLens",
              title: "代码优化",
            };
            let lens1 = new vscode.CodeLens(range1, command1);
            let lens2 = new vscode.CodeLens(range2, command2);
            lenses.push(lens1, lens2);
          }
        }
   
        return lenses;
      }
    }
   
    let provider = new MyCodeLensProvider();
   
    // 注册 CodeLens 提供程序
    // 第一个参数指定 CodeLens 在哪种类型的文件中激活
    // 第二个参数是提供程序实例
    context.subscriptions.push(
      vscode.languages.registerCodeLensProvider("*", provider)
    );
  

  

• 内联代码提示

  let completionItems: vscode.InlineCompletionItem[] = [];
    const provider = vscode.languages.registerInlineCompletionItemProvider(
      { pattern: "**" },
      {
        provideInlineCompletionItems: async (
          document: vscode.TextDocument,
          position: vscode.Position,
          context: vscode.InlineCompletionContext,
          token: vscode.CancellationToken
        ) => {
          // 每次触发代码提示triggerKind都是先1后0, 不进行判断会连续执行两次提示
          if (context.triggerKind === vscode.InlineCompletionTriggerKind.Invoke) {
            return completionItems;
          } else if (
            context.triggerKind === vscode.InlineCompletionTriggerKind.Automatic
          ) {
            const editor = vscode.window.activeTextEditor!;
            const cursorPosition = editor.selection.active;
            let beforeSelection = new vscode.Selection(
              0,
              0,
              cursorPosition.line,
              cursorPosition.character
            );
            // 获取光标之前的文本
            let beforeText = document.getText(beforeSelection);
   
            const trailingRange = new vscode.Range(
              cursorPosition,
              document.lineAt(document.lineCount - 1).range.end
            );
            const trailingText = document.getText(trailingRange);
            if (
              cursorPosition.character === 0 &&
              beforeText[beforeText.length - 1] !== "\n"
            ) {
              beforeText += "\n";
            }
   
            if (beforeText.trim() === "") {
              return [];
            }
            let beforeLine = document?.lineAt(cursorPosition.line - 1);
            let beforeLineText = beforeLine?.text;
            let result = await util.getCodeCompletions();
            const completionItem = new vscode.InlineCompletionItem(
              result, // 插入的文本
              new vscode.Range(
                cursorPosition.translate(0, result.length),
                cursorPosition
              ) // 插入文本的位置
            );
            completionItems.push(completionItem);
            return completionItems;
          }
        },
      }
    );
   
    context.subscriptions.push(provider);