Implementation of vscode custom vue template

Use the vscode editor to create a vue template, so you no longer have to repeat certain code snippets every time you create a new vue file. Enter vue and press Enter to generate customized vue file content. It is very easy to use and greatly improves development efficiency.

Open vscode and select File > Preferences > User Snippets. Then enter vue in the input box that appears and press Enter. A file called vue.json is opened. As shown in the figure:

The corresponding template content has been added to the image content. To explain, the prefix field represents the custom instruction, which is the vue tag we enter in the vue file. Press Enter to generate the custom file content; the body contains our custom content. \t is a tab character, I mainly use it for formatting code

After creating the vue template, you can create files through vue! As shown below:

Code content:

 "Print to console": {
 "prefix": "vue",
 "body": [
 "<!-- $0 -->",
 "<template>",
  "\t<div>",
  "",
  "\t</div>",
 "</template>",
 "",
 "<script>",
 "export default {",
    "\tname: '',",
 "\tcomponents: {},",
 "\tdata () {",
 "\treturn {",
 "\t}",
 "\t},",
 "\tmounted () {},",
 "\tmethods: {}",
 "}",
 "</script>",
 "<style scoped='scss' scoped>",
 "</style>"
 ],
 "description": "vue output to vue-template"
  }

At this point, have you discovered that vue template is a powerful tool for development? It works so well! ! ! ! !

This is the end of this article about the implementation of vscode custom vue template. For more relevant vscode custom vue template content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!