如何开发一 VSCode 插件

news/2024/6/16 16:34:42 标签: vscode, ide, 编辑器

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


http://www.niftyadmin.cn/n/5514362.html

相关文章

jQuery能绑定事件监听吗

是的&#xff0c;jQuery当然可以绑定事件监听。jQuery 提供了多种方法来绑定事件&#xff0c;其中最常用的是 .on() 方法。但在此之前&#xff0c;还有 .bind(), .live(), .delegate(), 和 .one() 等方法&#xff08;尽管 .bind() 和 .live() 在较新版本的 jQuery 中已经不推荐…

VS Code1.90发布,VS Code speech与AI结合太强了

爱别人不一定有回报 但爱自己一定不会吃亏 离你越远 我爱你越深 我不禁犹豫 我所喜欢的究竟是幸福 还是追求幸福的过程 前几天,微软发布了vscode最新版1.90,又给我们带来了几个脑洞大开的新特性。不得不感叹微软的大佬们是真的强。 下面来看看vscode1.90有哪些强大的新特…

Ezsql(buuctf加固题)

开启环境 SSH连接 第一个为页面地址WEB服务 or 11# 利用万能密码登录 密码可以随便输入或者不输入 这里就可以判断这个题目是让我们加固这个登录页面 防止sql注入 查看index.php 添加以下代码 $username addslashes($username); $password addslashes($password);…

【Linux系统编程】进程终止

目录 strerror函数 errno错误码 退出码 正常终止&#xff08;可以通过 echo $? 查看进程退出码&#xff09;&#xff1a; 1. 从main返回&#xff08;return&#xff09; 2. 调用exit 3. _exit&#xff08;一般尽量不要用&#xff09; 异常退出&#xff1a; ctrl c&am…

集合进阶(接口Collection(迭代器、增强for、Lambda表达式)、List中常见的方法和五种遍历方式、数据结构(栈、队列、数组、链表)

一、单列集合顶层Collection List系列集合&#xff1a;添加的元素是有序、可重复、有索引Set系列集合&#xff1a;添加的元素是无序、不重复、无索引 Collection是单列集合的祖宗接口&#xff0c;它的功能是全部单列集合都可以继承使用的。 Collection的遍历方式 1、迭代器——…

Linux电话本的编写-shell脚本编写

该电话本可以实现以下功能 1.添加用户 2.查询用户 3.删除用户 4.展示用户 5.退出 代码展示&#xff1a; #!/bin/bash PHONEBOOKphonebook.txt function add_contact() { echo "Adding new contact..." read -p "Enter name: " name …

c++_0基础_讲解2 头文件 基本框架

c头文件 C头文件是一种常见的文件类型&#xff0c;用于声明和定义类、函数、变量等元素。头文件通常以.h或.hpp作为扩展名&#xff0c;并包含在C源代码文件中以引入相关的声明和定义。 在C中&#xff0c;头文件的作用主要包括以下几个方面&#xff1a; 1. **声明类和函数**&a…

Python pickle反序列化

基础知识 Pickle Pickle在Python中是一个用于序列化&#xff08;将对象转换为字节流&#xff09;和反序列化&#xff08;将字节流转换回对象&#xff09;的标准库模块。它主要用于将Python对象保存到文件或通过网络进行传输&#xff0c;使得数据可以跨会话和不同的Python程序共…