vscode 代码片段 快速生成代码

1、文件 —> 首选项 —> 用户代码片段

在这里插入图片描述

2、在输入框中 输入 vue.json,点击进入

如果没有这个文件,就点击 新建全局代码片段文件或者新建 “xxx” 文件夹的代码片段文件,在输入 vue.json

在这里插入图片描述

3、输入想要的代码格式,命名自取,就可以 直接在vue文件中输入名字就可以快速生成代码了
	{
	"vueless": {// 随便写(vue2)
        "prefix": "vueless",//vueless 是名称,生成代码就输入这个名称就可以了
        "body": [
			"<template>",
			"\t<div>\n",
			"\t</div>",
            "</template>\n",
			"<script>",
			"export default {",
			"\tname:\"\",",
			"\tdata(){",
			"\t\treturn{\n\n\t\t}",
			"\t},",
			"\tcreated(){\n\n\t},",
			"\tmounted(){\n\n\t},",
			"\tmethods:{\n\n\t}",
			"}",
			"</script>\n",
			"<style scoped lang=\"less\">\n",//不用less,删掉 lang=\"less\"
			"</style>",
            "$2"
        ],
        "description": "Log output to console"
    },
    "vue3less": {// 随便写(vue3)
        "prefix": "vue3less",//vue3less 是名称,生成代码就输入这个名称就可以了
        "body": [
			"<template>\n",
            "</template>\n",
			"<script>",
			"export default {",
			"\tname:\"\",",
            "\tsetup(){",
            "\t\treturn{}",
            "\t}",
            "}",
			"</script>\n",
			"<style scoped lang=\"less\">\n",//不用less,删掉 lang=\"less\"
			"</style>",
            "$2"
        ],
        "description": "Log output to console"
	}
}

最后:在vue文件中 输入 你定义的名字就可以快捷生成代码了
在这里插入图片描述

在这里插入图片描述

  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值