vscode插件開發實踐與demo源碼

寫在前面

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

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

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

本文主要內容

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

主要包含兩個方面的內容：

vscode插件開發、發布主要流程

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

vscode插件開發、發布主要流程

插件開發前的準備：vscode、nodejs、vscode插件生產工具、git、微軟賬號

插件開發：插件構思、官方文檔查閱

插件發布：打包、上傳、插件市場操作

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

插件開發前的準備：

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

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

npm install -g yo generator-code

至此開發所需的準備已做好。

插件開發

使用生產工具初始化代碼

執行如下指令

yo code

結果如下：

$ 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系統上通過上下鍵來選擇要創建的類型，在win上輸入1、2、3后按回車來選擇。

其余步驟根據提示即可。得到如下結構目錄結構：

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

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

插件構思

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

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

查閱文檔開發

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

對于基本的應用主要查看window相關的就足夠了，結合yo code生成的基本代碼可以實現簡單的功能。

插件發布

安裝打包、發布工具

npm install -g vsce

創建發布人

在插件市場官網創建發布人

完善package.json

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

較完整的信息如下（下方是我發布的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", // 發布人，在插件市場官網創建的發布人id"icon": "icon/icon.png", // 插件圖標，用于在插件市場展示的icon；可以放到同級目錄內，打包會帶入"repository": {"type": "git","url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"},"engines": {"vscode": "^1.30.0" // vscode版本號},"categories": ["Other" // vscode插件類別，會在插件市場的對應類別中展示],"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"} }

打包

執行如下命令：

vsce package

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

發布

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

方法二：在官網直接上傳發布

上傳后點擊確定即可發布成功。

發布檢查

在插件市場官網看狀態

在插件市場官網搜索

在vscode插件頁搜索

以上均表示已發布成功。

插件維護

在發現bug和新功能開發完成后，需要更新插件，只需要將新生產的.vsix包上傳到官網即可。

最后

希望有用，謝謝大家。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。