適用場景

• 每個團隊都可能會有自己的庫或者框架，沒有相應的插件提示和快速填充非常的難受，效率也非常低，做一個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顯示，但是它只顯示一次，務必要保留，之后命令行操作會使用到

• npm install vsce -g
• vsce create-publisher (name)
• vsce login (publisher name)
• vsce publish (version)
• 之后的發布只要執行第四步就可以

其他

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

總結

以上是生活随笔為你收集整理的vscode插件的开发与发布流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。