vscode插件開發(fā)實踐與demo源碼

寫在前面

工欲善其事必先利其器。vscode作為優(yōu)秀的開發(fā)工具，給我的日常開發(fā)工作提供了極大的便利。其拓展機制更是如此。

但是，最近在做年度專業(yè)線任務(wù)時，有需要用到漂亮的行尾注釋對齊，搜索后發(fā)現(xiàn)vscode官方插件市場沒有我想要的。

于是便想著自己來開發(fā)這么個東西，一方面方便后邊自己使用，一方面也能學習下vscode的插件開發(fā)、發(fā)布方法，另一方面要是發(fā)布后對其他人有所幫助就更好了。

本文主要內(nèi)容

這篇文章是在我完成插件開發(fā)、發(fā)布后寫的，記錄下方法。

主要包含兩個方面的內(nèi)容：

vscode插件開發(fā)、發(fā)布主要流程

vscode插件demo源碼參考https://github.com/gitshan/vscode-extension-comment-aligner

vscode插件開發(fā)、發(fā)布主要流程

插件開發(fā)前的準備：vscode、nodejs、vscode插件生產(chǎn)工具、git、微軟賬號

插件開發(fā)：插件構(gòu)思、官方文檔查閱

插件發(fā)布：打包、上傳、插件市場操作

插件維護：更新迭代后打包、上傳、插件市場操作

插件開發(fā)前的準備：

vscode、nodejs、git、微軟賬號，這個的準備無需多說。

vscode插件生產(chǎn)工具：官方推薦使用Yeoman 和 VS Code Extension Generator。用如下命令安裝：

npm install -g yo generator-code

至此開發(fā)所需的準備已做好。

插件開發(fā)

使用生產(chǎn)工具初始化代碼

執(zhí)行如下指令

yo code

結(jié)果如下：

$ yo code_-----_ ╭──────────────────────────╮| | │ Welcome to the Visual │|--(o)--| │ Studio Code Extension │`---------′ │ generator! │( _′U`_ ) ╰──────────────────────────╯/___A___\ /| ~ |__'.___.'__′ ` |° ′ Y `? What type of extension do you want to create? (Use arrow keys) > New Extension (TypeScript)New Extension (JavaScript)New Color ThemeNew Language SupportNew Code SnippetsNew KeymapNew Extension Pack (Move up and down to reveal more choices)

在os系統(tǒng)上通過上下鍵來選擇要創(chuàng)建的類型，在win上輸入1、2、3后按回車來選擇。

其余步驟根據(jù)提示即可。得到如下結(jié)構(gòu)目錄結(jié)構(gòu)：

├── .vscode ?????// 資源配置文件 ├── CHANGELOG.md // 更改記錄文件，會展示到vscode插件市場 ├── extension.js // 拓展源代碼文件 ├── jsconfig.json ├── package.json // 資源配置文件 ├── README.md ???// 插件介紹文件，會展示到vscode插件市場 ├── test ????????// 測試文件 └── vsc-extension-quickstart.md

ps：其余項目類型的文檔目錄可能會有所差別，以生成的文件目錄為準。在js拓展項目下，最重要的就是extension.js和package.json。

插件構(gòu)思

靈感來源于生活、工作，這個想到了就可以去做。比如我這個行尾注釋對齊（上面的目錄注釋就是用的我剛開發(fā)好的插件）。

關(guān)于comment-aligner的具體思路就不寫在這里了，感興趣的可以去下載源碼看看，里邊包含了完整的注釋。邏輯十分簡單。

查閱文檔開發(fā)

這里不得不說一下官方文檔不太好看，至少不是那么友好。傳送門https://code.visualstudio.com/api/references/vscode-api。英文實在吃力的可以使用chrome的一鍵翻譯，翻譯的還算準確的。

對于基本的應(yīng)用主要查看window相關(guān)的就足夠了，結(jié)合yo code生成的基本代碼可以實現(xiàn)簡單的功能。

插件發(fā)布

安裝打包、發(fā)布工具

npm install -g vsce

創(chuàng)建發(fā)布人

在插件市場官網(wǎng)創(chuàng)建發(fā)布人

完善package.json

package.json中有vscode的自定義配置，在執(zhí)行打包命令時vscode會自檢，如果配置錯誤或者遺漏會有提示信息。

較完整的信息如下（下方是我發(fā)布的comment aligner的package.json文件）：

{"name": "comment-aligner","displayName": "comment aligner","description": "A tool for aligning the inline trailing comment","version": "1.0.1","publisher": "huangbaoshan", // 發(fā)布人，在插件市場官網(wǎng)創(chuàng)建的發(fā)布人id"icon": "icon/icon.png", // 插件圖標，用于在插件市場展示的icon；可以放到同級目錄內(nèi)，打包會帶入"repository": {"type": "git","url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"},"engines": {"vscode": "^1.30.0" // vscode版本號},"categories": ["Other" // vscode插件類別，會在插件市場的對應(yīng)類別中展示],"activationEvents": ["onCommand:extension.commentaligner"],"main": "./extension.js","contributes": {"commands": [{"command": "extension.commentaligner", // 插件注冊的類名"title": "Comment Aligner" ????????????// 插件在命令面包的展示名稱}]},"scripts": {"postinstall": "node ./node_modules/vscode/bin/install","test": "node ./node_modules/vscode/bin/test"},"devDependencies": {"typescript": "^3.1.4","vscode": "^1.1.25","eslint": "^4.11.0","@types/node": "^8.10.25","@types/mocha": "^2.2.42"} }

打包

執(zhí)行如下命令：

vsce package

在根目錄得到：comment-aligner-1.0.1.vsix文件

發(fā)布

方法一：用vsce的vsce publish工具來發(fā)布，但是需要在官網(wǎng)配置Personal Access Token較為繁瑣。可參考官方教程

方法二：在官網(wǎng)直接上傳發(fā)布

上傳后點擊確定即可發(fā)布成功。

發(fā)布檢查

在插件市場官網(wǎng)看狀態(tài)

在插件市場官網(wǎng)搜索

在vscode插件頁搜索

以上均表示已發(fā)布成功。

插件維護

在發(fā)現(xiàn)bug和新功能開發(fā)完成后，需要更新插件，只需要將新生產(chǎn)的.vsix包上傳到官網(wǎng)即可。

最后

希望有用，謝謝大家。

總結(jié)

以上是生活随笔為你收集整理的vscode插件开发实践与demo源码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。