VSCode自定义代码片段——以生成Vue模板为例(图文版)

在日常开发中,经常需要编写大量具有相同重复代码,而vscode中的代码片段可以完美解决这个问题。

这篇教程就以生成Vue模板为例。

<template>
  
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

一、找到入口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pcNTfLEM-1658049687846)(attachment:c4ebbe3fc55bb888f32eb2bbb2ec40be)]


二、选择要生效的文件类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yfu46Rpw-1658049687848)(attachment:5bc53ba87901bb366acfa386f7d4c7bb)]

这里我要生成的是vue模板,所以这里我选择vue文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awzv7c74-1658049687848)(attachment:b209c32d3a66a33406e60c8d85ff8938)]

选择后会自动打开vue.json文件,文件内容默认如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LxLNkRNF-1658049687849)(attachment:33b05eaf38b790e1358fbad9c9937103)]

三、代码块书写

这里就需要用到一个非常好用的工具了,你只需要填入你想要生成的模板,它会自动帮你生成配置文件。

https://snippet-generator.app/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XVegKeMF-1658049687849)(attachment:8574ba33750a286a20a30750f56ee6c6)]

这是我的示例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFpO1LOi-1658049687850)(attachment:316d7e8300ba1453b330d98817e1345d)]

把复制的配置代码粘贴到刚刚打开的vue.json文件中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BoSAd0xQ-1658049687852)(attachment:c1497dabc69d72ef8f606f64cc8097f6)]

四、大功告成

现在在.vue文件中输入vuebase就可以生成想要的代码片段了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjjnCnjd-1658049687853)(attachment:f0feed2f64b5cff543150f326fd48d1d)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGGiisNE-1658049687856)(attachment:070a62470f33cf72fd8d58731147b0ae)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值