前言

來啦老鐵！

在上前兩篇文章：VSCode 插件開發(fā)（一）：Hello World
和 VSCode 插件開發(fā)（二）：插件開發(fā)實(shí)踐 中畅蹂，我們一起學(xué)習(xí)了 VSCode 插件項(xiàng)目是如何創(chuàng)建、VSCode 插件的基礎(chǔ)知識(shí)豫柬，以及嘗試開發(fā)了一個(gè)稍微復(fù)雜點(diǎn)的插件，而今天我們在之前文章的基礎(chǔ)之上，學(xué)習(xí)如何打包插件與本地安裝插件~

主要參考文獻(xiàn)：

• VSCode 插件安裝-擴(kuò)展文檔
• publishing-extension

學(xué)習(xí)路徑

1. 安裝打包工具穆桂；
2. 修改 README.md掌猛；
3. 靜態(tài)文件與 node_modues 文件夾處理盏浙；
4. 打包插件；
5. 安裝插件荔茬；
6. VSCode 中查看已安裝的插件废膘；
7. 使用插件；
8. 插件功能拓展兔院；
9. 安裝包共享殖卑；
10. 思考；

1. 安裝打包工具坊萝；

• 使用以下命令安裝 VSCode 插件的專用安裝工具：

npm install -g vsce

2. 修改 README.md孵稽；

• 需要修改項(xiàng)目根目錄下的 README.md 文件內(nèi)容，刪除 “This is the README for your extension” 這句話十偶，如：

刪除 README.md 中的文本

• 然后才能正常打包菩鲜，否者會(huì)出現(xiàn)以下錯(cuò)誤：

打包報(bào)錯(cuò)

（我們暫且先不修改 README.md 文件的其他內(nèi)容）。

3. 靜態(tài)文件與 node_modues 文件夾處理惦积；

• 一些如 .txt接校、.json 文件等的靜態(tài)文件可以在開發(fā)的時(shí)候放在根目錄，如：

根目錄

放在根目錄狮崩，這樣我們就不用額外去復(fù)制這些靜態(tài)文件了蛛勉，vsce package 命令會(huì)幫我們完成；

• node_modues 文件夾在運(yùn)行插件時(shí)有時(shí)候是必須的睦柴，特別是當(dāng)有外部依賴的時(shí)候诽凌，則此時(shí)需要修改 package.json 文件內(nèi)的內(nèi)容，將 devDependencies 字眼改為 dependencies 即可坦敌，這一點(diǎn)非常重要侣诵，如：

dependencies

4. 打包插件；

• 接下來我們開始打包我們的插件狱窘，使用命令：

vsce package

• 看到 Done 字眼即可：

  
  
  打包插件

• 我們能看到插件安裝包路徑為：/Users/dylan.z.zhang/Desktop/case2script/case2script-0.0.1.vsix

• 也能在項(xiàng)目根目錄下看到該安裝包：

  
  
  根目錄-安裝包

5. 安裝插件杜顺；

• 使用如下命令安裝我們打包好的插件，如：

code --install-extension /Users/dylan.z.zhang/Desktop/case2script/case2script-0.0.1.vsix

• 或者類似：

code --install-extension ./speed-up-scripting-1.0.0.vsix

code --install-extension 后面帶的就是步驟 3 生成的安裝包文件路徑蘸炸；

安裝插件

• 安裝完成后躬络，我們會(huì)在 ~/.vscode/extensions 目錄下看到我們安裝好的插件目錄，如：

插件 - 1

注：文件夾名上有個(gè) undefined搭儒， 這是因?yàn)槲覀儧]有配置發(fā)布者的名字洗鸵，如何配置呢越锈？

a. 在 package.json 中配置 "publisher" 項(xiàng)即可，如：

publisher

b. 效果如下：

publisher 效果 1

publisher 效果 2

• 安裝好的插件文件夾內(nèi)的結(jié)構(gòu)：

  
  
  插件 - 2

6. VSCode 中查看已安裝的插件膘滨；甘凭；

• 插件安裝完成后，我們就能在 VSCode 內(nèi)看到我們的插件了火邓，入口如下：

查看已安裝的插件

注意：如果是更新丹弱，則需要重啟 VSCode 或卸載插件并重裝拆件以使用最新版本的插件；

7. 使用插件铲咨；

• 在 VSCode 內(nèi)看到我們的插件后躲胳，我們就可以用我們的快捷鍵或快捷菜單來執(zhí)行我們的插件了；

例如我做了個(gè)簡易的生成自動(dòng)化腳本模板的插件（生成的自動(dòng)化腳本纤勒，部分信息需要調(diào)用 API 從用例管理平臺(tái)上獲取坯苹，然后組裝到模板中去，進(jìn)而生成我們的自動(dòng)化用例的初始代碼）摇天；

• 輸入用例號(hào)粹湃；

啟動(dòng)插件

• 自動(dòng)調(diào)用 API 并組裝自動(dòng)化用例的初始代碼；

自動(dòng)生成自動(dòng)化用例模板

8. 插件功能拓展泉坐；

• 我還做了一個(gè)功能为鳄，那就是可以將配置文件清空的功能，以后如果有推廣腕让，方便適用于不同團(tuán)隊(duì)（當(dāng)然孤钦，不同團(tuán)隊(duì)如果技術(shù)棧一樣那就方便，如果技術(shù)棿客瑁或框架有差異偏形，那么用例模板和插件邏輯是要重點(diǎn)維護(hù)的）；

清空配置文件

• 接著我們再觸發(fā)自動(dòng)生成腳本時(shí)就會(huì)多出以下幾個(gè)問詢：

API Endpoint - 問詢

API Key - 問詢

Case 前綴 - 問詢

9. 安裝包共享觉鼻；

我們可以將打包出來的安裝包發(fā)給其他人俊扭，其他人使用插件安裝命令即可安裝我們的安裝包，進(jìn)而達(dá)到共享的效果滑凉，此處不再演示统扳；

由于該插件與公司內(nèi)部平臺(tái)緊密關(guān)聯(lián)喘帚，不適合發(fā)布到網(wǎng)絡(luò)上畅姊，因此我們就暫時(shí)不學(xué)習(xí)發(fā)布了。

• 發(fā)布可參考文獻(xiàn)：publishing-extensions

10. 思考吹由；

解決自動(dòng)編寫自動(dòng)化腳本的問題若未，實(shí)際上從源頭側(cè)出發(fā)效果會(huì)更好，即規(guī)范化文本用例倾鲫，如用例的前置條件描述粗合、前置信息描述萍嬉、用例步驟等，則“用機(jī)器自動(dòng)寫自動(dòng)化腳本”才能發(fā)揮更多作用隙疚，但這個(gè)存在很多困難壤追，如：

1. 文本用例通常是人為編寫的，要讓所有人遵循一定的規(guī)則去寫文本用例供屉，這個(gè)本身就是比較困難的事情行冰；
2. 這樣的規(guī)則通常也是難以制定的，因?yàn)楫a(chǎn)品功能迭代比較快速伶丐，文本用例描述規(guī)則可能也經(jīng)常會(huì)發(fā)生變化悼做；
3. 當(dāng)有較多的規(guī)則需要遵守時(shí)，插件需要做很多定制化的功能哗魂，有時(shí)新增規(guī)則或規(guī)則發(fā)生變化肛走，則插件開發(fā)完成后，可能腳本都寫完了或者反而效率更低录别；
4. 過往有些大神們還特意為寫腳本創(chuàng)建平臺(tái)朽色，通過平臺(tái)組裝出用例，實(shí)踐到最后發(fā)現(xiàn)維護(hù)這些規(guī)則本身就需要耗費(fèi)非常多的精力庶灿，得不償失~
5. ...

因此纵搁，我個(gè)人更傾向于根據(jù)團(tuán)隊(duì)、項(xiàng)目的實(shí)際情況往踢，在一些底層范圍上做這種插件功能以提升工作效率腾誉，這樣的插件具有通用性，維護(hù)量非常小峻呕，“用機(jī)器半自動(dòng)寫自動(dòng)化腳本” 也還是可以的~

后續(xù)我就可以在這個(gè)插件上多下一些功夫利职，多增加一些通用功能，如文本用例版本對比等功能瘦癌，以期在編寫自動(dòng)化腳本的各個(gè)環(huán)節(jié)提升工作效率~

這只是我的初次嘗試猪贪，很多功能還有待研究，后續(xù)繼續(xù)加油~

能力有限讯私，歡迎指正热押、互相交流，感謝~

如果本文對您有幫助斤寇，麻煩點(diǎn)贊桶癣、關(guān)注！

感謝~