VS Code插件開發(fā)介紹（一）

thursday 發(fā)布于2019-08-23 12:17 / 2606人閱讀

摘要：發(fā)布插件插件開發(fā)完后就可以發(fā)布了，需要安裝安裝完后，需要去注冊并生成一個(gè)?？偨Y(jié)本文介紹了插件開發(fā)的基本流程，實(shí)現(xiàn)了一個(gè)簡單的插件。更多的開發(fā)技巧，可以看這個(gè)系列的第二篇插件開發(fā)介紹二

前言

前段時(shí)間做了一個(gè)基于命令行的效率工具，可以自動(dòng)生成組件的模板代碼。自己用起來還覺得挺好，但在組內(nèi)案例幾次后大家都不愿意用，究其原因還是命令行工具使用起來門檻有點(diǎn)高，不方便。由于組內(nèi)已經(jīng)統(tǒng)一使用VS Code進(jìn)行開發(fā)了，于是決定研究下VS Code的插件開發(fā)，讓效率工具更方便的用起來。

準(zhǔn)備工作

為了降低開發(fā)門檻，微軟做了一個(gè)Yeoman代碼生成命令，可以很方便的生成插件開發(fā)需要的模板代碼，可以通過以下命令安裝：

// 安裝
npm install -g yo generator-code

// 使用
yo code

運(yùn)行完以上命令后會(huì)出現(xiàn)下面的操作界面，填入需要的信息即可。

運(yùn)行示例代碼

代碼生成后，可以按F5開始調(diào)試插件，此時(shí)VS Code會(huì)新建一個(gè)實(shí)例并進(jìn)入插件開發(fā)模式，開發(fā)中的插件可以在這個(gè)新的實(shí)例中使用。模版代碼會(huì)生成一個(gè)名為Hello World的命令，按下??P調(diào)出命令輸入窗口，然后輸入"Hello World"運(yùn)行命令。如果找不到命令，重啟下VS Code再重新運(yùn)行。

修改代碼

插件的入口代碼在extension.js這個(gè)文件中，主要是修改activate函數(shù)：

export function activate(context) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log("Congratulations, your extension "my-first-extension" is now active!");

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand("extension.sayHello", () => {
        // The code you place here will be executed every time your command is executed

        // Display a message box to the user
        vscode.window.showInformationMessage("Hello World!");
    });

    context.subscriptions.push(disposable);
}

我插件的功能是用戶通過右鍵點(diǎn)擊導(dǎo)航欄，獲取選中文件夾的絕對路徑，然后提示用戶輸入新組件的名字，然后自動(dòng)幫用戶生成組件的模板代碼。

開發(fā)的關(guān)鍵點(diǎn)是如何獲取文件夾絕對路徑和獲取用戶輸入的組件名。尤其是獲取路徑，找了很久才找到，官網(wǎng)的文檔只字未提。先看代碼：

function activate(context) {
    console.log("Congratulations, your extension "react-template" is now active!");

    // 注冊一個(gè)名為createFunctionalComponent的命令
    const fc = vscode.commands.registerCommand("extension.createFunctionalComponent", function (param) {
        // 文件夾絕對路徑
        const folderPath = param.fsPath;

        const options = {
            prompt: "請輸入組件名: ",
            placeHolder: "組件名"
        }
        
        // 調(diào)出系統(tǒng)輸入框獲取組件名
        vscode.window.showInputBox(options).then(value => {
            if (!value) return;

            const componentName = value;
            const fullPath = `${folderPath}/${componentName}`;

            // 生成模板代碼，不是本文的重點(diǎn)，先忽略
            generateComponent(componentName, fullPath, ComponentType.FUNCTIONAL_COMP);
        });
    });
    
    context.subscriptions.push(pc);
}

代碼很簡單，就不做講解了。為了顯示Create Functional Component這個(gè)菜單項(xiàng)，我們需要修改package.json文件的contributes字段。activationEvents字段也要相應(yīng)的改下。同時(shí)為了給插件配一個(gè)圖標(biāo)，要加一個(gè)icon字段：

    "icon": "images/icon.png",
    "activationEvents": [
        "onCommand:extension.createFunctionalComponent"
    ],
    "contributes": {
        "commands": [
            {
                "command": "extension.createFunctionalComponent",
                "title": "Create Functional Component"
            }
        ],
        "menus": {
            "explorer/context": [
                {
                    "command": "extension.createFunctionalComponent",
                    "group": "1_modification"
                }
            ]
        }
    },

詳細(xì)的contributes配置可以看這里。配置好menus之后，registerCommand的第二個(gè)函數(shù)參數(shù)就能取到文件或文件夾的絕對路徑了。

發(fā)布插件

插件開發(fā)完后就可以發(fā)布了，需要安裝vsce

npm install -g vsce

安裝完后，需要去Azure DevOps注冊并生成一個(gè)access token。詳細(xì)的流程可以看這里。生成toke的時(shí)候有兩個(gè)地方需要注意下：

token生成后就可以登錄和發(fā)布了。如果有任何的修改，要注意修改package.json里面版本號才能發(fā)布成功。發(fā)布成功后，很快就能在VS Code的插件市場搜到了。

總結(jié)

本文介紹了VS Code插件開發(fā)的基本流程，實(shí)現(xiàn)了一個(gè)簡單的插件。本文只涉及到VS Code插件系統(tǒng)的冰山一角，更多的高級功能以后接觸到的時(shí)候再作介紹。如果想再作進(jìn)一步的了解，可以從這里開始。更多的 VS Code 開發(fā)技巧，可以看這個(gè)系列的第二篇：VS Code插件開發(fā)介紹（二）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98260.html

發(fā)表評論

登陸后可評論

0條評論

thursday

男|高級講師

我要關(guān)注我要私信

TA的文章

如何選購虛擬主機(jī)-如何購買虛擬主機(jī)？需要注意什么？

閱讀 2074·2021-09-22 15:43
主機(jī)號為什么不能全0-全0和全1有什么區(qū)別？

閱讀 8748·2021-09-22 15:07
16屆智能車總屆

閱讀 1088·2021-09-03 10:28
重要變化：.com域名漲價(jià)

閱讀 2063·2021-08-19 10:57
新一代“快杰”云主機(jī)：計(jì)算、網(wǎng)絡(luò)、存儲(chǔ) 唯快不破

閱讀 1077·2020-01-08 12:18
基于Vue實(shí)現(xiàn)拖拽效果

閱讀 2983·2019-08-29 15:09
如何用 CSS 網(wǎng)格快速做出網(wǎng)站原型

閱讀 1535·2019-08-29 14:05
使用 flex 實(shí)現(xiàn) 5 種常用布局

閱讀 1647·2019-08-29 13:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

VS Code插件開發(fā)介紹（一）

相關(guān)文章

**# vs code Settings Sync 插件的詳細(xì)介紹**

**VS Code插件開發(fā)介紹（二）**

**為什么我選擇使用 VS Code進(jìn)行前端開發(fā)?**

**VS Code上手與超實(shí)用插件安利**

**VS Code插件開發(fā)指南(view-readme)**

發(fā)表評論

0條評論

thursday

男|高級講師

TA的文章

如何選購虛擬主機(jī)-如何購買虛擬主機(jī)？需要注意什么？

主機(jī)號為什么不能全0-全0和全1有什么區(qū)別？

16屆智能車總屆

重要變化：.com域名漲價(jià)

新一代“快杰”云主機(jī)：計(jì)算、網(wǎng)絡(luò)、存儲(chǔ) 唯快不破

基于Vue實(shí)現(xiàn)拖拽效果

如何用 CSS 網(wǎng)格快速做出網(wǎng)站原型

使用 flex 實(shí)現(xiàn) 5 種常用布局

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

VS Code插件開發(fā)介紹（一）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！