emmet前端模板

https://github.com/emmetio/emmet/blob/master/lib/snippets.json

"emmet.extensionsPath": "D:\\myTools\\vscode",  vscode 下面有snippets.json

下面是 vscode的 snippets.json 文件

{

  "variables": {

    "lang": "en",

    "locale": "en-US",

    "charset": "UTF-8",

    "indentation": "\t",

    "newline": "\n"

  },

  "html": {

    "filters": "html",

    "profile": "html",

    "snippets": {

      "!!!": "<!DOCTYPE html>",

      "!!!4t": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">",

      "!!!4s": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">",

      "!!!xt": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",

      "!!!xs": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">",

      "!!!xxs": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">",

      "c": "<!-- |${child} -->",

      "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->",

      "cc:ie": "<!--[if IE]>\n\t${child}|\n<![endif]-->",

      "cc:noie": "<!--[if !IE]><!-->\n\t${child}|\n<!--<![endif]-->",

      "boilerplate": "<!--[if lt IE 7]><html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"><![endif]-->\n<!--[if IE 7]><html class=\"no-js lt-ie9 lt-ie8\"><![endif]-->\n<!--[if IE 8]><html class=\"no-js lt-ie9\"><![endif]-->\n<!--[if gt IE 8]><!--><html class=\"no-js\"><!--<![endif]-->\n",

      "myfavicon": "<link rel=\"shortcut icon\" type=\"image/ico\" href=\"\" />",

      "myviewport": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <!--移动端视图-->",

      "360compat": "<meta name=\"renderer\" content=\"webkit\" />",

      "mykeywords": "<meta name=\"keywords\" content=\"ajanuw\" /> <!--关键词-->",

      "mydesc": "<meta name=\"description\" content=\"ajanuw, b,c\" /> <!--网站内容描述-->",

      "meta0": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />",

      "meta1": "<meta http-equiv=\"Pragma\" content=\"no-cache\" /> <!--禁止浏览器从本地计算机的缓存中访问页面内容-->",

      "meta2": "<meta http-equiv=\"Window-target\" content=\"_top\" /> <!--强制页面在当前窗口以独立页面显示-->",

      "meta3": "<meta http-equiv=\"content-Type\" content=\"text/html;charset=utf-8\" />  <!--显示字符集的设定-->",

      "meta4": "<meta http-equiv=\"Content-Language\" content=\"zh-cn\"/>   <!--显示语言的设定-->",

      "meta5": "<meta http-equiv=\"imagetoolbar\" content=\"false\" />  <!--指定是否显示图片工具栏，false不显示,true显示-->",

      "meta6": "<link rel=\"icon\" sizes=\"192x192\" href='https://i.screenshot.net/p/33oq6u0?a1996686e62a47ce9b2728ac831e58d2' />",

      "meta7": "<link rel=\"apple-touch-icon\" href='https://i.screenshot.net/p/33oq6u0?a1996686e62a47ce9b2728ac831e58d2' />",

      "meta8": "<meta name=\"msapplication-square310x310logo\" content='https://i.screenshot.net/p/33oq6u0?a1996686e62a47ce9b2728ac831e58d2' />",

      "meta9": "<meta name=\"theme-color\" content=\"#ff4081\" />",

      "meta10": "<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\" />   <!-- Chrome, Firefox OS and Opera -->",

      "meta11": "<link rel=\"apple-touch-startup-image\" href='https://i.screenshot.net/p/33oq6u0?a1996686e62a47ce9b2728ac831e58d2' />",

      "react": "<script src='https://unpkg.com/react@latest/umd/react.development.js' crossorigin='anonymous'></script> <script src='https://unpkg.com/react-dom@latest/umd/react-dom.development.js' crossorigin='anonymous'></script> <script src='https://unpkg.com/@material-ui/core/umd/material-ui.development.js' crossorigin='anonymous'></script> <script src='https://unpkg.com/babel-standalone@latest/babel.min.js' crossorigin='anonymous'></script><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' /><link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>",

      "metas": "myfavicon+myviewport+360compat+mykeywords+mydesc+meta0+meta1+meta2+meta3+meta4+meta5+meta6+meta7+meta8+meta9+meta10+meta11+react\n",

      "ajanuw": "{<!DOCTYPE html>}+{<!--[if lt IE 7]><html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"><![endif]-->\n<!--[if IE 7]><html class=\"no-js lt-ie9 lt-ie8\"><![endif]-->\n<!--[if IE 8]><html class=\"no-js lt-ie9\"><![endif]-->\n<!--[if gt IE 8]><!--><html class=\"no-js\"><!--<![endif]-->}+html[lang=en]>(head>meta[charset='utf-8']+title{${1:ajanuw}}+metas)+body>{\n <!--[if lt IE 8]>  <h3>请升级你的浏览器，或更换主浏览器！！!</h3>  <![endif]-->}+div#root"

    }

  }

}

autoload/emmet.vim配置模板

需要配合 !使用，关键命令 myheade，mybody，myalert

\        'snippets': {

\            '!': "html:5",

\            '!!!': "<!DOCTYPE html>\n",

\            '!!!4t':  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n",

\            '!!!4s':  "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n",

\            '!!!xt':  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n",

\            '!!!xs':  "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n",

\            '!!!xxs': "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">\n",

\            'c': "<!-- |${child} -->",

\            'cc:ie6': "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->",

\            'cc:ie': "<!--[if IE]>\n\t${child}|\n<![endif]-->",

\            'cc:noie': "<!--[if !IE]><!-->\n\t${child}|\n<!--<![endif]-->",

\            "boilerplate": "<!--[if lt IE 7]><html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"><![endif]-->\n<!--[if IE 7]><html class=\"no-js lt-ie9 lt-ie8\"><![endif]-->\n<!--[if IE 8]><html class=\"no-js lt-ie9\"><![endif]-->\n<!--[if gt IE 8]><!--><html class=\"no-js\"><!--<![endif]-->\n",

\            "myfavicon": "<link rel=\"shortcut icon\" type=\"image/ico\" href=\"\" />",

\            "myviewport": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <!--移动端视图-->\n",

\            "mykeywords": "<meta name=\"keywords\" content=\"ajanuw\" /> <!--关键词-->\n",

\            "mydesc": "<meta name=\"description\" content=\"ajanuw, b,c\" /> <!--网站内容描述-->\n",

\            "meta0": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",

\            "meta1": "<meta http-equiv=\"Pragma\" content=\"no-cache\" /> <!--禁止浏览器从本地计算机的缓存中访问页面内容-->\n",

\            "meta2": "<meta http-equiv=\"Window-target\" content=\"_top\" /> <!--强制页面在当前窗口以独立页面显示-->\n",

\            "meta3": "<meta http-equiv=\"content-Type\" content=\"text/html;charset=utf-8\" />  <!--显示字符集的设定-->\n",

\            "meta4": "<meta http-equiv=\"Content-Language\" content=\"zh-cn\"/>   <!--显示语言的设定-->\n",

\            "meta5": "<meta http-equiv=\"imagetoolbar\" content=\"false\" />  <!--指定是否显示图片工具栏，false不显示,true显示-->\n",

\            "meta6": "<link rel=\"icon\" sizes=\"192x192\" href=\"https://pic.cnblogs.com/avatar/1053296/20171128213246.png\" />\n",

\            "meta7": "<link rel=\"apple-touch-icon\" href=\"https://pic.cnblogs.com/avatar/1053296/20171128213246.png\" />\n",

\            "meta8": "<meta name=\"msapplication-square310x310logo\" content=\"https://pic.cnblogs.com/avatar/1053296/20171128213246.png\" />\n",

\            "meta9": "<meta name=\"theme-color\" content=\"#ff4081\" />\n",

\            "meta10": "<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\" />   <!-- Chrome, Firefox OS and Opera -->\n",

\            "meta11": "<link rel=\"apple-touch-startup-image\" href=\"https://pic.cnblogs.com/avatar/1053296/20171128213246.png\" />\n",

\            "ons_css":"<link href=\"https://cdn.bootcss.com/onsen/2.10.0/css/onsenui.css\" rel=\"stylesheet\">\n",

\            "ons_component":"<link href=\"https://cdn.bootcss.com/onsen/2.10.0/css/dark-onsen-css-components.css\" rel=\"stylesheet\">\n",

\            "ons_js":"<script src=\"https://cdn.bootcss.com/onsen/2.10.0/js/onsenui.min.js\"></script>\n",

\            "ons": "ons_css+ons_component+ons_js\n",

\            "icons": "<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n",

\            "bt_mdcss": "<link rel=\"stylesheet\" href=\"https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css\" integrity=\"sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX\" crossorigin=\"anonymous\">\n",

\            "vue": "<script src=\"https://cdn.bootcss.com/vue/2.5.16/vue.js\"></script>\n",

\            "vueRouter": "<script src=\"https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js\"></script>\n",

\            "jq_slim": "<script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></script>\n",

\            "popper": "<script src=\"https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js\" integrity=\"sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U\" crossorigin=\"anonymous\"></script>\n",

\            "bt_mdjs": "<script src=\"https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js\" integrity=\"sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9\" crossorigin=\"anonymous\"></script>\n",

\            "lodash": "<script src=\"https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js\"></script>\n",

\            "json5": "<script src=\"https://cdn.bootcss.com/json5/0.5.1/json5.min.js\"></script>\n",

\            "rxjs": "<script src=\"https://cdn.bootcss.com/rxjs/6.1.0/rxjs.umd.min.js\"></script>\n",

\            "metas": "myfavicon+myviewport+mykeywords+mydesc+meta0+meta1+meta2+meta3+meta4+meta5+meta6+meta7+meta8+meta9+meta10+meta11 \n",

\            "mydoc": "{<!--[if lt IE 7]><html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"><![endif]-->\n<!--[if IE 7]><html class=\"no-js lt-ie9 lt-ie8\"><![endif]-->\n<!--[if IE 8]><html class=\"no-js lt-ie9\"><![endif]-->\n<!--[if gt IE 8]><!--><html class=\"no-js\"><!--<![endif]-->}+html[lang='zh-cmn-Hans']>(head>meta[charset='utf-8']+title{${1:ajanuw}}+metas+icons+bt_mdcss)+body>{\n <!--[if lt IE 8]>  <h3>请升级你的浏览器，或更换主浏览器！！!</h3>  <![endif]-->}+vue+lodash+rxjs\n",

\            "ajanuw": "mydoc",

\            'html:4t': "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n"

\                    ."<html lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\">\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\            'html:4s': "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n"

\                    ."<html lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\">\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\            'html:xt': "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n"

\                    ."<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\" />\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\            'html:xs': "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n"

\                    ."<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\" />\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\            'html:xxs': "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">\n"

\                    ."<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\" />\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\            'html:5': "<!DOCTYPE html>\n"

\                    ."<html lang=\"${lang}\">\n"

\                    ."<head>\n"

\                    ."\t<meta charset=\"${charset}\">\n"

\                    ."\t<title></title>\n"

\                    ."</head>\n"

\                    ."<body>\n\t${child}|\n</body>\n"

\                    ."</html>",

\        },

emmet前端模板的更多相关文章

SS - DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...
前端模板Juicer
Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC). 除此之外,它还可以在 Node.js 环境中运行. 用 ...
DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...
前端模板artTemplate，handlerbars的使用心得
写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故. 1,artTemplate 优点: 1,一般web端用得较多,执行速度通常是 Mustache ...
Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
JST(JavaScript Trimpath)前端模板引擎简介
JST(JavaScript Trimpath)前端模板引擎简介及应用今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...
Yii框架学习笔记（二）将html前端模板整合到框架中
选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...
前端模板文件化jQuery插件 $.loadTemplates
工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...
有意思，搞了这么多年WEB，还是第一次知道这个东西关键字前端模板
有意思,搞了这么多年WEB,还是第一次知道这个东西关键字前端模板 jquery-tmpl handlebars 项目中用的是handlebars jqtmpl配置不成功不做记载百度吧小媳妇 ...

随机推荐

后台任务hangfire
Installation¶ There are a couple of packages for Hangfire available on NuGet. To install Hangfire in ...
[转]Java NIO 系列教程
Java NIO提供了与标准IO不同的IO工作方式: Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO是基于通道(Channel)和缓冲区(B ...
LaTeX语法笔记
1.单词之间用空格分隔,段落之间用一整空行分隔,但是,如果在多输入空格或者空行也没有用处,系统还是把它当做一个空格或空行. 2.双引号:左侧用``(键盘左上角那个符号),右侧用'',即: ``'' , ...
Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本项目版本记录.1 2. Easyui 的翻页组件2 ...
常用七种排序的python实现
1 算法复杂度算法复杂度分为时间复杂度和空间复杂度.其中, 时间复杂度是指执行算法所需要的计算工作量:而空间复杂度是指执行这个算法所需要的内存空间. 算法的复杂性体现在运行该算法时的计算机所需资源的 ...
Python3解《剑指》问题：“遇到奇数移至最前，遇到偶数移至最后”
[本文出自天外归云的博客园] 看到一个<剑指Offer>上的问题:“遇到奇数移至最前,遇到偶数移至最后.” 我做了两种解法.一种是利用python内置函数,移动过程用了插入法,很简单.另一 ...
【emWin】例程二十：窗口对象——Dropdown
简介: DROPDOWN 小工具用于从具有若干栏的列表中选择一个元素,它以非打开状态显示当前选择的项目.如果用户打开DROPDOWN 小工具,就会出现一个选择新项目的LISTBOX. 触摸校准(上电可 ...
Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
Java知多少（71）文件与目录管理
目录是管理文件的特殊机制,同类文件保存在同一个目录下不仅可以简化文件管理,而且还可以提高工作效率.Java 语言在 java.io 包中定义了一个 File 类专门用来管理磁盘文件和目录. 每个 Fi ...
Java知多少（99）Graphics2D类的绘图方法
Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...

emmet前端模板

下面是 vscode的 snippets.json 文件

autoload/emmet.vim配置模板

emmet前端模板的更多相关文章

随机推荐

热门专题