vscode插件的開發與發布流程

ermaoL 發布于2019-08-22 17:02 / 3097人閱讀

摘要：依賴最好是更新到最新版，插件調試會更穩定穩定版生成基本文件過程與類似。預覽發布前可以通過將文件放進的文件夾中，就可以本地預覽和使用了。

適用場景

每個團隊都可能會有自己的庫或者框架，沒有相應的插件提示和快速填充非常的難受，效率也非常低，做一個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(){
	return {
	$0
	}
}"],
    "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小星星走一走

GPU云服務器云服務器服務器的配置與發布小程序的開發和發布小程序開發的流程小程序的開發流程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94795.html

FE.BASE-vscode使用、原理、插件開發筆記

摘要：插件提供內容，負責渲染。增量更新，盡可能地減少重新渲染長時間運行的任務應該支持，并可以取消插件能夠正確地處理對象的生命周期。使用了模式，運行可以將這個對象銷毀。使用命令行使用幫助：code --help 使用已經打開的窗口來打開文件：code -r 打開文件并滾動到特定行：code -r -g package.json:128 比較兩個文件：code -r -d a.tx...

MingjunYang 2019-08-26 13:46 評論0 收藏0
VS Code插件開發介紹（一）

摘要：發布插件插件開發完后就可以發布了，需要安裝安裝完后，需要去注冊并生成一個。總結本文介紹了插件開發的基本流程，實現了一個簡單的插件。更多的開發技巧，可以看這個系列的第二篇插件開發介紹二前言前段時間做了一個基于命令行的效率工具，可以自動生成組件的模板代碼。自己用起來還覺得挺好，但在組內案例幾次后大家都不愿意用，究其原因還是命令行工具使用起來門檻有點高，不方便。由于組內已經統一使用VS ...

thursday 2019-08-23 12:17 評論0 收藏0
實錄分享&視頻 | 微軟Visual Studio Code是這樣支持Docker的

摘要：分享嘉賓是來自微軟云計算事業部的高級軟件開發工程師劉鵬。是微軟開源的一款開發工具，它針對做了許多編譯和命令上的支持。今天主要向大家介紹一下微軟去年推出的一個，以及對的一些支持。年他加入微軟，從事開發的工作。本文是數人云分布式架構的開源組件大選Meetup的實錄分享。分享嘉賓是來自微軟云計算事業部的高級軟件開發工程師劉鵬。Visual Studio Code是微軟開源的一款開發工具，它...

leoperfect 2019-06-28 17:49 評論0 收藏0
VS Code插件開發指南(view-readme)

摘要：本次給大家帶來的分享是關于插件的一些經驗，分享的內容是我寫的一個插件。為了解決上面這個問題，我開發了這個插件。本次給大家帶來的分享是關于VS Code插件的一些經驗，分享的內容是我寫的一個插件：view-readme。開發背景在本地安裝好所有npm包后，有的時候想看看某個模塊的文檔，了解其特性以及如何使用。于是打開node_modules文件夾，大家都知道，這個文件夾里面的文件是...

yy736044583 2019-08-21 15:32 評論0 收藏0
2021愛智先行者—（2）零基礎APP開發實例

摘要：有鑒于此，本文以未安裝工具軟件的計算機未激活的愛智設備為例，實戰解說零基礎小白的愛智開發過程。愛智設備斷開互聯網也可以運行，但本文中的開發部署等功能無法操作。【本...

paney129 2021-11-22 09:34 評論0 收藏0