visual studio code开发代码片段扩展插件

背景

visual studio code编辑器强大在于可以自己扩展插件，不仅可以去插件市场下载，也可以按照官方的API很方便的制作适合自己的插件；

自己最近在开发一个手机端网站项目，基于vant项目，想利用vscode的智能提示补全代码，提高下开发效率，于是学习了下代码片段（snippets）的插件开发；

编写

1. 在vscode编辑器中选择【用户代码片段】->选择当前项目中创建
   

会创建一个新的文件

2. 创建新的 代码片段文件

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