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

文件模板创建详解

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

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 文件等

文件模板汇总

整理一下常用的文件模板,方便查询使用, vue 的在上面,我就不重复添加了

cml 文件(Chameleon 多端统一框架)

{
    "Print to console": {
            "prefix": "cml",
            "body": [
                    "<template>",
                    "  <view>Hello Chameleon!</view>",
                    "</template>",
                    "",
                    "<script>",
                    "",
                    "class Template   {",
                    "",
                    "  data = {",
                    "  }",
                    "",
                    "  computed = {",
                    "  }",
                    "",
                    "  watch = {",
                    "  }",
                    "",
                    "  methods = {",
                    "  }",
                    "",
                    "  beforeCreate() {",
                    "  }",
                    "",
                    "  created() {",
                    "  }",
                    "",
                    "  beforeMount() {",
                    "  }",
                    "",
                    "  mounted() {",
                    "  }",
                    "",
                    "  beforeDestroy() {",
                    "  }",
                    "",
                    "  destroyed() {",
                    "  }",
                    "",
                    "}",
                    "",
                    "export default new Template();",
                    "</script>",
                    "",
                    "<style lang=\"less\">",
                    "",
                    "</style>",
                    "",
                    "<script cml-type=\"json\">",
                    "{",
                    "  \"base\": {",
                    "    \"usingComponents\": {}",
                    "  },",
                    "  \"wx\": {",
                    "    \"navigationBarTitleText\": \"index\",",
                    "    \"backgroundTextStyle\": \"dark\",",
                    "    \"backgroundColor\": \"#E2E2E2\"",
                    "    ",
                    "  },",
                    "  \"alipay\": {",
                    "    \"defaultTitle\": \"index\",",
                    "    \"pullRefresh\": false,",
                    "    \"allowsBounceVertical\": \"YES\",",
                    "    \"titleBarColor\": \"#ffffff\"",
                    "  },",
                    "  \"baidu\": {",
                    "    \"navigationBarBackgroundColor\": \"#ffffff\",",
                    "    \"navigationBarTextStyle\": \"white\",",
                    "    \"navigationBarTitleText\": \"index\",",
                    "    \"backgroundColor\": \"#ffffff\",",
                    "    \"backgroundTextStyle\": \"dark\",",
                    "    \"enablePullDownRefresh\": false,",
                    "    \"onReachBottomDistance\": 50",
                    "  },",
                    "}",
                    "</script>",
                    "$2"
            ],
            "description": "cml模板"
    }
}

标签: chameleon

添加新评论