vscode vue自定义代码片段snippets

打开编辑器>文件>首选项>用户代码片段>输入vue>选中vue(其他语言类似)
以下是我个人的代码片段，现把这份高效且规范的vue模板献给各位前端队员
祝大家0error 0waring

• 用法prefix里面的vue-components

  
  Kapture 2020-08-18 at 17.16.12.gif

{
    // 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-components": {
        "prefix": "vue-components",
        "body": [
                "<template>",
                "\t<div class=\"$1\">",
                " ",
                "\t</div>",
                "</template>",
                " ",
                "<script>",
                "\/\/ import { xxx } from '@/xxx';",
                "export default {",
                "\tname: '',",
                "\tmixins: [],",
                "\tprops: {",
                "\t\tprop: {",
                "\t\t\ttype: String,",
                "\t\t\tdefault: '',",
                "\t\t}",
                "\t},",
                "\tcomponents: {",
                "\t},",
                "\tfilter: {",
                "\t},",
                "\tcomputed: {",
                "\t},",
                "\tdata() {",
                "\t\treturn {",
                "\t\t\tparams: ''",  
                "\t\t};",
                "\t},",
                "\twatch: {",
                "\t},",
                "\t\/\/ life cycle start",
                "\tbeforeCreate() {},",
                "\tcreated() {},",
                "\tbeforeMount() {},",
                "\tmounted() {},",
                "\tbeforeDestroy() {},",
                "\tdestroyed() {},",
                "\t\/\/ life cycle end",
                "\tmethods: {",
                "\t},",
                "};",
                "</script>",
                " ",
                "<style lang=\"scss\">",
                " ",
                "</style> "
        ],
        "description": "自定义vue组件代码段"
    }
}