vscode 如何花式打印 自定义快捷代码补全

有时候是不是看到别人输入一个cl+xx等等代码就能打印整个代码，感觉很神奇，本文就以console.log为案例教你如何使用这种骚操作！！！
今天看到小程序有个老师 控制台打印花式代码，今天搜了很多博客，才总结了 如何自定义设置代码补全。

1.首先打开vscode ->文件->首选项->用户片段

2.打开之后会出现这么个弹出窗口，首先我说明下，我们想要自定义

自定义console.log 打印的代码，所以我们必须要在.js 文件才能这样操作.

3. 首先搜索javascript.json. 然后确认会出现这样的json 编辑框。

4.我来说明下，这几个key 什么意思，

• Print to console 代表的是名字，比如我想让这个自定义设置的快捷打印 这个操作 就叫 Print to console。图上 我自己随便设置的。

• prefix 这个里面是你单词的触发器，就是你敲代码符合这个prefix后面的value，就会触发输出body 部分

• body 就是你需要输入提示里面的内容了，这里我写的是
（后面有完整参考代码）

" console.log('%c 这是一个测试','font-family: sans-serif;color:#ff7b54;font-size:50px;width:300px;height:80px;background-color: #30475e;background-size:100%; border-radius: 10px;padding: 2px 50px;');"

• 我提醒一下，这里面的代码段最好是一行代表输出一行，如果你填入多个数组值，到时候输出的时候就是多行输出，这个body 是数组，这里需要注意。

• 还有一个坑是， 这里的代码段 里面不要包含双引号，不然会报错，去哦自己也没解决。无伤大雅。

5.我自己写的代码，你们作为参考

"Print to 花式 console": {
        "prefix": "clhjh",
        "body": [
            " console.log('%c 这是一个测试','font-family: sans-serif;color:#ff7b54;font-size:50px;width:300px;height:80px;background-color: #30475e;background-size:100%; border-radius: 10px;padding: 2px 50px;');"
        ],
        "description": "Log output to console"
    }

6.保存，关闭。然后在.js 文件中进行测试。

7.如果你想在.vue 文件也进行类似的快捷花里胡哨的操作，只需要搜索vue.json 进行相关配置。操作一样。

我演示下body 如何设置和代码。
其他代码自己配置。

"body": [
			"<template>",
			"    <div>",
			"     $1",
			"     </div>",
			"</template>",
				"",
			"<script>",
			"export default {",
			"   data(){",
			"    return{",
				" ",
			"  }",
			"},",
			"   methods:{",
				"",
			"}",
			"}",
			"</script>",
				"",
			"<style scoped>",
				"",
			"</style>",
		],