前言
「掘金·启航计划」 vscode 是一款由微软开发且跨平台的免费源代码编辑器。它支持各种扩展【主题、插件等】功能，并且还内置了命令行工具，也是深受大众所喜爱。
作为一名前端人员，我们与 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 文件中各字段基本含义后，需要注意以下几点???
vscode版本需求，需与自身使用的vscode契合【我这边使用的是1.73.0，故修改为最低1.7.0】- 激活命令添加，需在活动时间列表
activationEvents中添加激活命令 vscode类型包同步，若修改vscode版本需保证安装的类型包@type/vscode同步并重新pnpm i
调试
【快捷键 F5 】点击 vscode 左侧调试菜单，然后运行 Run Extension 调试，此时会弹出一个新调试窗口用于调试
快捷键 cmd + shift + p 唤起命令输入弹框，输入搜索注入的 Hello World 命令。如下图所示：
点击 Hello World 命令激活后，如果在窗口底部右下角出现代码中的弹窗如下图。那么恭喜你！ ???
当我们开发完扩展后，下面就是如何将它发布到 vscode 应用市场上了
发布
在发布之前首先你需要准备如下：
Microsoft账号Token令牌publisher创建
Microsoft 账号
访问 Microsoft 登录 / 注册你的Microsoft账号，如图所示：
成功登录后，访问 AzureDevOps，如果是首次访问会出现创建组织弹窗，点击继续即可，默认会创建一个以邮箱前缀为名的组织。之后那就是创建获取命令发布时所需的 Token 令牌了
Token 令牌
Token 创建访问路径 settings -> Personal access tokens -> New Token，如图所示：
创建 Token 在填写信息时需注意如下几点，如下所示：
Organization要选择all accessible organizations，Scopes要选择Full access，否则后面发布插件会报401错误- 创建
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
README文件
解决方案：更改说明文件 README 内容，不使用默认模版文件内容
publisher字段
解决方案：在 package.json 中添加 publisher 字段【publisher 需要前面创建的名称保持一致】，如下图所示：
发布成功
发布成功后在 vscode 应用商店中搜索项目 package.json 中 displayName 字段值，如下图所示：
安装扩展，检验功能是否 OK！
总结
- 全局安装
yo generator-code工具包并初始化项目模版 - 项目中主要文件
extension.ts和package.json - 登陆 / 注册 Microsoft 账号，访问 AzureDevOps 建立组织，新建
Token用于发布时命令登陆 - 通过
Microsoft账号登陆 Manage Publishers 创建publisher - 通过
vsce login命令使用publisher和Token登陆，vsce publish发布extension
