手把手教你如何写一个 vscode 扩展

清香的orange
2,144 阅读4分钟

前言

「掘金·启航计划」 vscode 是一款由微软开发且跨平台的免费源代码编辑器。它支持各种扩展【主题、插件等】功能，并且还内置了命令行工具，也是深受大众所喜爱。

作为一名前端人员，我们与 vscode 可谓是形影不离【大佬🧍‍♂️除外 】，对于其扩展想必也并不陌生。而这篇文章则就是让我们来了解如何开发定制 vscode extension，其相比于 vscode 官方文档 的教程，则是显的更加精简易懂，适用于所有感兴趣的人。

全局安装

全局安装 cli 工具包

npm install -g yo generator-code

项目初始化

yo code

依据提示选填对应信息，如下图所示：【具体含义见下方 package.json 文件内容说明】

image-20230620110657058.png

项目模板 package.json 文件说明，如下所示：

{
  	"name": "arvinjun-extensions", // 名称【模版命令中的 identifier】
    "displayName": "Arvinjun Extensions", // 显示的名称【模版命令中的 name】
    "description": "vscode extension", // 描述
    "version": "0.0.1", // 版本
    "publisher": "arvinjun", // 发布者
    "icon": "logo.png", // 插件 icon，不支持 svg，最小图片大小128*128
    "activationEvents": [ // 活动事件列表【哪些命令是激活的】
        "onCommand:arvinjun-extensions.helloWorld"
    ],
    "main": "./out/extension.js", // 主入口
    "contributes": {
        "commands": [ // 命令列表
            {
              	"command": "arvinjun-extensions.helloWorld", // 命令名，与 activationEvents 命令一致
                   "title": "Hello World" // 命令显示解释【命令面板中可搜索的命令名称】
            }
        ]
    },
  	...
}

了解 package.json 文件中各字段基本含义后，需要注意以下几点👇👇👇

  • vscode 版本需求，需与自身使用的 vscode 契合【我这边使用的是 1.73.0，故修改为最低 1.7.0】
  • 激活命令添加，需在活动时间列表 activationEvents 中添加激活命令
  • vscode 类型包同步，若修改 vscode 版本需保证安装的类型包 @type/vscode 同步并重新 pnpm i

image-20230620111347766.png

调试

【快捷键 F5 】点击 vscode 左侧调试菜单，然后运行 Run Extension 调试，此时会弹出一个新调试窗口用于调试

image-20230621213909917.png

快捷键 cmd + shift + p 唤起命令输入弹框，输入搜索注入的 Hello World 命令。如下图所示：

image-20230620140557249.png

点击 Hello World 命令激活后，如果在窗口底部右下角出现代码中的弹窗如下图。那么恭喜你！ 🎉🎉🎉

image-20230620140650862.png

当我们开发完扩展后，下面就是如何将它发布到 vscode 应用市场上了

发布

在发布之前首先你需要准备如下：

  • Microsoft 账号
  • Token 令牌
  • publisher 创建

Microsoft 账号

访问 Microsoft 登录 / 注册你的Microsoft账号，如图所示：

image-20230621113503248.png

成功登录后，访问 AzureDevOps，如果是首次访问会出现创建组织弹窗，点击继续即可，默认会创建一个以邮箱前缀为名的组织。之后那就是创建获取命令发布时所需的 Token 令牌了

Token 令牌

Token 创建访问路径 settings -> Personal access tokens -> New Token，如图所示：

image-20230620141943329.png

创建 Token 在填写信息时需注意如下几点，如下所示：

  • Organization 要选择 all accessible organizations，Scopes 要选择 Full access，否则后面发布插件会报 401 错误
  • 创建 Token 成功后，需 复制保存 下来，后面扩展发布登陆的时需要用到

image-20230620142116559.png

Publisher 创建

使用上面创建的 Microsoft 账号登陆 Manage Publishers ，登陆成功后进入 Publish extensions 创建发布者，如下图所示：

image-20230626143737934.png

创建发布者界面，如下图所示：

注意⚠️： 这里创建的 publisher 需与后面 package.json 文件内需添加的 publisher 字段值相同

image-20230620141324915.png

发布到 vscode 应用市场

安装

安装 vsce 【vsce 已废弃，新包 @vscode/vsce】

npm i -g @vscode/vsce
登陆

vsce 登陆

  • publisher 名称 【前面创建到 publisher 名称】
  • Token 令牌【前面创建到 Token 令牌】
vsce login [publisher name]

image-20230620162933314.png

发布

发布之前需注意的问题【下面附有对应问题的解决方案】：

  • 如果使用 pnpm 构建的模版，发布时会有问题
  • README 文件不能使用模版默认格式内容
  • package.json 中需添加 publisher 字段

发布命令：

vsce publish [version: x.x.x]

image-20230620165738030.png

解决方案
  • pnpm 包管理

image-20230620163334415.png

解决方案：使用 npm 同时进行管理，使用如下命令，生成 package-lock.json 文件。 isssues

npm upgrade
  • README 文件

image-20230620163727116.png

解决方案：更改说明文件 README 内容，不使用默认模版文件内容

  • publisher 字段

image-20230620165055354.png

解决方案：在 package.json 中添加 publisher 字段【publisher 需要前面创建的名称保持一致】，如下图所示：

image-20230621143914725.png

发布成功

发布成功后在 vscode 应用商店中搜索项目 package.json 中 displayName 字段值，如下图所示：

image-20230620165928763.png

安装扩展，检验功能是否 OK！

总结

  • 全局安装 yo generator-code 工具包并初始化项目模版
  • 项目中主要文件 extension.ts 和 package.json
  • 登陆 / 注册 Microsoft 账号，访问 AzureDevOps 建立组织，新建 Token 用于发布时命令登陆
  • 通过 Microsoft 账号登陆 Manage Publishers 创建 publisher
  • 通过 vsce login 命令使用 publisher 和 Token 登陆，vsce publish 发布 extension
avatar
文章
阅读
粉丝