提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

由于最近一直写vue代码,对于手敲文件模板代码深感麻烦,于是就思考有没有类似html一样输入一个!就能自动生成一些模板代码呢?最后找到了代码片段这么一个功能,特此记录。


一、创建代码片段?

1.1 打开设置=》配置用户代码片段

在这里插入图片描述

1.2 新建代码片段

  • 可选全局也可选项目内
    在这里插入图片描述

1.3 输入代码片段文件名称

在这里插入图片描述

1.4 配置代码

  • 将下图代码替换为vue3.2的模板代码
    在这里插入图片描述

  • vue3.2模板代码片段

{
  "Print to vue3.2": {
  "prefix": "vue3.2",
  "body": [
    "<template>",
    "  <div class=\"wrapper\">",
    "    hello${1}",
    "  </div>",
    "</template>\n",
    "<script setup lang=\"ts\">${2}",
    "</script>\n",
    "<style scoped>\n${3}",
    "</style>",
  ],
  "description": "vue3.2 output to vue3.2模板"
  }
}

1.5 测试

  • 新建一个.vue文件,输入vue3.2,右侧就会出来定义的模板片段,此时回车或者tab即可快速生成模板
    在这里插入图片描述

1.6 代码片段语法说明

prefix      :代码片段名字,就是创建这个片段的指令。
body        :你想在页面上输出啥就往这里面加啥,不过得按规矩来哦。   
${数字}    	:生成代码后光标的位置,1表示光标开始的序号,按住tab键可切换光标位置。
\n          :换行符。
\           :转义符号。
''          :用来控制代码的缩进。
description :描述,输入创建指令后编辑器显示出提示信息。

1.7 一些常用的代码片段,以供参考

{
  "Print to vue2.0": {
  "prefix": "vue2.0",
  "body": [
    "<template>",
    "  <div class=\"wrapper\">",
    "    hello${1}",
    "  </div>",
    "</template>\n",
    "<script>",
    "export default {",
    "  name:\"\",",
    "  components: {},",
    "  data() {",
    "    return {\n${2}",
    "    }",
    "  },",
    "  filters: {\n${3}",
    "  },",
    "  computed: {\n${4}",
    "  },",
    "  watch: {\n${5}",
    "  },",
    "  created () {\n${6}",
    "  },",
    "  mounted () {\n${7}",
    "  },",
    "  methods: {\n${8}",
    "  }",
    "}",
    "</script>\n",
    "<style scoped>\n${9}",
    "</style>",
  ],
  "description": "vue2.0 output to vue2.0模板"
  }
}
{
  "Print to vue3.0": {
  "prefix": "vue3.0",
  "body": [
    "<template>",
    "  <div class=\"wrapper\">",
    "    hello${1}",
    "  </div>",
    "</template>\n",
    "<script lang=\"ts\">",
    "export default {",
    "  name:\"\",",
    "  setup() {",
    "    return {\n${2}",
    "    }",
    "  },",
    "}",
    "</script>\n",
    "<style scoped>\n${3}",
    "</style>",
  ],
  "description": "vue3.0 output to vue3.0模板"
  }
}

二、删除代码片段文件

  • 由于已经创建的代码片段文件会存在本地,因此不能在vscode中直接删除,需要按照以下方法才能删除

1.1.打开显示导航痕迹

在这里插入图片描述

1.2 在目录下找到需要删除的文件

  • 直接删除即可

在这里插入图片描述


总结

本篇文章主要介绍了vscode中代码片段的创建、使用及删除的方法。下次再见

Logo

前往低代码交流专区

更多推荐