vscode插件编写体验-右键菜单

刚好想写个插件方便在写代码时自由切换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...