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

背景

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

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

编写

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

会创建一个新的文件

创建新的代码片段文件

{

	"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界面发布扩展

注册扩展市场开发者账号
创建完后选择上传刚才打包成功的vsix文件

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

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

最后

github地址

巴特西

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

背景

编写

写成插件项目

发布扩展：

安装

通过市场的web界面发布扩展

最新文章

热门文章