创建代码模板，让常用代码有飞一般的感觉

作用

这篇博客主要讲述如何给vscode和idea这两个IDE设置代码模板

代码模板概念

在写代码的时候，有一些代码总是常用的一般都会通过像函数的方式来包装起来，然后反复取用。但是也有一些页面的结构，或者无法封装的套路格式。这个时候代码模板就用上。它可以通过输入短语加快捷键的方式快速写完你设定好的格式。

常用编辑器设置（vscode篇）

打开路径一次为 文件--首选项--用户片段

在这里选中你要设置文件类型相关的json，我们这里以vue为例，选中vue.json

这里的代码含义如下：
"Print to 代码块名称": {
"prefix": "对应触发代码片段的字符",
"body": [
"代码块内容，必须使用双引号引起来",
"此处为光标首次所在: $1",
"此处为光标二次所在: $2" ],
"description": "代码块描述，会在快捷键右侧注释处展示"
}

设置好内容保存即可生效， 然后再vue页面中输入 "prefix"处设置的短语，再按tab键就会出现代码块

常用编辑器设置（IDEA篇）

打开IDEA后，使用快捷键Ctrl+Alt+S 出现“设置” 界面，选中“编辑器”（Editor）——“实时模板”(Live Templates).点击右侧加号(+),选择Templates Group，新增一个“模板”组

填写相应信息，在模板文本中可以使用变量。
abbreviation：缩写，输入缩写快速生成代码。
Description ：模板描述。
Templates text ：模板文本，输出代码。

选出代码模板使用的场景，以后这些代码就可以在这些地方使用了，最后点“确定”完成模板

带需要使用的场景内，输入 模板里定义好的“缩写”内容，再按tab键就出现了代码 ——（完美的代码就这样出现了）

代码模板内容

VUE用：

"Print to console": {
	  "prefix": "vue",
	  "body": [
	
		"<template>",
		"  <div>",
		
		"  </div>",
		"</template>",
		"",
		"<script>",
		"// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
		"// 例如：import 《组件名称》 from '《组件路径》'",
		"",
		"export default {",
		"  name: '',",
		"  // import引入的组件需要注入到对象中才能使用",
		"  components: {},",
		"  data () {",
		"    // 这里存放数据",
		"    return {",
		"",
		"    }",
		"  },",
		"  // 监听属性 类似于data概念",
		"  computed: {},",
		"  // 监控data中的数据变化",
		"  watch: {},",
		"  // 生命周期 - 创建完成（可以访问当前this实例）",
		"  created () {",
		"",
		"  },",
		"  // 生命周期 - 挂载完成（可以访问DOM元素）",
		"  mounted () {",
		"",
		"  },",
		"  beforeCreate () { }, // 生命周期 - 创建之前",
		"  beforeMount () { }, // 生命周期 - 挂载之前",
		"  beforeUpdate () { }, // 生命周期 - 更新之前",
		"  updated () { }, // 生命周期 - 更新之后",
		"  beforeDestroy () { }, // 生命周期 - 销毁之前",
		"  destroyed () { }, // 生命周期 - 销毁完成",
		"  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发",
		"  // 方法集合",
		"  methods: {",
		"",
		"  }",
		"}",
		"</script>",
		"",
		"<style lang='sass' scoped>",
		"//@import url($3); 引入公共css类",
		"$4",
		"</style>",
		""
	  ],
	  "description": "vue基础界面模板"
	}
  }