关于javascript: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…