如何开发一 VSCode 插件

如何开发一个 VSCode 插件,本文开发一个 VSCode "Hello World" 插件,通过代码了解 VSCode 插件是如何工作的。

  1. 安装脚手架

    npx --package yo --package generator-code -- yo code

根据提示选择,插件开发语言选择 TypeScript

? What type of extension do you want to create? New Extension (TypeScript)

? What's the name of your extension? Hello

? What's the identifier of your extension? hello

? What's the description of your extension? first ext

? Initialize a git repository? No

? Which bundler to use? unbundled

? Which package manager to use? yarn

  1. 打开插件开发目录

    extension.js 插件的主文件入口

    点击运行(F5),⇧⌘P 输入 Hello,点击 Hello World,屏幕右下角会出线 Hello World from Hello!

  2. 插件中重要的三个概念

  • Activation Events:激活事件决定了何时激活你的插件。你可以在 package.json 文件中的 activationEvents 字段中指定这些事件。
  • Contribution Points:贡献点可以理解为要扩展 VSCode 那个组件,例如上面的例子就是扩展 VSCode 的命令列表,在列表中添加一项。
  • VS Code API: 插件可以调用 VSCode 的 API,例如注册命令 ID。
  1. 添加菜单
    VSCode 中很多插件都会在左侧添加一个菜单按钮,下面代码用于实现添加左侧按钮
  • 添加图标

    "contributes": {
    "viewsContainers": {
    "activitybar": [
    {
    "id": "helloWorldSidebar",
    "title": "Hello World",
    "icon": "resources/milktea.png"
    }
    ]
    },
    "views": {
    "helloWorldSidebar": [
    {
    "id": "helloWorldView",
    "name": "Hello World View"
    }
    ]
    },
    "commands": [
    {
    "command": "hello.helloWorld",
    "title": "Hello World"
    }
    ]
    },

  • 点击菜单后,打开窗口的定义

    import * as vscode from 'vscode';

    export class HelloWorldViewProvider implements vscode.TreeDataProvider<HelloWorldItem> {
    private _onDidChangeTreeData: vscode.EventEmitter<HelloWorldItem | undefined | void> = new vscode.EventEmitter<HelloWorldItem | undefined | void>();
    readonly onDidChangeTreeData: vscode.Event<HelloWorldItem | undefined | void> = this._onDidChangeTreeData.event;

    复制代码
      getTreeItem(element: HelloWorldItem): vscode.TreeItem {
          return element;
      }
    
      getChildren(element?: HelloWorldItem): Thenable<HelloWorldItem[]> {
          return Promise.resolve(this.getHelloWorldItems());
      }
    
      private getHelloWorldItems(): HelloWorldItem[] {
          return [
              new HelloWorldItem('Item 1', vscode.TreeItemCollapsibleState.None),
              new HelloWorldItem('Item 2', vscode.TreeItemCollapsibleState.None)
          ];
      }
    
      refresh(): void {
          this._onDidChangeTreeData.fire();
      }

    }

    class HelloWorldItem extends vscode.TreeItem {
    constructor(
    public readonly label: string,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState
    ) {
    super(label, collapsibleState);
    this.tooltip = ${this.label};
    this.description = this.label;
    }
    }

  • 入口文件注册窗口 View

    复制代码
      const helloWorldViewProvider = new HelloWorldViewProvider();
      vscode.window.registerTreeDataProvider('helloWorldView', helloWorldViewProvider);

总结

开发 VSCode 插件时,根据需要进行对应的扩展(贡献点),随后对不同的 Command 进行业务功能开发,例如命令点击、菜单点击等等。

相关推荐
隐-梵1 小时前
Android studio进阶开发(四)--okhttp的网络通信的使用
android·ide·okhttp·android studio
大叔比较胖12 小时前
VSCode 用于JAVA开发的环境配置,JDK为1.8版本时的配置
java·ide·vscode·jdk·1.8
jayson.h15 小时前
VScode
ide·vscode·编辑器
想学好英文的ikun15 小时前
【MCP】第二篇:IDE革命——用MCP构建下一代智能工具链
ide·人工智能·python·ai·个人开发·mcp
三体世界15 小时前
Linux 管道理解
linux·c语言·开发语言·c++·git·vscode·visual studio
八股文领域大手子16 小时前
IDEA热加载
java·ide·intellij-idea
EQ-雪梨蛋花汤16 小时前
【Unity笔记】Unity音效管理:ScriptableObject配置 + 音量控制 + 编辑器预览播放自动化实现
笔记·unity·编辑器
dustcell.18 小时前
vim 命令复习
linux·编辑器·vim
拾贰_C18 小时前
【IDEA】怎么修改IDEA的JDK版本
java·ide·intellij-idea
承接电子控制相关项目19 小时前
开发工具KEIL iar VSCODE 优缺点对比
ide·vscode·单片机·自动化·编辑器