如何开发一 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 进行业务功能开发,例如命令点击、菜单点击等等。

相关推荐
罗政7 小时前
冒险岛079 V8 整合版源码搭建教程+IDEA启动
java·ide·intellij-idea
艾斯比的日常8 小时前
VSCode 实用快捷键
ide·vscode·编辑器
Galaxy_12298 小时前
vscode远程报错:Remote host key has changed,...
ide·vscode·编辑器
彬sir哥8 小时前
VScode运行后出现黑窗口
vscode·运行·黑窗口
Hi~晴天大圣14 小时前
Pycharm中断点使用技巧
ide·python·pycharm
且随疾风前行.15 小时前
Android Studio 提示 !Failed to initialize editor
android·ide·android studio
比牛顿更懂PID16 小时前
VSCode本地python包“无法解析导入”
ide·vscode·python
qxyywy18 小时前
CUDA 安装 一直卡在Installing Nsight Visual Studio Edition
ide·visual studio·cuda
前端郭德纲19 小时前
vscode默认终端怎么设置成git bash
git·vscode·bash
瞌睡不来20 小时前
(学习总结25)Linux工具:vim 编辑器 和 gcc/g++ 编译器
linux·学习·编辑器·vim·编译器·gcc/g++