刚好想写个插件不便在写代码时自在切换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 deactivatedexport function deactivate() {}

尽管官网文档介绍挺全，但翻文档过程中却很难找到本人要的相干配置案例，比方怎么替换文本。起初是在官网的示例git里找到相干信息，才实现。

官网插件示例

打包vsix

打包须要下载vsce，遇到的问题是，过后本人的code版本是1.62.x，然而在装置的generate-code编写的插件只反对到1.66.x，于是要先降级一下code版本，不然插件用不了。

vsce package

领会：读文档找文档太干，插件示例更要害。

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