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

npm install -g yo generator-code

项目初始化

yo code

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

项目模板 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 文件中各字段基本含义后，需要注意以下几点👇👇👇
1.vscode 版本需求，需与自身使用的 vscode 契合【我这边使用的是 1.73.0，故修改为最低 1.7.0】
2.激活命令添加，需在活动时间列表 activationEvents 中添加激活命令
3.vscode 类型包同步，若修改 vscode 版本需保证安装的类型包 @type/vscode 同步并重新 pnpm i

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

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

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

当我们开发完扩展后，下面就是如何将它发布到 vscode 应用市场上了
发布
在发布之前首先你需要准备如下：
1. Microsoft 账号
2. Token 令牌
3. publisher 创建

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

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

创建 Token 在填写信息时需注意如下几点，如下所示：
1. Organization 要选择 all accessible organizations，Scopes 要选择 Full access，否则后面发布插件会报 401 错误
2. 创建 Token 成功后，需 复制保存 下来，后面扩展发布登陆的时需要用到

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

创建发布者界面，如下图所示：
注意⚠️： 这里创建的  publisher 需与后面  package.json 文件内需添加的 publisher 字段值相同

发布到 vscode 应用市场
安装
安装 vsce 【vsce 已废弃，新包 @vscode/vsce】

npm i -g @vscode/vsce

登陆
vsce 登陆
  .publisher 名称 【前面创建到 publisher 名称】
  .Token 令牌【前面创建到 Token 令牌】

vsce login [publisher name]

发布
发布之前需注意的问题【下面附有对应问题的解决方案】：
.如果使用 pnpm 构建的模版，发布时会有问题
.README 文件不能使用模版默认格式内容
.package.json 中需添加 publisher 字段

发布命令：

vsce publish [version: x.x.x]

解决方案
.pnpm 包管理

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

npm upgrade

1.README 文件

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

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

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

安装扩展，检验功能是否 OK！
总结
1.全局安装 yo generator-code 工具包并初始化项目模版
2.项目中主要文件 extension.ts 和 package.json
3.登陆 / 注册 Microsoft 账号，访问 AzureDevOps 建立组织，新建 Token 用于发布时命令登陆
4.通过 Microsoft 账号登陆 Manage Publishers 创建 publisher
5.通过 vsce login 命令使用 publisher 和 Token 登陆，vsce publish 发布 extension