vscode高效之代码片段

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

---

前言

由于最近一直写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中代码片段的创建、使用及删除的方法。下次再见