随笔- 59 文章- 2 评论- 1 阅读- 99936

vscode如何一键生成代码模板？

1、文件 ---> 首选项 ----> 用户片段 ---> 新建全局代码片段 ----> 新建vue.json

2、粘贴一下代码

{
    // Place your 全局 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": [
            "<template>",
            "    <div class=\"$2\">$5</div>",
            "</template>",
            "",
            "<script>",
            "",
            "export default {",
            "    components: {},",
            "    data() {",
            "        return {",
            "",
            "        };",
            "    },",
            "    computed: {},",
            "    watch: {},",
            "    methods: {},",
            "    created() {},",
            "    mounted() {},",
            "    beforeCreate() {},",
            "    beforeMount() {},",
            "    beforeUpdate() {},",
            "    updated() {},",
            "    beforeDestroy() {},",
            "    destroyed() {},",
            "    activated() {},",
            "    }",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}