VSCode插件 - “躺平” 开发和发布
开发插件
插件开发知识
VSCode插件开发需要前端开发的基础知识,包括但不限于Javascript(必须)、HTML和CSS(非必须)。
随着插件开发工具的版本提升,提供了对TS语法的支持,这个”躺平“插件就是采用TS开发的。
另外还需要一些Webpack方面的知识,不过不需要自己调整和优化配置,只需要根据官方教程设置即可。当然,如果后续涉及到复杂的开发工作,具备相关知识的jym也可以对工程进行优化。
VS Code 插件开发文档 - 中文 VS Code 插件开发文档 - 英文
由于我的”躺平“插件是一个已经具备完备功能的插件了,所以我就不把官方教程复制一遍了,而是跟着开发思路一步一步走下来。这样既可以贴近官方教程,又有一些脱离官方文档的内容和思考。不过由于时间有限,我只能提供思路,具体的代码请查看我的开源代码库。
创建插件工程
首先需要安装好Node和Git,不写具体步骤了,直接三、二、一,上链接:
还有,需要安装VSCode。倒不是非得让你使用VSCode进行开发工作,但是你开发VSCode插件,不安装VSCode,就很......你懂得。
OK,万事俱备,正式开始。
首先打开终端,执行以下命令:
npm install -g yo generator-code
上面的命令作用是安装Yeoman和VS Code Extension Generator,这是VSCode官方提供的脚手架开发项目工具。
然后执行 yo code
,按提示输入项目信息
? What type of extension do you want to create? (Use arrow keys)
New Extension (TypeScript)
? What's the name of your extension?
lying
? What's the identifier of your extension?
lying
? What's the description of your extension?
遇事不决,躺平一下
?Initialize a git repository?
Yes
? Bundle the source code with webpack?
Yes
? Which package manager to use?
yarn
第一步选择Typescript是因为我平时使用的是TS,jym也可以选择New Extension (JavaScript),最后一步包管理工具选择npm、yarn、pnpm都可以。如果你选择yarn或pnpm,请确保你本地已经安装了对应的包管理工具。
填写完上面的配置信息后,lying 项目会被创建并开始构建过程。
构建完成后,执行 code ./lying
code命令会打开VSCode,并加载命令后面传入的项目目录。
因为创建的项目根目录是当前目录下的lying目录,所以需要使用 ./lying
,这一点需要注意。
VSCode打开项目后,按下F5,你会立即看到一个 插件发开主机 窗口,其中就运行着插件。
在命令面板 Ctrl+Shift+P
中输入 lying
命令即可看到 Hello World
提示弹窗。
上面这部分如果出现问题或者有疑问,请移步 VS Code 插件开发中文文档 仔细查阅教程,再次尝试。
配置插件信息
我们已经把”躺平“插件的项目创建并运行成功,现在开始配置插件信息。
插件项目的配置信息在package.json中,我直接po出来关键内容(只记录增加和修改的内容)。
{
"name": "lying", // 插件名称,英文
"displayName": "躺平", // 插件商店展示的插件名称
"description": "遇事不决,躺平一下 ~ ", // 项目描述,会展示在VSCode插件商店的插件描述位置
"version": "0.1.4", // 没错,已经是0.1.4版本了
"icon": "lying.png", // 插件图标,不配置的话在插件商店展示灰色占位图标
"LICENSE": "MIT", // 开源协议
"repository": {
"type": "git",
"url": "https://github.com/EvenZhu/lying.git"
},
"publisher": "EvenZhu", // 必须和创建的publisher保持一致
"categories": [
"Other"
],
"main": "./dist/extension.js", // 这里指定的路径是使用webpack打包编译后的路径
"contributes": {
"commands": [ // 配置命令列表,配置此项,用户才可以在命令面板查询并执行该命令
{
"command": "evenzhu.lying", // 命令包含两部分,第一部分是标识符,第二部分是命令名称
"title": "躺平"
}
],
"keybindings": [ // 为命令绑定快捷键
{
"command": "evenzhu.lying",
"title": "躺平",
"key": "shift+alt+ctrl+l",
"mac": "shift+alt+cmd+l",
"when": "true" // 代表在VSCode中任何情况下都可以通过快捷键唤起evenzhu.lying命令
}
]
},
"scripts": {
// 增加了下面这条指令,为了方便发布插件,后面的Access token是发布前在Azure DevOps创建的
"vp": "vsce publish -p Access token"
},
"devDependencies": {
...官方配置,不需要任何调整
},
"dependencies": {
"dayjs": "^1.11.10" // 为了计算和格式化时间
}
}
命令开发
根据package.json中的配置 "main": "./dist/extension.js"
可以看出,入口文件应该是src下的。extension.ts。
插件入口文件会导出两个函数,activate
和 deactivate
,你注册的 激活事件 被触发之时执行 activate
,deactivate
则提供了插件关闭前执行清理工作的机会。
接下来,在代码中出现的ExtensionContext、window、commands、workspace等,都是从'vscode'库中导入的。
插件入口代码
// src/extension.ts
import {
ExtensionContext,
window,
commands,
workspace
} from 'vscode';
import command, { finished, lyingAlert } from './command';
export function activate(context: ExtensionContext) {
// 注册evenzhu.lying命令
context.subscriptions.push(commands.registerCommand('evenzhu.lying', command));
/**
* 监听编辑器焦点变化和输入事件
* 为了让你实现真正意义上的躺平,真是操碎了心
*/
context.subscriptions.push(window.onDidChangeActiveTextEditor(event => {
lyingAlert(event);
}));
context.subscriptions.push(workspace.onDidChangeTextDocument((event) => {
lyingAlert(event);
}));
}
export function deactivate() {
finished(); // 停止“躺平”插件插件的执行逻辑
}
命令执行逻辑
快捷键或者命令激活并触发“躺平”插件后,执行逻辑如下:
弹出输入框,选择立即躺平 or 番茄钟
- 使用QuickPick实现选择功能
// src/command.ts
const options: { [key: string]: (context: ExtensionContext) => Promise<string | void> } = {
立即躺平: showInputBox,
番茄钟: (context: ExtensionContext) => multiStepInput(context, (workTime: number, lyingTime: number, repeatCount: number) => {
mode = 1;
repeat = --repeatCount;
doProgress(false, workHandler, workTime, lyingTime);
})
};
const quickPick = window.createQuickPick();
quickPick.items = Object.keys(options).map(label => ({ label }));
quickPick.onDidChangeSelection(selection => {
if (selection[0]) {
options[selection[0].label](context)
.then((text) => {
if (selection[0].label === '立即躺平') {
mode = 0;
doProgress(true, lyingHandler, 0, Number.parseInt(text ?? '1'));
}
})
.catch(console.error);
}
});
quickPick.onDidHide(() => quickPick.dispose());
quickPick.show();
OK,逻辑梳理完毕,相关的API和使用到插件功能也已经列出来了,具体逻辑请结合源码理解,如有问题可以评论区留言。 ”躺平“插件Github代码仓库
发布插件
发布插件的教程官方已经整理出来了 发布插件教程
我今天只把关键的步骤写出来,如有疑问欢迎留言或者去官网查看详细资料。
创建组织
安装vsce
终端执行命令 npm install -g vsce
创建Access token
打开 dev.azure.com/vscode 进入安全(Security)页面。
举例:我创建的组织(evenzhu)安全页面地址 dev.azure.com/evenzhu/_us…
选择Personal Access Token,点击New Token创建一个新的 Personal Access Token
创建发行方(publisher) - 在插件商店的发布人名称
补充信息
一定要在package.json中配置
- icon - 插件图标
- publisher - 创建的publisher名称
完成 README.md
和 CHANGELOG.md
- README.md - 插件介绍、使用方法,宣传图文等
- CHANGELOG.md - 会展示在插件商店的更改日志中
发布插件
在终端的项目根目录下执行命令 vsce publish -p <token>
进行发布
确认发布结果
- 查看VSCode插件商店上插件是否已经发布成功
- 插件的名称、版本、描述和其他信息是否显示正确
The end!
总结
- 累,真累
- 累,是因为
- 两天的时间完成了VSCode插件开知识学习和插件开发
- 以及发布、迭代和BUG修复
- 又在这个过程中发布了插件创意思路和开发、发布过程
- 值,真值
- 值,是因为这个过程中学会了很多
- VSCode插件开发技术
- 插件运行的基本原理
- 对产品设计的思考
- 尝试理解用户思维
- 推广营销的重要性
- 也发现了自身的不足和增长点
- 写作过程中发现很多知识想要说清楚太难了,必须有取舍
- 很多知识在应用时还需要查阅文档和资料,说明并未烂熟于心
- 时间安排过紧,文章的结构和内容无法进行有效的沉淀和优化
- 希望这样热血的阶段,不是昙花一现,要持之以恒
PS:如果有需要补充的内容,请在评论区留言
转载自:https://juejin.cn/post/7303847314895552524