在vscode中创建自己的代码文件格式

vscode中自定义用户代码片段

在新建一个HTML文件的时候,我们常常会使用**!+tab**来快速创建一个h5页面。

那我们来看一下,如何能自定义一个指令创建想要的文件格式呢。

  1. 首先打开vscode,左下角找到设置标志
    在这里插入图片描述

  2. 找到’用户代码片段‘

在这里插入图片描述

  1. 选择新建全局代码片段文件

在这里插入图片描述

  1. 按照提示输入文件名,也就是在文件中使用的快捷命令(比如建h5文件时的!)在这里插入图片描述

  2. 然后就会出现这样的文件啦!在这里插入图片描述我这里以新建一个vue文件为列来写指令内容:

    {
        "Print to console":{
            "prefix": "vue",
                "body": [
                    "<template>",
                    "  <div class=\"wrapper\">",
                    "    $0",
                    "  </div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "  components: {},",
                    "  props: {},",
                    "  data () {",
                    "    return {",
                    "    };",
                    "  },",
                    "  watch: {},",
                    "  computed: {},",
                    "  methods: {},",
                    "  created () {},",
                    "  mounted () {}",
                    "};",
                    "</script>",
                    "<style lang=\"scss\" scoped>",
                    ".wrapper{}",
                    "</style>",
                    ""
                ],
                "description": "A vue file template"
        }
    }
    
    

    将上面的内容复制到文件中就好了。

    1. 接下来创建一个vue的文件来试一下吧

      在这里插入图片描述

    有指令了!!回车,你就会得到下面的页面了

       <template>
         <div class="wrapper">
           
         </div>
       </template>
       
       <script>
       export default {
         components: {},
         props: {},
         data () {
           return {
           };
         },
         watch: {},
         computed: {},
         methods: {},
         created () {},
         mounted () {}
       };
       </script>
       <style lang="scss" scoped>
       .wrapper{}
       </style>
    

大家可以安装自己的需求去更改啦!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值