前端学习笔记系列一:7 在vscode中根据vue等模板生成代码

目标:希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容。

方法:打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue

选择vue后,VSCODE会自动打开一个名字为vue.json的文件,复制以下内容到这个文件中:

"Print to console": {

    "prefix": "vue",

    "body": [

      "<!-- $0 -->",

      "<template>",

      "  <div></div>",

      "</template>",

      "",

      "<script>",

      "export default {",

      "  data () {",

      "    return {",

      "    };",

      "  },",

      "",

      "  components: {},",

      "",

      "  computed: {},",

      "",

      "  mounted: {},",

      "",

      "  methods: {}",

      "}",

      "",

      "</script>",

      "<style lang='scss' scoped>",

      "</style>"

  ],

    "description": "Log output to console"

  }

保存后关闭,$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令。

使用demo:新建一个名为demo.vue的文件,输入vue按下enter,就会自动生成内容啦。

<!--  -->

<template>

  <div></div>

</template>

 

<script>

export default {

  data () {

    return {

    };

  },

 

  components: {},

 

  computed: {},

 

  created() {},

 

  mounted() {},

 

  methods: {}

}

</script>

 

<style lang='scss' scoped>

</style>

后记,当然,你也可以为.js、.html等各种文件预设代码片段。

posted @ 2019-05-15 11:28  Hellozhu  阅读(426)  评论(0编辑  收藏  举报