vscode 配置用户代码片段

1.打开vs code按快捷键Ctrl+Shift+P打开命令输入 snippet : (或点击文件=>首选项=>用户片段)

eg:此处演示的是配置vue的代码段 ，在vue.json文件中进行配置

{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"Print to vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"    <div>\n$1",
			"    </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"     name:'',",
			"    components: {\n",
			"    },",
			"    props: {\n",
			"    },",
			"    data() {",
			"        return {\n",
			"        };",
			"    },",
			"    computed: {\n",
			"    },",
			"    watch: {\n",
			"    },",
			"    created() {\n",
			"    },",
			"    mounted() {\n",
			"    },",
			"    methods: {\n",
			"    },",
			"};",
			"</script>\n",
			"<style scoped lang=\"less\">\n",
			"</style>\n",
		],
		"description": "Create vue template"
	}
}

属性注释如下：

prefix :这个参数是使用代码段的快捷方式入口,比如这里的log在使用时输入log会有智能感知并且显示body里面的代码段.

body :这个是代码段的主体.需要设置的代码放在这里

$1 :这个为光标的所在位置.

$2 :使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5…

最后一步:测试代码段

在.vue文件中输入 vue即可看到如下代码段：

https://snippet-generator.app/ 代码生成器

注意：