emmet前端模板

時間  2019-12-01
標籤 emmet 前端 模板 简体版
原文   原文鏈接

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

"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，myalerthtml

\        '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>",
\        },
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程