刚好想写个插件方便在写代码时自由切换rgba和hex,于是尝试了一下vscode插件编写。
实际网上已有不少文章介绍如何编写插件了,不过貌似前一两个也没有关于我想写的插件的相关信息,于是还是多搜索了一把。
需求
首先,我的需求是插件能在编辑器上,当我选择文本时右键有转换的操作按键,可以点击触发将选中的内容进行识别,如果是rgba就换算成hex,如果是hex就换算成rgba
分解下来就是,需要利用插件提供的能力:
- 右键菜单
- 选中文本并替换文本
很简单的功能
步骤
搭建插件项目
按官方指引,是安装全局工具包
npm install -g yo generator-code
// 运行工具
yo code
然后工具就会进行一系列询问,类似npm init
的操作流程
配置与编码
因为是简单的实现,所以基本没有改变产出的文件布局
package.json : 配置
src/extension.ts : 实现入口
在配置上主要关注的是两个属性: main
contributes
main: 配置功能入口,主要是指向src/extension.ts最后产出的文件
contributes: 配置command和menu (实现右键菜单)
配置参考:见注释
"contributes": {
"commands": [
{
"command": "xxx.exchange",
"title": "菜单名~"
}
],
"menus": {
"editor/context":[
{ // 触发时机,当编辑器有选中文本时
"when": "editorHasSelection",
// 触发command
"command": "xxx.exchange",
// 菜单位置设定: https://code.visualstudio.com/api/references/contribution-points#Sorting-of-groups
"group": "1_modification"
}
]
}
编码实现:配置完command,就可以开始实现command,并注册
import * as vscode from 'vscode';
function textColorHandle(word: string) {
let result = word;
// 进行颜色值转换处理,并返回. 如果不是目标文本,原文返回
return result;
}
export function activate(context: vscode.ExtensionContext) {
// 注册command
let disposable = vscode.commands.registerCommand('xxx.exchange', () => {
// 获取编辑器对象
const editor = vscode.window.activeTextEditor;
if(editor) {
// 获取选中文本
const doc = editor.document;
const selection = editor.selection;
const word = doc.getText(selection);
editor.edit(eb => {
// 文本替换
eb.replace(selection, textColorHandle(word))
})
}
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}
虽然官方文档介绍挺全,但翻文档过程中却很难找到自己要的相关配置案例,比如怎么替换文本。后来是在官方的示例git里找到相关信息,才完成。
打包vsix
打包需要下载vsce
,遇到的问题是,当时自己的code版本是1.62.x,但是在安装的generate-code编写的插件只支持到1.66.x,于是要先升级一下code版本,不然插件用不了。
vsce package
体会:读文档找文档太干,插件示例更关键。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。