Visual Studio Code自定义Html自动补全模板、Vue自动引入模板

步骤:

  • 选择 用户代码片段:
  • 选择 html.json 文件:
  • 粘贴下面代码覆盖json内的内容:
{
    "Html引入Vue的js文件": {
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">\n",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Vue快速上手</title>",
            "\t<!-- 生产环境版本,优化了尺寸和速度 -->",
            "\t<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>",
            "</head>\n",
            "<body>",
            "\t<div id=\"app\">$1</div>\n",
            "\t<script>",
            "\t\tvar vm = new Vue({",
            "\t\t\tel: '#app',",
            "\t\t\tdata: {},",
            "\t\t\tmethods: {}",
            "\t\t});",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "快速创建在html5编写的vue模板,输入vue再按table键有惊喜!"
    },
    "Html乱七八糟的个人模板": {
        "prefix": "html",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"keywords\" content=\"限制在36个字,英文逗号分开,网站关键词\">",
            "\t<meta name=\"description\" content=\"限制在76个字:网站的相关描述\">",
            "\t<meta name=\"author\" content=\"告诉搜索机器人网页的作者\">",
            "\t<meta name=\"copyright\" content=\"幻生个人版权所有\">",
            "\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\">",
            "\t<!-- 强制IE使用最新内核 -->",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge,chrome=1\">",
            "\t<!-- 默认chrome内核 -->",
            "\t<meta name=\"renderer\" content=\"webkit\">",
            "\t<!-- uc强制竖屏 -->",
            "\t<meta name=\"screen-orientation\" content=\"portrait\">",
            "\t<!-- QQ强制竖屏 -->",
            "\t<meta name=\"x5-orientation\" content=\"portrait\">",
            "\t<!-- UC强制全屏 -->",
            "\t<meta name=\"full-screen\" content=\"yes\">",
            "\t<!-- QQ强制全屏 -->",
            "\t<meta name=\"x5-fullscreen\" content=\"true\">",
            "\t<!-- UC应用模式 -->",
            "\t<meta name=\"browsermode\" content=\"application\">",
            "\t<!-- QQ应用模式 -->",
            "\t<meta name=\"x5-page-mode\" content=\"app\">",
            "\t<!-- 启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->",
            "\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
            "\t<!-- 添加到主屏后的标题(iOS 6 新增) -->",
            "\t<meta name=\"apple-mobile-web-app-title\" content=\"APP标题\">",
            "\t<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->",
            "\t<meta name=\"HandheldFriendly\" content=\"true\">",
            "\t<!-- 告诉百度不得对资源进行转换或转变 -->",
            "\t<meta http-equiv=\"Cache-Control\" content=\"no-transform\">",
            "\t<!-- 屏蔽百度转码 -->",
            "\t<meta http-equiv=\"Cache-Control\" content=\"no-siteapp\">",
            "\t<!-- 告诉百度你的页面时适配手机和pc的,不用他帮忙转 -->",
            "\t<meta name=\"applicable-device\" content=\"pc,mobile\">",
            "\t<!-- 搜索引擎 文件将被检索,且页面上的链接可以被查询 -->",
            "\t<meta name=\"robots\" content=\"all\" />",
            "\t<title>幻生自定义网页模板</title>",
            "\t<!-- <meta http-equiv=\"expires\" content=\"Fri,12 Jan 2001 15:15:15 GMT\">\t一旦网页过期必须在服务器上重新刷新而不能通过缓存获取网页。时间必须是GMT格式 -->",
            "\t<!-- <meta http-equiv=\"pragma\" content=\"no-cache\">\t不从缓存获取页面,无法脱机工作。 -->",
            "\t<!-- <meta http-equiv=\"refresh\" content=\"1; url=https://www.baidu.com\">\t等待一定时间自动刷新或跳转到其他url -->",
            "\t<!-- <meta http-equiv=\"Window-target\" content=\"_top\" />\t防止别人在框架里调用你的页面 -->",
            "\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/index.css\" />",
            "\t<link rel=\"shortcut icon\" type=\"image/ico\" href=\"favicon.ico\"/>",   
            "\t<script src=\"index.js\"></script>",
            "</head>",
            "<body>",
            "\t<div id=\"app\">\n\t\t$1\n</div>",
            "\t<script>",
            "\t\twindow.onload = function(){",
            "\t\t\talert(\"页面加载完成====》onload\");",
            "\t\t}",
            "\t</script>",
            "</body>",
            "</html>"
        ],
        "description": "Html乱搞模板幻生自定义,输入html再按table键有惊喜!"
    },
    "Html5简洁个人模板": {
        "prefix": "H5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"keywords\" content=\"限制在36个字,英文逗号分开,网站关键词\">",
            "\t<meta name=\"description\" content=\"限制在76个字:网站的相关描述\">",
            "\t<meta name=\"author\" content=\"告诉搜索机器人网页的作者\">",
            "\t<meta name=\"copyright\" content=\"幻生个人版权所有\">",
            "\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge,chrome=1\">",
            "\t<meta name=\"renderer\" content=\"webkit\">",
            "\t<meta name=\"robots\" content=\"all\" />",
            "\t<title>幻生自定义网页模板</title>",
            "\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/index.css\" />",
            "\t<link rel=\"shortcut icon\" type=\"image/ico\" href=\"favicon.ico\"/>",   
            "\t<script src=\"index.js\"></script>",
            "</head>",
            "<body>",
            "\t<div id=\"app\">\n\t\t$1\n</div>",
            "\t<script>",
            "\t\twindow.onload = function(){",
            "\t\t\talert(\"页面加载完成====》onload\");",
            "\t\t}",
            "\t</script>",
            "</body>",
            "</html>"
        ],
        "description": "Html5模板幻生自定义,输入H5再按table键有惊喜!"
    }
}

你可以在Html文件里敲上 html  或者 vue 再按下table键,惊喜来了!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页