vscode plugin writing experience - right-click menu

I just wanted to write a plug-in to switch rgba and hex freely when writing code, so I tried to write a vscode plug-in.

In fact, there are many articles on the Internet about how to write plug-ins, but it seems that there is no relevant information about the plug-in I want to write in the first one or two, so I searched more.

need

First of all, my requirement is that the plug-in can be on the editor. When I select the text, the right button has a conversion operation button. I can click the trigger to identify the selected content. If it is rgba, it will be converted into hex, and if it is hex, it will be converted into rgba

The breakdown is that you need to take advantage of the capabilities provided by the plugin:

1. right-click menu
2. Select text and replace text

very simple function

step

Build a plugin project

According to the official guidelines, it is to install the global toolkit

npm install -g yo generator-code
// run the tool
yo code

Then the tool will make a series of queries, similar to the operation process of npm init

configuration and coding

Because it is a simple implementation, there is basically no change to the output file layout

package.json : configuration

src/extension.ts : implementation entry

The main focus on configuration are two properties: main contributes

main: Configuration function entry, mainly pointing to the last output file of src/extension.ts

contributes: configure command and menu (implement right-click menu)

Configuration reference: see note

     "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"
                     }
             ]
 }

Coding implementation: After configuring the command, you can start to implement the command and register it

 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() {}

Although the official documentation is quite comprehensive, it is difficult to find the relevant configuration cases you want during the process of flipping through the documentation, such as how to replace text. Later, the relevant information was found in the official example git, and it was completed.

Official plugin example

package vsix

The package needs to be downloaded vsce . The problem encountered is that at that time, the code version of my own was 1.62.x, but the plugin written in the generated generate-code only supports 1.66.x, so I need to upgrade the code first. version, otherwise the plugin will not work.

vsce package

Experience: It is too much to read the documentation to find the documentation, and the plug-in example is more critical.

Reference: https://segmentfault.com/a/1190000040720760