大家在使用vscode编写HTML代码时,都知道快捷方式[!+Tab]快捷键,就可以生成HTML初始化模板,但是都是固定的,而且有的朋友使用[!+Tab]快捷键无法生成html骨架,所以今天教大家如何自定义HTML模板!


首先找到vscode文件目录

方法一:
这里建议大家把鼠标放到vscode图标上单击右键,打开文件所在位置!
方法二:
去电脑任意文件夹地址栏输入以下地址:

C:\Users\ASUS\AppData\Roaming\Code\User\snippets

第二步找到文件夹下的html.json文件

如果在上面的目录里没有html.json文件夹,那大家就新建一个名字为html的txt文件,然后把后缀改成json即可!


第三步在html.json文件里写入以下代码

{

  "Print to console": {
    "prefix": "lygz",
     "body": [
        "<!DOCTYPE html>",
        "<html lang=\"zh-cn\">",
        "<head>",
        "\t<meta charset='UTF-8'>",
        "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
        "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
        "\t<title>Document</title>",
        "\t<!--CSS样式部分-->",
        "\t<style type=\"text/css\">",
        "\t</style>\n",
        "</head>",
        "<body>",
        "\t",
        "</body>",
        "\t<!--JS部分-->",
        "<script type='text/javascript'>",
                     "\t",
                    "</script>",
                    "</html>"
     ],
     "description": "Log output to console"
 } 
 }

注意事项

上方代码中的"prefix": "lygz",这里的 lygz 是指快捷键,当你使用vscode打开任何html文件,然后在里面输入lygz然后回车即可生成HTML模板!如下图所示!

当输入 lygz 时!

输入lygz+回车


当按下回车键效果如下

自动生成



版权声明 注意本站发布的文章及教程仅限用于学习和研究目的.请勿用于商业或违法用途,否则后果请用户自负。本站所有资源不带技术支持,下载资源请24小时内删除,如用于违法用途,或者商业用途,一律使用者承担,本站不承担任何责任!
本站资源多为网络收集,如涉及版权问题请及时与站长联系邮箱:lygz030110@163.com,我们会在第一时间内删除资源。
最后修改:2022 年 02 月 23 日 03 : 40 PM
✯页面加载时长:12 ms
如果觉得我的文章对你有用,请随意赞赏!