Vscode自定義用戶模板

Vscode配置路徑：

中文版：

文件-->首選項-->用戶片段

英文版：

file-->preferences-->user snippets

 

選擇相應的文件類型，此處以vue為例

 

 然后進入到 vue.json配置文件。配置內容如下：

{
    // 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-temp": {
        "prefix": "vue-tem",
        "body": [
            "<template>",
            "  <div class=\"\">",
            "  </div>",
            "</template>",
            "<script>",
            "import {testdata} from '@/api/api';",
            "export default {",
            "  data() {",
            "    return {",
            "  }",
            "},",
            "  methods: {",
            "    init(){",

            "  }",
            "},",
            "  components: {},",
            "  created() {},",
            "  mounted() {",
            "    this.init()",
            "  }",
            "}",
            "</script>",
            "<style lang=\"scss\">",

            "</style>",
        ],
        "description": "快速創建bue模板"
    }
}

保存后，新建一個 a.vue文件，輸入 vue- 即可出現選擇模板，選擇后即可：

 

 備注：

"vue-temp" 

是模板名字。

"prefix": ""這里規定的是觸發模板的關鍵詞，我這里規定觸發詞為vue。