大家好,我是yangyang.今天也是有缘的一天,今天推荐一个减少重复工作的技巧.

vscode配置代码片段

操作流程: 点击左下角设置按钮->点击代码片段->新建全局代码片段文件->输入自定义的名称

以Vue2、Vue3举例

{
"Print to vue2 template": {
    "prefix": "vue2-template",
    "body": [
      "<template>",
      "    <div>
",
      "    </div>",
      "</template>",
      "<script>",
      "export default {",
      "   name: 'TemplateName',",
      "   data() {",
      "      return {",
      "      }",
      "   },",
      "   methods: {",
      "   },",
      "}",
      "</script>",
      "<style lang="less" scoped>
",
      "</style>",
      "$2"
    ],
    "description": "yangyang vue2 template"
  },
  "Print to  vue3 template": {
    "prefix": "vue3-template",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
    "",
      "<script setup lang='ts'>",
      "import { ref, reactive } from 'vue'",
      "",
      "</script>",
      "",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>"
    ],
    "description": "yangyang vue3 template"
  }
}

使用代码片段

在新建的代码文件里输入vue(当然根据你定义的名称来输入),编辑器自动匹配到你定义在代码片段里的prefix的内容,最后回车完成重复代码使用

<template>
    <div>

    </div>
</template>
<script>
export default {
   name: 'TemplateName',
   data() {
      return {
      }
   },
   methods: {
   },
}
</script>
<style lang="less" scoped>

</style>

massCode 免费好用的代码片段工具

顺道也推荐一个工具,它是一款面向开发人员的免费开源代码片段管理器。它可以协助您创建和组织自己的个人片段集合并快速访问它。

总结

今天分享就到这了,有缘再见