前言
前段時間做了一個基於命令行的效率工具,可以自動生成組件的模板代碼。自己用起來還覺得挺好,但在組內案例幾次後大家都不願意用,究其原因還是命令行工具使用起來門檻有點高,不方便。由於組內已經統一使用VS Code進行開發了,於是決定研究下VS Code的插件開發,讓效率工具更方便的用起來。
準備工作
爲了降低開發門檻,微軟做了一個Yeoman
代碼生成命令,可以很方便的生成插件開發需要的模板代碼,可以通過以下命令安裝:
// 安裝
npm install -g yo generator-code
// 使用
yo code
運行完以上命令後會出現下面的操作界面,填入需要的信息即可。
運行示例代碼
代碼生成後,可以按F5
開始調試插件,此時VS Code會新建一個實例並進入插件開發模式,開發中的插件可以在這個新的實例中使用。模版代碼會生成一個名爲Hello World
的命令,按下⇧⌘P調出命令輸入窗口,然後輸入'Hello World'運行命令。如果找不到命令,重啓下VS Code再重新運行。
修改代碼
插件的入口代碼在extension.js
這個文件中,主要是修改avtivate
函數:
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);
}
我插件的功能是用戶通過右鍵點擊導航欄,獲取選中文件夾的絕對路徑,然後提示用戶輸入新組件的名字,然後自動幫用戶生成組件的模板代碼。
開發的關鍵點是如何獲取文件夾絕對路徑和獲取用戶輸入的組件名。尤其是獲取路徑,找了很久才找到,官網的文檔隻字未提。先看代碼:
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: "組件名"
}
// 調出系統輸入框獲取組件名
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
的第二個函數參數就能取到文件或文件夾的絕對路徑了。
發佈插件
插件開發完後就可以發佈了,需要安裝vsce
npm install -g vsce
安裝完後,需要去Azure DevOps註冊並生成一個access token。詳細的流程可以看這裏。生成toke的時候有兩個地方需要注意下:
token生成後就可以登錄和發佈了。如果有任何的修改,要注意修改package.json
裏面版本號才能發佈成功。發佈成功後,很快就能在VS Code的插件市場搜到了。
總結
本文介紹了VS Code插件開發的基本流程,實現了一個簡單的插件。本文只涉及到VS Code插件系統的冰山一角,更多的高級功能以後接觸到的時候再作介紹。如果想再作進一步的瞭解,可以從這裏開始。