前言

趁著週六日的空閒時間,瞭解了下vscode外掛或者程式碼片段的釋出套路.

本來找下GG有啥文章前人走過的文章,最後似乎木有,那就只能自己摸索了.

從官方文件入手!!實踐出真理….

em..自認為英文不錯和自學能力灰常好的大佬,到這裡可以停止閱讀了,省的浪費時間!

學會這個,你能收穫什麼?見仁見智…

但是起碼你知道怎麼釋出了,且對 npm的package.json會有更深一層的理解.

釋出的大體流程

1. 有個微軟的賬號
2. 登入市場,創造一個團隊
3. 建立一個 Personal Access token
4. 全域性安裝vsce模組
5. github 新建一個對應的倉庫
   
   • 核心要點,package.json
     的書寫
   • snippets的 json 檔案
   • 對應的靜態檔案等(image)
6. 最後一步就是釋出,看我們自己的釋出的成果了

1.微軟帳號

em……自己建立,之後訪問vscode maketplace

右上角還有官方的兩篇文件:

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": "[email protected]",
    "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" // 包使用的協議!
}

6. 釋出,檢視成果

溫馨提示:

• 建立一個釋出者,會提示需要 token , 就是那個Personal Access Token;輸入後其實相當於登入狀態
• 若是你手動退出後(vsce logout xxxx),再登入的時候依舊需要輸入token
• 看我的截圖0.0.3,其實是讀取package.json裡面自定義的版本號,更新內容的記得必須更新版本號!

不推薦安裝哈!!!只是測試用..
當然,各位大佬願意幫我維護的話,花上一段時間倒是可以變成一個有用的 snippets 庫

總結

至此,你想要自己寫一個程式碼片段的庫釋出到商店造福他人,
應該是沒什麼難度了…

下一篇文章,我再給大夥分享一波實用的外掛!!!!敬請期待!!!

em….依舊來一波問題的提問姿勢