vscode外掛編寫體驗-右鍵選單

Dont發表於2022-04-08
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...

相關文章