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

2022-12-02 09:40:38 浏览数 (1)

除了输入“!”和“html”的另外一种可自定义页面的方法,懒人必备!

左下角的设置图标 输入html.json

它最初长这样:

我们把它改成这样

代码语言:javascript复制
{
    // 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"就可以快速输入了

在json文件中填写配置代码,即可自定义HTML文件格式。

print to 后面填的是你这个代码块的名字 随便取 符合命名规则就行

prefix 冒号里填的是 在 Intellisense 中选择代码片段时将使用的前缀,即你要打出的快捷键

body 冒号后面填的是你要定义的代码段的完整代码

美元$符号 数字代表光标位置 即你打出代码段后光标所在的位置

description 冒号后面填的是 这个代码段的描述 随便写就行

注:引号后面的是空格 不能直接按tab。在HTML页面中输入hm即可生成

0 人点赞