VSCODE插件初體驗

前言

使用vscode也有大半年時間了，從一開始的各種問題到現在漸漸好用。插件維護比sublime好，速度能秒atom，這大概就是現在離不開vscode的原因吧。雖然它還有不少問題，比如代碼高亮和智能提示，尤其是在vue這種template文件中，完全沒有用！

不過今天不是來吐槽這個的。雖然說到vscode的插件比sublime維護方便，但是插件數量還是比不上的，畢竟時間還不長。比如我一直很喜歡的作者信息生成的插件，什麼名字忘記了，畢竟卸載好久了…主要就是設置了作者姓名，郵箱這些信息之後，在頂部自動生成包括作者/郵箱/時間還有其他自定義的信息。

在vscode插件市場找了半天也沒找到，決定自己動手擼一個。

• 項目地址：excaliburhan/vscode-author-generator。
• 插件安裝：vscode或者市場搜索vscode-author-generator。

需求準備

首先，確定下這個插件的需求：

• 自動生成作者信息，部分信息(作者/郵箱)可配置。
• 根據文件類型生成不同注釋。
• 支持自定義模版。

其他準備

• vscode api文檔
• vscecli 文檔

這兩個文檔在之後的開發會用到，下面會講到。

開發插件

1. vscecli信息

由於後面生成項目要用到發布者信息，我就把vscecli的生成發布者信息部分先講了，當然後面發布還要用到它。下面是生成發布者信息的步驟，最好還是按照vscecli的文檔來做。

• 安裝：npm install -g vsce
• 創建：vsce create-publisher (publisher name) (publisher name就是發布者的名字，是你在visualstudio註冊的名字，此外你還需要Personal Access Token)
• 登陸：vsce login (publisher name) (這一步會要求你輸入發布者名字和Personal Access Token)

至此，本地會記住你的信息，如果你需要更換用戶，也可以使用vsce logout登出，並換賬號登陸。

2. 生成項目

這裡我使用了官方的generator，生成必要的package.json信息，如果你自己去寫，可以參看官網文檔。

• npm install -g yo generator-code && yo code

可以看到，提供了幾種基本插件/主題編寫的模版，由於我沒學過typescript，這裡選擇了javascript的插件。

按部就班填寫信息，如果你已經在上一步登陸vsce，這裡的publisher name是自動填寫的，你也可以手動填寫，但保持和你的註冊用戶名一致。

確認後，會自動使用npm安裝依賴，耐心等待一會，項目就生成完畢。

我這裡沒有讓它自動生成git項目，可以通過git remote add添加你自己的github倉庫地址。

生成的項目結構大概是這樣的，由於功能比較簡單，這裡只要關心extension.js就可以了，這是我們的主要功能js。

3. manifest解釋

vscode的manifest文件，也就是package.json文件，先來看看默認生成的：

{n "name": "vscode-test", // 插件名字n "displayName": "vscode-test", // 插件顯示名字n "description": "test",n "version": "0.0.1", // 插件版本n "publisher": "edwardhjp", // 發布者n "engines": {n "vscode": "^1.5.0"n },n "categories": [n "Other"n ],n "activationEvents": [n "onCommand:extension.sayHello" // 激活事件，onCommand表示command調用，就是在vscode用`cmd + shift + p`調出來後使用，其他的參看文檔。n ],n "main": "./extension", // 入口文件n "contributes": {n "commands": [{n "command": "extension.sayHello", // `cmd + shift + p`實際執行的command，和上面的激活事件要對應n "title": "Hello World" // `cmd + shift + p`調用顯示名字n }]n },n "scripts": {n "postinstall": "node ./node_modules/vscode/bin/install",n "test": "node ./node_modules/vscode/bin/test"n },n "devDependencies": {n "typescript": "^2.0.3",n "vscode": "^1.0.0",n "mocha": "^2.3.3",n "eslint": "^3.6.0",n "@types/node": "^6.0.40",n "@types/mocha": "^2.2.32"n }n}n

基本解釋都寫在注釋里了，根據自己需要修改吧。

4. extension.js編寫

var vscode = require(vscode); // 包含vscode所有api的模塊nnfunction activate(context) {n // 插件激活事件，必須與package.json的對應n var disposable = vscode.commands.registerCommand(extension.sayHello, function () {n // Info信息框n vscode.window.showInformationMessage(Hello World!);n });nn context.subscriptions.push(disposable);n}nexports.activate = activate;nn// 取消插件激活事件nfunction deactivate() {n}nexports.deactivate = deactivate;n

官方的js文件，就是在調用的時候彈一個Hello World!的提示框。原則上你的邏輯都應該在registerCommand的function裡面。如果你的邏輯很複雜，建議把邏輯移到外面，合理解構代碼。

你可以在vscode打開項目的目錄文件，然後使用F5進行debug模式，vscode會起一個擴展主機給你進行開發。

但是我的vscode不知道什麼原因，擴展主機一直失敗。我都是直接把項目拷貝到本地插件目錄進行開發的，每次debug都要重啟vscode，說多了都是淚～

如果你知道怎麼解決，請告訴我！

5. 插件發布

又要用到剛才的vscecli了。

在項目根目錄使用：vsce package打包你的插件，會生成一個extensionName-version.vsix的信息文件。

然後：vsce publish，進行發布，如果成功，會返回類似內容：

Successfully published publisherName.extensionName@version!n

尾聲

好了，現在你可以在vscode市場搜索你自己上傳的插件了。祝大家寫得愉快！