3

刚好想写个插件方便在写代码时自由切换rgba和hex,于是尝试了一下vscode插件编写。

实际网上已有不少文章介绍如何编写插件了,不过貌似前一两个也没有关于我想写的插件的相关信息,于是还是多搜索了一把。

需求

首先,我的需求是插件能在编辑器上,当我选择文本时右键有转换的操作按键,可以点击触发将选中的内容进行识别,如果是rgba就换算成hex,如果是hex就换算成rgba

分解下来就是,需要利用插件提供的能力:

  1. 右键菜单
  2. 选中文本并替换文本

很简单的功能

步骤

搭建插件项目

按官方指引,是安装全局工具包

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

体会:读文档找文档太干,插件示例更关键。

参考资料:https://segmentfault.com/a/11...


Dont
7k 声望144 粉丝

学如逆水行舟不进则退