vscode 自定义代码片段

当我们在用 vscode 每个框架都有自己特定的代码，我们不得不每次都要敲，vscode 就支持自定义代码片段，已 vue 自动生成代码片段为例，主要步骤如下

1. 选择用户代码片段

选择用户代码片段

2. 选择你要选择的模本文件，我这里编辑的是 vue.json

选择末班文件类型

3. 编辑自定义代码文件，这时我们会发现一段注释，这就是使用方法，他怎么说我们怎么做就行了，主要内容都放在body中,

 // 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 的自定义代码片段，以供参考，当然，如有别的需求，自己可以自行添加

自定义代码片段

这里贴上源码以供复制使用
"vue template":{
        "prefix": "vue template",
        "body": [
            "<template>",
            "\t<div class='container'>",
            "",
            "\t</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "\tcomponents: {",
                "",
            "\t},",
            "\tcomputed: {",
                "",
            "\t},",
            "\tdata() {",
            "\t\treturn{",
            "",
            "\t\t}",
            "\t},",
            "\twatch: {",
                "",
                "\t},",
            "\tmethods: {",
            "",
            "\t},",
            "\tmounted() {",
            "",
            "\t},",
            "\tprops: {",
            "",
            "\t},",
            "\tdestroyed() {",
                "",
                "\t},",
            "}",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "",
            "</style>",
            "$0"
        ],
        "description": "create a vue template"
    }

更多详细知识介绍请访问我的个人主页