需求:每次创建.vue文件的时候,最开始的代码都是一样的,手打耗时费力,这时候可以创建一个代码片段一键生成代码
首先在 VScode编辑器的左下角设置中,找到“用户代码片段”
随后选择自己需要的:全局可使用的代码片段 或是 当前文件夹下可使用的代码片段
取一个与创建的代码片段有关的文件名,用于写代码模板
随后在文件里面写好配置与模板代码
使用:在文件中输入 prefix 中定义的指令,随后按 回车键,即可生成定义好的代码
文件内容如下:
{ "Print to console": { "prefix": "vuetem", "body": [ "<template>", " <div class=\"Cont\">\n", " </div>", "</template>\n", "<script>", "export default {", " name:\"\",", " data() {", " return {\n", " }", " },", " methods:{", " },", "}", "</script>\n", "<style lang=\"less\" scoped >\n", "</style>" ], "description": "vue template" } } // prefix:代码片段名字,就是创建这个片段的指令。 // body:你想在页面上输出啥就往这里面加啥。 // $1:生成代码后光标的初始位置,而且这个可以有多个 $1、$2…$n // ${1,字符}:生成代码后光标的初始位置,1表示光标开始的序号,字符表示生成代码后光标会直接选中`字符`。 // \n:换行符。 // \ :转义符号。 // '':用来控制代码的缩进。 // description:描述,输入创建指令后编辑器显示出提示信息。