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

背景

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

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

编写

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

会创建一个新的文件

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

{
	"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文件
   
   

也可以通过该管理界面更新、删除包；

1. 上传完后即可在插件市场搜索查看
   
   

最后

github地址