Vscode automatically generates vue file templates

Just type “vue” and hit Enter to generate your configured file!

  1. Click “File –” Preferences — “User snippet/user code snippet, enter” vue.json “in the input field (select Global), or create a new one

  2. Enter the following in the folder:

    {// Place your global 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": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "prefix": "vue", "body": [" <! -- ", "function: ${1: functional description}", "the author: not apologise program", "email:", "time: $CURRENT_YEAR year $CURRENT_MONTH month $CURRENT_DATE Date $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND", "Version: V1.0 "," Modify record: ", "Modified content: ", "- >", "< template >", "< div > < / div >", "< / template >", ""," < script > ", "/ / import import component tools", "export default {". "The data () {return", "{}", "}, ", "/ / component method", "the methods: {},", "/ / calculation properties", "computed: {},", "/ / listener," "watch: {},", "// Import components need to declare "," components: {},", "}", "</script> ", "", "<!-- Add \"scoped\" attribute to limit CSS to this component only -->", "<style scoped>", "", "</style>", "$2" ], "description": "Log output to console" } }Copy the code

  3. Type vue in the vUE file to generate the code.