vscode 设置代码片段 Vue设置快捷模板

vscode 设置代码片段

首先

• shift + ctrl + p
• 输入snippet
• 选择首选项：配置用户代码片段
• 新建全局代码片段文件
• 输入文件名

vue结构代码片段

{
	"vue-template": {       // vue-template 为快捷键的名字
		// "scope": "vue-html",     //这里可以设置作用域，只能在`<template>`里面显示 。不过我这个片段不需要设置
		"prefix": "vue-template",
		"body": [
			"<template>",
			"  <div class='container'>",
			"    <h1>Template</h1>",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data () {",
			"    return {",
			"      ",
			"    }",
			"  },",
			"  props: {",
			"    prop: {",
			"      type: String,",
			"      required: false,",
			"    },",
			"  },",
			"  components: {",
			"    ",
			"  },",
			"  computed: {",
			"    ",
			"  },",
			"  watch: {",
			"    ",
			"  },",
			"  methods: {",
			"  // type your function",
			"    ",
			"  },",
			"  created () {",
			"    ",
			"  },",
			"  mounted () {",
			"    ",
			"  },",
			"  updated () {",
			"    ",
			"  },",
			"  destroyed () {",
			"    ",
			"  },",
			"  filters: {",
			"    ",
			"  },",
			"}",
			"</script>",
			"",
			"<style scoped lang=''>",
			"",
			"</style>",
			"",
		],
		"description": "your build code"
	}
}

这里可以根据自己的需求定义。保存好后，在vue文件里面输入tem即可看到提示。