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

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

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

前言

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

準備工作

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

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

// 使用
yo code

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

運行示例代碼

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

修改代碼

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

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);
}

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

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

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

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

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

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

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

代碼很簡單，就不做講解了。為了顯示Create Functional Component這個菜單項，我們需要修改package.json文件的contributes字段。activationEvents字段也要相應的改下。同時為了給插件配一個圖標，要加一個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"
                }
            ]
        }
    },

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

發(fā)布插件

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

npm install -g vsce

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

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

總結

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98260.html

# vs code Settings Sync 插件的詳細介紹

摘要：插件的詳細介紹由于越來越卡，有時敲一個回車都要一秒，實在是受不了，繼而轉向，用了一段時間發(fā)現(xiàn)在前端開發(fā)并不比差，而且又是微軟開發(fā)，感覺很有前途，最重要的是，打開速度非常快，即使打開大文件，也不會卡。 vs code Settings Sync 插件的詳細介紹由于webstorm越來越卡，有時敲一個回車都要一秒，實在是受不了，繼而轉向vs code，用了一段時間發(fā)現(xiàn)vs code在前端...

Me_Kun 2019-08-21 17:41 評論0 收藏0
VS Code插件開發(fā)介紹（二）

摘要：一前言在上一篇文章里，我簡要介紹了插件開發(fā)的基本流程，同時講解了如何獲取文件夾絕對路徑和用戶輸入的方法。了一圈，發(fā)現(xiàn)介紹這方面的文章很少，特此記錄一下，希望對有類似需求的人有一些幫助。一、前言在上一篇文章里，我簡要介紹了 VSCode 插件開發(fā)的基本流程，同時講解了如何獲取文件夾絕對路徑和用戶輸入的方法。最近又開發(fā)了一個新的插件，主要用途是替換當前編輯文件的內容。google 了一...

muddyway 2019-08-23 14:21 評論0 收藏0
為什么我選擇使用 VS Code進行前端開發(fā)?

摘要：我們團隊有大部分人已經在用了，所以這周五在組內做了一個小分享，來發(fā)掘一些提高開發(fā)效率的小技巧。為什么選擇在剛出來的時候，我就開始使用了如何評價理由很簡單開源，免費，顏值高微軟出品，實力保證。 showImg(https://segmentfault.com/img/remote/1460000010750652); 沒錯，我就是來給大家安利 VS Code 的。對前端來說，這是一款性...

liaosilzu2007 2019-08-21 12:01 評論0 收藏0
VS Code上手與超實用插件安利

摘要：軟件跨平臺支持以及，運行流暢，可謂是微軟的良心之作微軟有這個宇宙最強，自然也不會弱宇宙最強編輯器說到代碼編輯器，我們有必要提一提還有。原文鏈接：VS Code上手與超實用插件安利工欲善其事必先利其器 Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號...

miracledan 2019-08-21 17:46 評論0 收藏0
VS Code插件開發(fā)指南(view-readme)

摘要：本次給大家?guī)淼姆窒硎顷P于插件的一些經驗，分享的內容是我寫的一個插件。為了解決上面這個問題，我開發(fā)了這個插件。本次給大家?guī)淼姆窒硎顷P于VS Code插件的一些經驗，分享的內容是我寫的一個插件：view-readme。開發(fā)背景在本地安裝好所有npm包后，有的時候想看看某個模塊的文檔，了解其特性以及如何使用。于是打開node_modules文件夾，大家都知道，這個文件夾里面的文件是...

yy736044583 2019-08-21 15:32 評論0 收藏0