一、准备
VS code插件开发学习,可以参考官方文档
1、安装依赖
javascript
npm install -g yo generator-code
名称 | 描述 |
---|---|
yo | yo也就是Yeoman,Yeoman 是一个脚手架工具,帮助开发人员使用预定义的模板和生成器创建项目。它通过自动化重复任务来简化设置新项目的过程。 |
generator-code | VS Code 扩展设计的 Yeoman 生成器。它提供一组脚手架模板和工具,可快速创建适用于 VS Code 编辑器的新扩展,需要与yo配合使用 |
2、生成项目
javascript
yo code
javascript
? What type of extension do you want to create? New Extension (TypeScript)
// 这里我们先选择第一项,New Extension (TypeScript),进入下一步
? What's the name of your extension? HelloWorld
// 插件名称
? What's the identifier of your extension? hello-world
// 插件标识符(唯一id),这个是你后面发布上去后插件的名称,一般和上一步名称一样
? What's the description of your extension?
// 插件描述
? Initialize a git repository? Yes
// 是否初始化git,选择yes
? Bundle the source code with webpack? No
// 是否使用webpack构建你的项目,这里默认No
? Which package manager to use? yarn
// 选择包管理器,这里有npm和yarn两个选项,我一般用yarn
然后插件demo就生成了
├─ .eslintrc.json //ESLint 的配置文件
├─ .vscode //VS Code 编辑器的配置目录,包含有关工作区和项目的设置。
│ ├─ extensions.json //推荐的扩展列表和推荐的工作区扩展设置。
│ ├─ launch.json // 包含调试配置,用于在 VS Code 中调试扩展
│ ├─ settings.json //包含编辑器设置和工作区设置。
│ └─ tasks.json //包含任务配置,用于在 VS Code 中运行各种任务
├─ .vscodeignore //这是 VS Code 编辑器的忽略文件配置,类似于 .gitignore,但只在编辑器中生效。
├─ CHANGELOG.md //项目的变更日志文件,记录每个版本的变更内容和更新说明。
├─ README.md //项目的自述文件
├─ package.json
├─ src
│ ├─ extension.ts // //扩展的主要入口点文件
├─ tsconfig.json //TypeScript 的配置文件
├─ vsc-extension-quickstart.md //这是一个快速入门指南,可能是项目的起始文档,用于帮助新用户快速了解如何开始开发这个 VS Code 扩展
└─ yarn.lock
在开发时我们首先需要看vsc-extension-quickstart.md文件,该文件是一个快速入门指南,可能是项目的起始文档,用于帮助新用户快速了解如何开始开发这个 VS Code 扩展。
二、讲解extension.ts 、package.json 文件介绍
extension.ts、package.json这两个文件是Vs code扩展项目最主要的文件。extension.ts是扩展的主要逻辑,包括提供命令实现、注册webview等;package.json主要是注册命令、侧边栏菜单注册等
1、extension.ts
扩展的主要逻辑
javascript
import * as vscode from 'vscode';
//当扩展被激活时,会调用此方法,您的扩展在第一次执行命令时就被激活了,并且只会在激活时调用
export function activate(context: vscode.ExtensionContext) {
//1、helloWorld命令已在package.json文件中定义
//2、用registerCommand提供该命令的实现,commandId参数必须与package.json中的命令字段匹配
//3、注册的命令必须push到context.subscriptions
let disposable = vscode.commands.registerCommand('demoPlugin.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from helloWord!');
});
context.subscriptions.push(disposable);
}
//当扩展被停用时,会调用此方法
export function deactivate() {}
2、package.json
javascript
{
"name": "demoPlugin", //插件名称
"displayName": "helloWord",//插件市场显示的名称
"description": "simple",//插件描述
"version": "0.0.1",//插件版本
"publisher": "mr_cat", // 插件发布者
"engines": {
"vscode": "^1.80.0"//插件支持的最低版本
},
"categories": [
"Other"
],
//扩展的激活事件
"activationEvents": [],
"main": "./out/extension.js",//入口文件路径
//贡献点
"contributes": {
"commands": [ //对应命令列表
{
"command": "demoPlugin.helloWorld",
"title": "Hello World"
}
]
}
}
demo项目中package.json配置如果,这里补充下其他的配置选项
javascript
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
},
],
//定义插件在 Activity Bar(活动栏)中的视图容器。
"viewsContainers": {
//表示在 Activity Bar 中展示的容器列表。
"activitybar": [
{
"id": "todolist-container",//视图容器的唯一标识符
"title": "vsPlugin",//视图容器的名称
"icon": "media/logo.png"//视图容器的图标
}
]
},
//定义插件的 Webview 视图。
"views": {
// 表示 Webview 视图所属的容器,与 viewsContainers 中定义的 id 对应。
"todolist-container": [
{
"id": "todolist-view",//Webview 视图的唯一标识符
"name": "vsPlugin",// Webview 视图的名称
"icon": "media/logo.png",//Webview 视图在 Activity Bar 中显示的图标,指定图标的路径
"type": "webview",//Webview 视图的类型,这里是 "webview" 表示是一个 Webview 视图。
"contextualTitle": "vsPlugin"//Webview 视图在显示时的上下文标题。
}
]
},
//定义插件的键盘绑定(快捷键)。
"keybindings": [
{
"command": "extension.copyCommand",//绑定的命令标识符,与 commands 中定义的 command 对应,指定按下快捷键时要执行的命令。
"key": "ctrl+c",//在 Windows 系统上的替代快捷键
"mac": "cmd+c",//在 macOS 系统上的替代快捷键
"when": "editorTextFocus"//定义绑定生效的条件,这里是 "editorTextFocus" 表示只有在编辑器获得焦点时才生效
}
]
}
三、测试
打开项目按 F5 或启动调试,可以看到会出现一个扩展窗口,我们按下 command + shift + p 或者crtl + shift + p 在输入框中输入注册的命令即可调用插件中逻辑。
- 输入框输入注册命令
- 底部出现通知的弹框
四、打包
打包需要用到vsce
,先安装
- 安装依赖
javascript
npm install -g vsce
或者
npm install -g vsce
- 打包 生成vsix文件,然后打开Vs code开发工具,点击在插件市场右上角的三个点,最后一个选项
install from VSIX
,就可以本地安装了
javascript
vsce package
五、发布
VS Code的应用市场基于微软自己的Azure DevOps,插件的身份验证、托管和管理都是在这里。
要发布到应用市场首先得有应用市场的publisher账号;而要有发布账号首先得有Azure DevOps组织;而创建组织之前,首先得创建Azure账号;创建Azure账号首先得有Microsoft账号。
也就是说:一个Microsoft账号可以创建多个Azure组织;一个组织可以创建多个publisher账号;同时一个组织可以创建多个PAT(Personal Access Token,个人访问令牌) 具体步骤如下: (1)注册Microsoft帐号 (2)注册Azure账号 (3)注册创建发布者 (4)终端 vsce publish
或者使用vsce package
将扩展打包成可安装的 VSIX 格式,然后上传到Visual Studio Marketplace 发布者管理页面
详细请看官网,网上教程基本都是这,不如直接看官网:发布插件