如何开发一个 VSCode 插件

如何开发一个 VSCode 插件

引用

CSDN

1.

https://blog.csdn.net/hawk2014bj/article/details/139535303

如何开发一个 VSCode 插件？本文将通过开发一个简单的 "Hello World" 插件，带你了解 VSCode 插件开发的基本流程。

1. 安装脚手架

首先，我们需要使用 Yeoman 和 generator-code 工具来创建一个新的 VSCode 扩展项目。在命令行中运行以下命令：

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

根据提示选择插件开发语言为 TypeScript，并完成项目的基本配置：

• 项目名称：Hello
• 项目标识符：hello
• 项目描述：first ext
• 是否初始化 Git 仓库：No
• 打包工具选择：unbundled
• 包管理器选择：yarn

2. 打开插件开发目录

项目创建完成后，会在当前目录下生成一个扩展项目文件夹。主要文件包括：

• extension.js：插件的主文件入口

点击运行（F5），然后通过 ⇧⌘P 输入 "Hello"，点击 "Hello World"，你会在屏幕右下角看到 "Hello World from Hello!" 的提示信息。

3. 插件核心概念

在开发 VSCode 插件时，需要理解以下几个核心概念：

• Activation Events：激活事件决定了何时激活你的插件。你可以在 package.json 文件中的 activationEvents 字段中指定这些事件。
• Contribution Points：贡献点可以理解为要扩展 VSCode 的哪个组件，例如上面的例子就是扩展 VSCode 的命令列表，在列表中添加一项。
• VS Code API：插件可以调用 VSCode 的 API，例如注册命令 ID。

4. 添加菜单

很多 VSCode 插件都会在左侧添加一个菜单按钮。下面的代码展示了如何实现这一功能：

4.1 添加图标配置

在 package.json 中添加以下配置：

"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"
      }
    ]
  }

4.2 点击菜单后，打开窗口的定义

在 src 目录下创建 helloWorldViewProvider.ts 文件，添加以下代码：

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;
    }
}

4.3 入口文件注册窗口 View

在 src/extension.ts 文件中添加以下代码：

const helloWorldViewProvider = new HelloWorldViewProvider();
vscode.window.registerTreeDataProvider('helloWorldView', helloWorldViewProvider);

总结

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