vscode自定义代码段

 用vscode做开发时，平时所用的代码段比较简洁，为了提高开发效率，我们需要自定义我们用着习惯方便的代码段，这里只是以js,vue为例。

 相信大家一看就明白，至于代码段在哪里编写，在这我就不多说了，大家都明白。

 我们就可以自定义开发中常用的代码段，节省时间，大大提高开发效率。

(注意：创建哪种语言的代码片段就进相应语言的代码片段区域，写js代码段就不要把代码段写在了php的代码段编写区)

 \r\n：代表换行，填写几个代表换几行，
 \t：tab数，有几个代表有几个tab

代码片段

 js代码段：

{
    "Print to vue": {
        "prefix":"vue",
        "body": [
            "new Vue({\r\n\tel:'#app',\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n})",
        ],
        "description":"script中的vue"
    },
}

 效果：

 vue代码段：

{
	"Print to vue": {
		"prefix": "vue",
		"body": [
			"<template>\r\n\t$1\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t},\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t$3\r\n</style>"
		],
		"description": "vue文件的初始代码段"
	},
}

 效果：

还有一种更为直观的写法，更容易书写：

双引号需要在前面加上 \ 进行转义

	"Print to js": {
		"prefix": "js",
		"body": [
			"<script src=\"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js\"></script>",
    		"<script>",
        		"\t$(function() {",
					"\t\t$1",
        		"\t})",
    		"</script>"
		],
		"description": "Log output to js"
	},

	"Print to jsvue": {
		"prefix": "jsvue",
		"body": [
			"<div id=\"app\"></div>",
    		"<script src=\"https://cdn.bootcss.com/vue/2.5.16/vue.min.js\"></script>",
    		"<script>",
				"\tnew Vue({",
					"\t\tel: 'app',",
					"\t\tdata: {",
						"\t\t\t$1",
					"\t\t}",
				"\t})",
			"</script>"
		],
		"description": "Log output to jsvue"
	},

这两种写法，推荐第二种，易写，易读，更为直观，不管哪种能提高效率就行