VsCode自定义代码片段

为了很快建立vue.js刚开始的框架，vscode支持自定义用户代码片段

第一步：

打开vscode-->点击左上角文件-->点击首选项-->点击用户片段-->找到html的片段

第二步：

到此你会打开一个名叫html.json的文件
官方示例文档

    // Place your snippets for html 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"
    // }

然后把下面自定义的代码放上去，大家可以自行更改

{
    "vh":{
        "prefix": "vh",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "    <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\"></div>",
            "    <script>",
            "        var vm=new Vue({",
            "           el:'#app',", 
            "           data:{},",
            "           methods:{}",

            "        });",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "vh components"
    }
}

保存，然后在你的html文件输入vh，点回车，你就会发现代码全部帮你写好了！

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »