# VScode Visual Studio Code 代码片段

本文旨在记录 Visual Studio Code 代码编辑器，快速生成自定义代码片段的使用方式。并以vue2组件和vue3组件为例进行使用。

1. 配置

• 在vscode页 Ctrl + Shift + P 打开配置项，输入 spnippets, 选择 代码片段：配置用户代码片段。或者 文件 -> 首选项 -> 配置代码片段。如下图所示。 open set.png

• 在下一句弹窗中输入 vue.json。选择 vue.json。这里用默认的vue.json作为vue2版本的代码片段文件

  vue2.png

• 在打开的配置文件中配置如下，vue2代码片段

  {
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "Print to console": {
        "prefix": "vue2",
        "body": [
            "<template>",
            
            "</template>",
            "",
            "<script>",
            "export default {",
            "  components: {},",
            "  props: {},",
            "  data() {",
            "    return {",
            "    };",
            "  },",
            "  watch: {},",
            "  computed: {},",
            "  methods: {},",
            "  created() {},",
            "  mounted() {}",
            "};",
            "</script>",
            "<style style=\"less\" scoped>",
            "</style>"
  
        ],
        "description": "Log output to console"
    }
  }
  
  

• 新增一个自定义模板用来做vue3组件代码片段

  • 新增代码片段 vue3.png

• 在新增的配置页面输入如下代码，生成vue3代码片段

  {
      // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
      // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
      // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
      // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
      // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
      // Placeholders with the same ids are connected.
      // Example:
      "Print to console": {
          "scope": "vue,javascript,typescript",
          "prefix": "vue3",
          "body": [
              "<script setup lang='ts'>",
              "  import { ref } from 'vue'",
              "  import type { Ref } from 'vue'",
              "  const msg:Ref<string> = ref('hello vue3 component')",
              "</script>",
              "<template>",
              "  <div>{{ msg }}</div>",
              "</template>",
              "<style lang=\"less\" scoped>",
              "</style>",
              ""
          ],
          "description": "Log output to console"
      }
  }
  
  

2. 使用

• 在vue项目中， 在 .vue组件中， 输入 vue2/vue3然后 tab 键 即可自动填入 上面配置的 代码片段