【效率IDE】vscode 使用 snippets 为 .vue 生成模板

VSCODE是一款轻量级的IDE，打开速度快，快捷操作便捷，支持的语言多和插件多，社区大生态完善，很适合开发人员使用。

0x1 具体实现

1. ctrl + shift + p 打开vscode的快速导航命令栏

2.输入 snippets 后，选择首选项：配置用户代码片段

3.输入vue 后点击 vue.json后就可以在里面输入模板，具体格式如下：

{
	"Print to console": {
		"prefix": "vue",
		"body": [
		  "<template>",
		  "  <div></div>",
		  "</template>",
		  "",
		  "<script type=\"text/ecmascript-6\">",
		  "export default {",
		  "  data () {",
		  "    return {",
		  "    };",
		  "  },",
		  "",
		  "  components: {},",
		  "",
		  "  computed: {},",
		  "",
		  "  mounted: {},",
		  "",
		  "  methods: {}",
		  "}",
		  "",
		  "</script>",
		  "<style lang=\"stylus\" rel=\"stylesheet/stylus\">",
		  "</style>"
	  ],
		"description": "Log output to console"
	  }
	
}

这样当我们新建一个.vue文件并输入vue后按tab键，就能够生成一套我们在vue.json里定义的模板，这里有几点需要注意：

• 我们可以在vue.json中定义多个snippets，随后我们根据 "prefix":"vue"里定义的值，就能够在.vue中引用到
• vue.json这个文件命表示能够在.vue的文件中使用snippets，同理如果我们想在 .html中使用，就需要在html.json里去定义我们的模板
• 知道了这个方式，我们就可以在大多数文件中使用snippets了

 

0X2 其他插件

得益于vs code 强大的第三方插件，我们能够在扩展中下载到很多vue代码补全的插件，人气比较高的有：

VueHelp, Vue 2 Snippets, Vetur等