前言
趁著週六日的空閒時間,瞭解了下vscode外掛或者程式碼片段的釋出套路.
本來找下GG有啥文章前人走過的文章,最後似乎木有,那就只能自己摸索了.
從官方文件入手!!實踐出真理....
em..自認為英文不錯和自學能力灰常好的大佬,到這裡可以停止閱讀了,省的浪費時間!
學會這個,你能收穫什麼?見仁見智...
但是起碼你知道怎麼釋出了,且對 npm的package.json會有更深一層的理解.
釋出的大體流程
- 有個微軟的賬號
- 登入市場,創造一個團隊
- 建立一個
Personal Access token - 全域性安裝
vsce模組 - github 新建一個對應的倉庫
- 核心要點,
package.json的書寫 snippets的 json 檔案- 對應的靜態檔案等(image)
- 核心要點,
- 最後一步就是釋出,看我們自己的釋出的成果了
1.微軟帳號
em......自己建立,之後訪問vscode maketplace
傳送門: VSCode marketplace => sign in(登入)
右上角還有官方的兩篇文件:
- Build your own : 對於擴充這塊的文件大綱
- Publish extensions : 其實就是你帳號登入後的一個管理平臺,彙總你釋出外掛的...
2.登入市場,建立一個團隊
你剛登入帳號,看到的頁面是這個.
是不是一臉懵逼!!!我剛登入也是一臉懵逼...
那個Upload new extension是什麼鬼!
其實這裡是你有外掛釋出之後,一個彙總平臺!!(記住是外掛擴充!)
可以簡化更新流程,直接上傳封裝好的外掛..
如圖所示,微軟的外掛商店是涵蓋三個平臺的..我們點進去Visual Studio Code瞅瞅!
拖拉上傳VSIX格式?其實這個就是 VSCode 外掛的主體檔案...你釋出過外掛的話,直接拖拉新的可以直接更新版本(釋出)
說了這麼多,只是科普而已...我們現在可木有釋出過,說說我們要關注的..
點選你登入的使用者名稱 - 右上角
進來是純英文的,沒錯...想改中文,頭像?so easy !
點選編輯配置檔案那個就可以進去了,更換頭像和顯示的語言和時區等
個人資訊編輯這塊不說,說說建立團隊服務的的.
因為沒有團隊..你拿不到Personal Access Token
到下一步還有一些選擇,直接選擇亞太就行了...我操作的時候是英文操作的,然後去找了下是否有中文顯示的...
3.建立一個 Personal Access Token
其實這貨就跟 Github 的Access Token差不多的一個玩意,用來允許訪問憑證(可控!因為可以部分功能開放)
點進去團隊之後,右上角,如圖所示
如上所示的,紅圈那一串就是釋出用到的 token 了!!!
自己保留!,不會永久顯示的!!重新登入帳號這些就再也看不到了
4.安裝 VSCE
依賴於node: npm install -g vsce ; 說下命令列的引數...
# vsce --help
Usage: vsce [options] [command]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
ls [options] 列出實際會發布的檔案列表
package [options] 打包成一個外掛
publish [options] [<version>] 釋出外掛
unpublish [options] [<extensionid>] 外掛下架
list <publisher> 列出某個釋出者下所有釋出的,需要配置好token 額,不然會提示輸入
ls-publishers 列出所有已知的釋出者
create-publisher <publisher> 建立一個新的釋出者
delete-publisher <publisher> 刪除一個釋出者
login <publisher> 登入一個釋出者到釋出者列表中
logout <publisher> 反之,退出釋出者複製程式碼注意注意: token 要保留, 若是退出後登入還是第一次登入都是需要這個的,釋出也是!!!
登入後不退出,憑證預設是保留在本地的....不過還是要保留吧!!!也許哪天還要用到!!
5.軟體倉庫!
- 新建倉庫,關聯倉庫這些跳過!,跳過
- snippet 的書寫姿勢!!跳過,自行去了解,挺多可配置的...
- package.json --- 這個就是我要說的...摸索了挺久..
先看看目錄結構
├── LICENSE // 倉庫使用的協議
├── README.md // 基礎描述
├── gif // 資料夾,存放動態圖的
├── icon //外掛圖片存放的地方,要求128X128
│ └── icon.png
├── package.json // 釋出的條條框框限制和配置
├── .gitignore // git 忽略檔案
├── .vscodeignore // vscode 提交專有的忽略檔案
├── snippets // 程式碼片段存放地方
│ ├── vue-typescript.json
│ └── vue.json
└── vscode-vue-ts-snippet-0.0.1.vsix // 打包的外掛,snippets沒鳥用的,一般用於外掛!
//snippet 打包成外掛並不能執行,打包命令 vsce package複製程式碼package.json
package.json看我的註釋吧,實際檔案不能註釋的.
不然會報 JSON 錯誤或者無效
{
"name": "vscode-vue-ts-snippet", // 包名
"version": "0.0.1", // 版本h號
"description": "Vue with Typescript snippets", // 包的描述
"icon": "icon/icon.png", // 顯示外掛的圖示
"publisher": "crperlin", // vscode 外掛自有的屬性,釋出人
"repository": { // 包的存放倉庫
"type": "git", // 型別 git
"url":"https://github.com/crper/vscode-vs-ts-snippets.git" // 訪問連結
},
"galleryBanner": { // 橫幅描述
"color": "#0273D4",
"theme": "dark"
},
"scripts": { // 這裡沒用到,一般用來寫擴充才用到,跑測試什麼的
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": ["vue","typescript-vue","typescript","vue-snippets","vue-ts-snippets","vue-typescript-snippets","vue2+"], // 關鍵字,就是可一個人去搜尋的
"engines": { // 限制 vscode 的版本
"vscode": "^1.18.0"
},
"author":{ // 不言而喻,釋出人的一些基礎資訊
"name": "crper(QunHe Lin)",
"email": "crper@outlook.com",
"url": "https://github.com/crper"
},
"categories": [ // 外掛的歸類
"Snippets",
"Other"
],
"contributes":{ // 這裡就是索引 snippet 的,如何讓外掛知道你共享的東西
"snippets": [
{
"language": "vue", // 針對.vue 格式的 snippets
"path":"./snippets/vue.json"
},
{
"language": "typescript", // 針對.typescript 的 snippets
"path":"./snippets/vue-typescript.json"
},
{
"language": "javascript", // 針對.js 的 snippets
"path":"./snippets/vue-typescript.json"
}
]
},
"bugs": { // 一般就是反饋 bug,issue 的路徑
"url": "https://github.com/crper/vscode-vs-ts-snippets/issues"
},
"homepage": "https://github.com/crper/vscode-vs-ts-snippets/readme", // 包的主頁,就是放在哪裡
"license": "SEE LICENSE IN LICENSE" // 包使用的協議!
}複製程式碼更多的
package.json欄位及作用請看這裡: npm package.json help
6. 釋出,檢視成果
溫馨提示:
- 建立一個釋出者,會提示需要
token, 就是那個Personal Access Token;輸入後其實相當於登入狀態 - 若是你手動退出後(
vsce logout xxxx),再登入的時候依舊需要輸入token - 看我的截圖
0.0.3,其實是讀取package.json裡面自定義的版本號,更新內容的記得必須更新版本號!
我的測試 snippet, 傳送門: vue-ts-snippet ;
不推薦安裝哈!!!只是測試用..
當然,各位大佬願意幫我維護的話,花上一段時間倒是可以變成一個有用的 snippets 庫
總結
至此,你想要自己寫一個程式碼片段的庫釋出到商店造福他人,
應該是沒什麼難度了...
下一篇文章,我再給大夥分享一波實用的外掛!!!!敬請期待!!!
em....依舊來一波問題的提問姿勢
