適用場景

• 每個團隊都可能會有自己的庫或者框架，沒有相應的插件提示和快速填充非常的難受，效率也非常低，做一個vscode的代碼提示其實也非常的簡單。

依賴

• vscode最好是更新到最新版，插件調(diào)試會更穩(wěn)定
• node 穩(wěn)定版
• npm install -g yo generator-code
• yo code 生成基本文件, 過程與npm init 類似。yo會在最后自動自行npm install， 如果失敗可以手動再執(zhí)行
  

調(diào)試

• 點擊vscode的調(diào)試，關聯(lián)到lanuch.json文件，彈出一個名為擴展開發(fā)主機的窗口，這個窗口就是臨時擁有這個插件的調(diào)試窗口。

代碼片段

• 在package.json的contributes可以自定義自己的snippets，language代表在使用何種語言解析這種文件的時候代碼片段才會生效

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

• 關聯(lián)的snippets主要是prefix、body、description三個屬性，prefix是指在vscode輸入的關鍵字可以輸出body里面的內(nèi)容。

//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在這些標簽是不生效的。

預覽

• 發(fā)布前可以通過將文件放進vscode的extension文件夾中，就可以本地預覽和使用了。

發(fā)布

• 在Visual Studio Team Services 創(chuàng)建一個賬號
• 根據(jù)賬號的名字訪問主頁，例如我的名字是bingou-ms，主頁鏈接就是https://bingou-ms.visualstudi...
• 點擊右上角的個人信息security

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

• 確認后會有token顯示，但是它只顯示一次，務必要保留，之后命令行操作會使用到

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

其他

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。