VS Code 折騰記 - (10) 你想發佈本身搗鼓的snippets到VSCode插件市場!

前言

趁着週六日的空閒時間,瞭解了下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

傳送門: 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 庫

總結

至此,你想要本身寫一個代碼片斷的庫發佈到商店造福他人。