visual studio code開發代碼片段擴展插件

背景

visual studio code編輯器強大在於可以自己擴展插件，不僅可以去插件市場下載，也可以按照官方的API很方便的制作適合自己的插件；

自己最近在開發一個手機端網站項目，基於vant項目，想利用vscode的智能提示補全代碼，提高下開發效率，於是學習了下代碼片段（snippets）的插件開發；

編寫

1. 在vscode編輯器中選擇【用戶代碼片段】->選擇當前項目中創建
   

會創建一個新的文件

2. 創建新的 代碼片段文件

{
	"vantpage": {
		// "scope": "javascript,typescript",
		"prefix": "svantpl",
		"body": [
			"<template>",
			"\t<div>",
			"\t</div>",
			"</template>",
			"\r<script lang=\"ts\">",
			"import { Component, Vue, Prop } from 'vue-property-decorator';",
			"import { Row, Col, Cell, CellGroup } from 'vant';",
			"@Component({",
			"\t name: '${1}',",
			"\t components: {",
			"\t\t [Row.name]: Row,",
			"\t\t [Col.name]: Col,",
			"\t\t [Cell.name]: Cell,",
			"\t\t [CellGroup.name]: CellGroup",
			"\t }",
			"})",
			"export default class ${1} extends Vue {",
			"\t created() {",
			"",
			"\t }",
			"}",
			"</script>",
			"\r<style lang=\"scss\">",
			"</style>",
		],
		"description": "vant typescript template",
	}
}

其中prefix表示提示字符串的前綴 當鍵入 svantpl的時候 會提示補全代碼信息；
body表示補全代碼的內容；${1}表示代碼補充完后，輸入光標的位置；
description表示方法的提示；

在vue文件中輸入
svant 就會提示以下代碼,回車后即可補全代碼

到這里基本就可以使用了，如果是新項目，那就得帶着這個文件，比較麻煩，這時候可以選擇打包該擴展插件，上傳至vscode擴展市場，以后只需要下載安裝即可，也可供他人使用。

寫成插件項目

單個文件是無法打包的，需要寫成項目文件，結構如下：

其中 vsix文件是打包生成的文件

發布擴展：

vsce
是“ Visual Studio代碼擴展”的簡稱，是用於打包，發布和管理VS代碼擴展的命令行工具。

安裝

確保已安裝Node.js。然后運行：

npm install -g vsce

用法
您可以vsce用來輕松打包和發布擴展程序：

$ cd myExtension
$ vsce package
# 生成vsix安裝包 myExtension.vsix 
$ vsce publish
# 發布插件到 VS Code 擴展市場

vsce也可以搜索，檢索元數據和取消發布擴展名。運行vsce --help 可查vsce命令

通過市場的web界面發布擴展

1. 注冊擴展市場開發者賬號
2. 創建完后選擇上傳剛才打包成功的vsix文件
   

也可以通過該管理界面更新、刪除包；

3. 上傳完后即可在插件市場搜索查看
   

最后
github地址