vscode插件的開發與發佈流程

適用場景

• 每一個團隊均可能會有本身的庫或者框架，沒有相應的插件提示和快速填充很是的難受，效率也很是低，作一個vscode的代碼提示其實也很是的簡單。

依賴

• vscode最好是更新到最新版，插件調試會更穩定
• node 穩定版
• npm install -g yo generator-code
• yo code 生成基本文件, 過程與npm init 相似。yo會在最後自動自行npm install， 若是失敗能夠手動再執行
  

調試

• 點擊vscode的調試，關聯到lanuch.json文件，彈出一個名爲擴展開發主機的窗口，這個窗口就是臨時擁有這個插件的調試窗口。

代碼片斷

• 在package.json的contributes能夠自定義本身的snippets，language表明在使用何種語言解析這種文件的時候代碼片斷纔會生效

//package.json
"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./src/snippets/html.json"
        },
        {
            "language": "vue",
            "path": "./src/snippets/fes.json"
        }
    ]
}

• 關聯的snippets主要是prefix、body、description三個屬性，prefix是指在vscode輸入的關鍵字能夠輸出body裏面的內容。

//fes.json
"FesData": {
    "prefix": "FesData",
    "body": ["FesData: function(){\n\treturn {\n\t$0\n\t}\n}"],
    "description": "Fes page data"
  },

• 若是想要在vue文件的template標籤中使用snippets，language是vue-html，若是是script標籤中使用language必需要有JavaScript這一項，language只寫vue在這些標籤是不生效的。

預覽

• 發佈前能夠經過將文件放進vscode的extension文件夾中，就能夠本地預覽和使用了。

發佈

• 在Visual Studio Team Services 建立一個帳號
• 根據帳號的名字訪問主頁，例如個人名字是bingou-ms，主頁連接就是https://bingou-ms.visualstudi...
• 點擊右上角的我的信息security

• 點擊add，這裏交互真的很難讓人一眼看出這個是個按鈕，
  

• 確認後會有token顯示，可是它只顯示一次，務必要保留，以後命令行操做會使用到

  1. npm install vsce -g
  2. vsce create-publisher (name)
  3. vsce login (publisher name)
  4. vsce publish (version)
• 以後的發佈只要執行第四步就能夠

其餘

• publish的插件的readme.md文件就是安裝詳情頁的詳細信息內容，可是必須在package.json中寫相關的repository
• FesHelper小星星走一走