如何配置代码片段,实现快捷指令生出vue模板!!

第一步,打开编辑器,点击左上角文件==>首选项==>用户片段

第二步, 找到vue代码片段配置文件 vue.json(vue)
方法一:搜索框中输入vue.json快速查找

方法二:在新代码片段中找到vue.json

第三步,更换修改代码片段
在进入vue.json中可以看到这些被注释的代码片段,这是说明未启用的

我们只需要对prefix中设置自己想要的指令,然后在 body中的代码进行替换和修改
代码如下: (具体作用已经在代码中注释)

	"Print to console": {
		"prefix": "vue",      //这里的vue是代码指令,你可以随意更改
		"body": [             // body[]中的代码就是 输入vue指令后显示的代码
			"$1",             // 这里的$1 可以不要,建议去掉
	"<template>",
	"<div class=''></div>",
	"</template>",
	"",                       // 这里的引号内的空, 是为了添加 空行
	"<script>",
	"export default {",
	  "  name: '',",          // 这里每段代码的“”双引号是必须加的,后面要跟上逗号 "," 
	  "  components: {},",    // 代码前面,双引号内的空格是设置空格样式的, 一个空格对应vue文件中的一个空格
	  "  props: {},",
	  "  data () {",
	  "    return {",
	  "    }",
	  "  },",
	  "  computed: {},",
	  "  watch: {},",
	  "  created () { },",
	  "  mounted () { },",
	  "  methods: {}",
	  "}",
	"</script>",
	"<style scoped lang=less>",
	"$2",                    // 这里的$2 作用也是添加空行
	"</style>", 
	""                      // 这里加空行, 是为了解决vue中</style>后面报错缺少空行的问题
		],
		"description": "Log output to console"
	}
	
}

我这里模板已经做好了,直接按照我这个模板复制.

效果如下:
在后缀为.vue文件下输入vue

回车

宾果!!!模板出来了

写在最后: 大家可以做出属于自己专属的代码片段, 代码片段的目的本身就是为了便于开发!!!