Specific steps

  1. File –> Preferences –> User fragments

Enter vue in the input box (you can also enter other files if you want to set templates for other files)

  1. Select the Vue (Vue)

The editor automatically opens a vue.json file

  1. Example of how to create your own template requirements in “Print to Console “:
{
    // 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": "log",
    // 	"body": [
    // 		"console.log('$1');",
    // 		"$2"
    // 	],
    // 	"description": "Log output to console"
    // }
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  $0",
            "</template>\n",
            "<script>\n",
            "export default {",
            "  name: '',\n",
            "  components: {},\n",
            "  data() {",
            "    return {}",
            "  },\n",
            "  created() {},\n",
            "  methods: {},\n",
            "}\n",
            "</script>\n",
            "<style lang='scss' scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    }
}
Copy the code

Prefix: indicates the command to generate a custom template (vue). Body: indicates the custom template. Each element in the array $0 indicates the cursor position after the template is generated

  1. Save the vue.json file

  2. Create a new vue file, type vue, and press Enter to generate the custom template you just set up

Final template:

So the question is what if I want to set up multiple custom templates?

Vue. Json is set to create a new template, as follows:

{
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  $0",
            "</template>\n",
            "<script>\n",
            "export default {",
            "  name: '',\n",
            "  components: {},\n",
            "  data() {",
            "    return {}",
            "  },\n",
            "  created() {},\n",
            "  methods: {},\n",
            "}\n",
            "</script>\n",
            "<style lang='scss' scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    },

    "vue2": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  $0",
            "</template>\n",
            "<script>\n",
            "export default {",
            "  name: '',\n",
            "  props: {},\n",
            "  data() {",
            "    return {}",
            "  },\n",
            "  created() {},\n",
            "  methods: {},\n",
            "}\n",
            "</script>\n",
            "<style lang='scss' scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    },
}
Copy the code