做前端开发的同学都知道,我们在编辑器中输入一个 ! 然后按下 tab 键就可以帮我们自动补全 html 结构,那么当我们写 Vue 或者是 React 的时候,页面其实都是有一个初始模板的,我们要怎样做到类似上面简单输入就可以得到文件模板呢,今天就以 Vue 为模板举栗给大家介绍一个很好用的功能,叫做 用户代码片段,

首先我们选择 文件--> 首选项 --> 用户代码片段

mark

输入 Vue ,在下拉中选择 Vue.json

mark

将文件中的代码覆盖为(注释中的内容可以去掉,在编辑器中鼠标悬浮在对象的键上就可以看到这些提示啦)

{
    "Print to console": {
            "prefix": "vue", // 在 Intellisense 中选择代码片段时将使用的前缀
            "body": [
                    "<template>",
                    "  <div>template</div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "  name: '',",
                    "  data () {",
                    "    return {",
                    "",
                    "    }",
                    "  },",
                    "  mounted () {",
                    "",
                    "  },",
                    "  methods: {",
                    "",
                    "  }",
                    "}",
                    "</script>",
                    "",
                    "<style lang=\"less\" scoped>",
                    "",
                    "</style>",
                    "$2"
            ],
            "description": "Vue模板" // 代码片段描述。
    }
}

然后新建一个 Vue 文件,输入 vue ,选择我们刚才创建的模板,一般是下拉里面的第一个,然后我们的文件模板就生成好啦

mark

生成效果

<template>
  <div>template</div>
</template>

<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>

</style>

同样的,我们可以根据上述语法片段来创建我们自己的文件模板,比如项目中自定义的 api 文件等

标签: none

添加新评论