美文网首页
vscode vue自定义代码片段snippets

vscode vue自定义代码片段snippets

作者: louiebb | 来源:发表于2020-08-18 17:11 被阅读0次

    打开编辑器>文件>首选项>用户代码片段>输入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组件代码段"
        }
    }
    

    相关文章

      网友评论

          本文标题:vscode vue自定义代码片段snippets

          本文链接:https://www.haomeiwen.com/subject/asykjktx.html