vscode自定义HTML页面自动生成格式

天天Lotay

发布于 2022-12-02 09:40:38

6600

发布于 2022-12-02 09:40:38

文章被收录于专栏：嵌入式音视频

除了输入“！”和“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"
    // 	],
    "Print out HTMLMoudules": {
        "prefix": "hm",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"cn\">",
            "<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\">",
            "   <script src=\"https://cdn.bootcss.com/vue/2.6.10/vue.js\"></script>",
            "   <title>Document</title>",
            "   <style>",
            "   ",
            "   </style>",
            "</head>",
            "<body>",
            "   $3",
            "   <script>",
            "   ",
            "   </script>",
            "</body>",
            "</html>"
        ],
        "description": "生成带Vue的HTML模板"
    }

    // 	"description": "Log output to console"
    // }

}

ok,以后建html输入"hm"就可以快速输入了