vscode通过snipptes，快速生成uniapp小程序空白模板页

痛点

每次开发uniapp版本的微信小程序，新建空白页面的时候都很麻烦，所以就想自定义一个模板，通过输入快捷键来快速新建小程序页面模板

步骤

命令行

Ctrl+Shift+P
# 选择 Configure User Snippets
# 选择 Vue.json

原始的Vue.json

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

修改后的Vue.json

{
	// 微信小程序空白模板
	"wxapp template": {
		"prefix": "wx",
		"body": [
			"<template>",
			"  $0",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data() {",
			"    return {",
			"      ",
			"    }",
			"  },",
			"  mounted() {},",
			"  methods: {},",
			"  /**",
			"   * 用户点击右上角分享",
			"   */",
			"  onShareAppMessage: function () {},",
			"};",
			"</script>",
			"<style lang=\"scss\" scoped>",
			"",
			"</style>"
		],
		"description": "A wxapp file template"
	}
}

使用

新建一个.vue文件，然后输入wx，然后回车

<template>
  
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  mounted() {},
  methods: {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
};
</script>
<style lang="scss" scoped>

</style>

Get it!