title: "Vscode插件編寫詳細(xì)過(guò)程"
date: 2021-01-21T20:07:45+08:00
draft: true
tags: ['vscode']
author: "dadigang"
author_cn: "大地缸"
personal: "http://www.real007.cn"
關(guān)于作者
vscode編寫插件詳細(xì)過(guò)程
前言
之前編寫了一個(gè)vscode插件 用vscode寫博客和發(fā)布，然后有園友要求寫一篇來(lái)介紹如何開發(fā)一個(gè)vscode擴(kuò)展插件，或者說(shuō)介紹開發(fā)這個(gè)插件的過(guò)程。然而文章還沒(méi)有寫，園子里面已經(jīng)有人發(fā)布一個(gè)文章，是園友上位者的憐憫的 VSCODE 插件初探 介紹了自己開發(fā)的一個(gè)插件與如何簡(jiǎn)單的開發(fā)一個(gè)插件。雖然已經(jīng)有這么一個(gè)文章，但是我覺(jué)得還是可以更仔細(xì)的來(lái)介紹如何來(lái)開發(fā)一個(gè)vscode插件，也算之前說(shuō)好要寫這么一個(gè)文章的一個(gè)承諾吧，于是就有了還這么篇文章。
一、開發(fā)環(huán)境介紹與安裝
為了演示一個(gè)安裝環(huán)境，我安裝了一個(gè)干凈的win10系統(tǒng)來(lái)操作截圖。
1.首先我們需要安裝一個(gè)最基本的 Visual Studio Code，我們可以先到官網(wǎng)下載一最新版本的來(lái)進(jìn)行安裝，點(diǎn)擊上面的連接，進(jìn)去下載總是懂的吧。下載完后點(diǎn)擊安裝，然后一直下一步安裝就可以。
2.安裝完vscode后呢，我們就需要來(lái)看如何開發(fā)我們的自己的插件了，參考官方文檔 Your First Extension(Example - Hello World)。根據(jù)文檔我們得知我們需要安裝一個(gè) node.js,同樣的點(diǎn)擊前面的連接，到nodejs的中文網(wǎng)站下載一個(gè)安裝程序，下載完點(diǎn)擊安裝下一步就可以。
3.在安裝完上面兩個(gè)工具后，我們還需要一個(gè)生產(chǎn)插件代碼的東西，也就是 Yeoman 和 VS Code Extension generator.Yeoman的介紹不在本文章中，自己點(diǎn)擊上面的連接去了解。我們可以打開cmd來(lái)執(zhí)行下面的命令來(lái)安裝這兩個(gè)工具。 npm使用介紹
npm install -g yo generator-code
在完成上面的安裝后，可以通過(guò)輸入命令
yo code
來(lái)生成我們要的基本代碼。
在os系統(tǒng)上可以通過(guò)用上下鍵來(lái)選擇要?jiǎng)?chuàng)建哪種類型的項(xiàng)目，在win可以通過(guò)輸入1、2、3這樣的數(shù)字然后按回車來(lái)選擇。
二、生成基本代碼的講解與簡(jiǎn)單的修改
在幾個(gè)項(xiàng)目類型中，我們選擇了第一個(gè)TypeScript來(lái)作為我們編寫擴(kuò)展的語(yǔ)言，其他幾個(gè)項(xiàng)目類型這里不做介紹。
項(xiàng)目結(jié)構(gòu)介紹
我們創(chuàng)建的一個(gè)項(xiàng)目結(jié)構(gòu)如下：
選擇創(chuàng)建項(xiàng)目后有四個(gè)輸入和一個(gè)選擇
- 輸入你擴(kuò)展的名稱
- 輸入一個(gè)標(biāo)志（項(xiàng)目創(chuàng)建的文件名稱用這個(gè)）
- 輸入對(duì)這個(gè)擴(kuò)展的描述
- 輸入以后要發(fā)布用到的一名稱（和以后再發(fā)布時(shí)候有一個(gè)名字是對(duì)應(yīng)上的）
- 是問(wèn)你要不要?jiǎng)?chuàng)建一個(gè)git倉(cāng)庫(kù)用于版本管理
以上幾個(gè)輸入都會(huì)在package.json 這個(gè)文件里面有對(duì)應(yīng)的屬性來(lái)表示。輸入完之后就創(chuàng)建了如上圖的一個(gè)目錄結(jié)構(gòu)。這里不要臉的復(fù)制了一下別人的目錄說(shuō)明，由于我這個(gè)項(xiàng)目沒(méi)有讓生成git倉(cāng)庫(kù)，所以沒(méi)有.gitignore 這個(gè)文件。還有node_modules等其他多出來(lái)的目錄結(jié)構(gòu)是創(chuàng)建項(xiàng)目后運(yùn)行
npm install這個(gè)命令生成出來(lái)的。
.
├── .gitignore //配置不需要加入版本管理的文件
├── .vscode // VS Code的整合
│ ├── launch.json
│ ├── settings.json
│ └── tasks.json
├── .vscodeignore //配置不需要加入最終發(fā)布到拓展中的文件
├── README.md
├── src // 源文件
│ └── extension.ts // 如果我們使用js來(lái)開發(fā)拓展，則該文件的后綴為.js
├── test // test文件夾
│ ├── extension.test.ts // 如果我們使用js來(lái)開發(fā)拓展，則該文件的后綴為.js
│ └── index.ts // 如果我們使用js來(lái)開發(fā)拓展，則該文件的后綴為.js
├── node_modules
│ ├── vscode // vscode對(duì)typescript的語(yǔ)言支持。
│ └── typescript // TypeScript的編譯器
├── out // 編譯之后的輸出文件夾(只有TypeScript需要，JS無(wú)需)
│ ├── src
│ | ├── extension.js
│ | └── extension.js.map
│ └── test
│ ├── extension.test.js
│ ├── extension.test.js.map
│ ├── index.js
│ └── index.js.map
├── package.json // 該拓展的資源配置文件
├── tsconfig.json //
├── typings // 類型定義文件夾
│ ├── node.d.ts // 和Node.js關(guān)聯(lián)的類型定義
│ └── vscode-typings.d.ts // 和VS Code關(guān)聯(lián)的類型定義
└── vsc-extension-quickstart.md
運(yùn)行與簡(jiǎn)單修改
介紹完目錄結(jié)構(gòu)后，我們可以來(lái)運(yùn)行一下看看效果如果。我們打開一個(gè)vscode并把我們的sample目錄自己拖拉到vscode的界面上，然后選擇調(diào)試窗口，并點(diǎn)擊開始調(diào)試或者直接按快捷鍵 F5
項(xiàng)目運(yùn)行起來(lái)后，會(huì)調(diào)用一個(gè)新的vscode窗口在標(biāo)題欄的地方顯示一個(gè)[擴(kuò)展開發(fā)主機(jī)]的標(biāo)題，然后這個(gè)窗口是支持我們剛才運(yùn)行的插件項(xiàng)目的命令。
我們可以看到擴(kuò)展插件已經(jīng)正常的運(yùn)行了，接下來(lái)我們可以來(lái)簡(jiǎn)單修改一下代碼以實(shí)現(xiàn)不同的簡(jiǎn)單功能。在修改之前需要簡(jiǎn)單的認(rèn)識(shí)兩個(gè)文件
package.json
{
"name": "sample", //插件擴(kuò)展名稱（對(duì)應(yīng)創(chuàng)建項(xiàng)目時(shí)候的輸入）
"displayName": "sample",
"description": "blog sample", //插件擴(kuò)展的描述（對(duì)應(yīng)創(chuàng)建項(xiàng)目時(shí)候的輸入）
"version": "0.0.1",
"publisher": "caipeiyu", //發(fā)布時(shí)候的一個(gè)名稱（對(duì)應(yīng)創(chuàng)建項(xiàng)目時(shí)候的輸入）
"engines": {
"vscode": "^0.10.10"
},
"categories": [
"Other"
],
"activationEvents": [ //這是我們要理解的地方，是觸發(fā)插件執(zhí)行一些代碼的配置
"onCommand:extension.sayHello" //這種是通過(guò)輸入命令來(lái)觸發(fā)執(zhí)行的
],
"main": "./out/src/extension", //這個(gè)是配置TypeScript編譯成js的輸出目錄
"contributes": {
"commands": [{ //title 和 command是一個(gè)對(duì)應(yīng)關(guān)系的
"command": "extension.sayHello", //這個(gè)是對(duì)應(yīng)上面那個(gè)命令觸發(fā)的，在代碼里面也要用到
"title": "Hello World" //這個(gè)是我們?cè)趘scode里面輸入的命令
}]
},
"scripts": { //是在發(fā)布打包，或者其他運(yùn)行時(shí)候，要執(zhí)行的一些腳本命令
"vscode:prepublish": "node ./node_modules/vscode/bin/compile",
"compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
"devDependencies": { //這是開發(fā)的依賴包，如果有其他的依賴包，并要打包的話，需要把dev去掉
"typescript": "^1.8.5",
"vscode": "^0.11.0"
}
}
extension.ts
'use strict';
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// 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 "sample" 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', () => {
//只看這個(gè)地方'extension.sayHello'和 package.json 里面的 "onCommand:extension.sayHello" 是一個(gè)對(duì)應(yīng)關(guān)系
// 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);
}
// this method is called when your extension is deactivated
export function deactivate() {
}
這兩個(gè)文件是很重要的，基本整個(gè)插件編寫都是圍繞著這兩個(gè)文件來(lái)修改的，例如我們現(xiàn)在要增加多一個(gè)命令叫做 Hello Sample 那么我們先在 package.json 里面添加兩個(gè)配置
...
"activationEvents": [
"onCommand:extension.sayHello",
"onCommand:extension.saySample"
],
"contributes": {
"commands": [{
"command": "extension.sayHello",
"title": "Hello World"
},{
"command": "extension.saySample",
"title": "Hello Sample"
}]
},
...
添加完這兩個(gè)配置后，我們就需要在 extension.ts 里來(lái)注冊(cè)這個(gè)命令事件
let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
let saySample = vscode.commands.registerCommand('extension.saySample', () => {
vscode.window.showInformationMessage('This is a new sample command!');
});
context.subscriptions.push(saySample);
修改完代碼后，再次運(yùn)行效果如下圖
三、 打包與發(fā)布
我們編寫完一個(gè)插件，總不能要用的時(shí)候來(lái)運(yùn)行代碼然后來(lái)使用吧，而且要分享給別人也不方便啊。有個(gè)很low的辦法，就是拷貝項(xiàng)目到插件目錄，但是這不靠譜吧。所以我們需要一個(gè)打包工具叫 vsce 同樣的可以用npm來(lái)安裝，打開cmd執(zhí)行命令
npm install -g vsce
安裝完成后可以用命令窗口 cd 到你的項(xiàng)目目錄下去，然后執(zhí)行命令
vsce publish
來(lái)發(fā)布到marketplace.visualstudio.com上面去。發(fā)布成功后可以在vscode里面用 ext install 來(lái)按這個(gè)插件。這種做法我個(gè)人覺(jué)得特別的麻煩，還需要去配置一個(gè)token，然后這個(gè)token還的找個(gè)地方記住，還會(huì)過(guò)期，而且在發(fā)布過(guò)程中還得祈禱網(wǎng)絡(luò)好。所以這里不介紹，有興趣的自己看 這里。那么這里來(lái)介紹一個(gè)打包成 .vsix 的插件，而且這個(gè)插件也可以通過(guò) 這個(gè)頁(yè)面上傳分享。
cd到項(xiàng)目目錄下，然后執(zhí)行命令 vsce package 來(lái)打包一個(gè)
vsce package
Executing prepublish script 'node ./node_modules/vscode/bin/compile'...
Created: /sample/sample-0.0.1.vsix
我們可以看到執(zhí)行了這個(gè)命令后，再執(zhí)行一個(gè) script 'node ./node_modules/vscode/bin/compile' 這個(gè)命令是在 package.json里面有配置
"scripts": {
"vscode:prepublish": "node ./node_modules/vscode/bin/compile",
"compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
執(zhí)行完之后再創(chuàng)建了一個(gè)sample-0.0.1.vsix，這個(gè)就是我們打包好的插件安裝包了，只要把這個(gè)直接拖到vscode的窗口上，就會(huì)提示你安裝成功重啟vscode，我們重啟完之后就使用相關(guān)的命令。而且在插件的目錄下也多了對(duì)應(yīng)sample的目錄。
至于 上傳分享 就自行研究咯。
由于本人水平有限，知識(shí)有限，文章難免會(huì)有錯(cuò)誤，歡迎大家指正。如果有什么問(wèn)題也歡迎大家回復(fù)交流。要是你覺(jué)得本文還可以，那么點(diǎn)擊一下推薦。
