【tools第3期】vsCode根据模板生成代码

新建.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='stylus' scoped>",
      "</style>"
  ],
    "description": "Create vue template"
  }
}
复制代码

保存后关闭这个文件。

注意 $0 表示你但愿生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

例如：咱们新建一个名为index.vue的文件，输入vue按下enter，就会自动生成内容啦。以下：

<!--  -->
<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {

    };
  },

  components: {},

  computed: {},

  mounted: {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
</style>
复制代码

若有侵权，请发邮箱至wk_daxiangmubu@163.com 或留言，本人会在第一时间与您联系，谢谢！！

长按二维码关注咱们，了解最新前端资讯