SublimeText插件Emmet的自定义模板(转)
在前端界,作为快速生成代码的Emmet插件相当给力。最近在学bootstrap，需要频繁生成html头文件，我就想着自定义模板。国内只有基础教程，只好自己读英文文档了。
Emmet国内基础教程地址：
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://blog.wpjam.com/m/emmet/
读了一些发现一个解决方案，原文是自定义emmet模板。
工具栏打开Preferences -> Package Settings -> Emmet -> Setting - Default菜单(我这里是line 101)，这个是参考
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
// "html": {
// "abbreviations": {
// "example": "<div class='example' title='Custom element example'>"
// }
// }
}
用户配置文件中修改。我们打开Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代码：
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"abbreviations": {
"example": "<div class='example' title='Custom element example'>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}})+body",
"!!": "!!!+mydoc[lang='zh-Hans']"
}
}
}
}
注：
1.example是快捷键，后面是生成的内容
2.引用mydoc的内容 mydoc[lang='zh-Hans']中可以指定语言
自定义模板
可写入自己需要的css,js文件(库)
代码如下:
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"snippets": {
"myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",
"mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",
"360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",
"mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",
"mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",
"myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
},
"abbreviations": {
"example": "<div class='example' title='Custom element example'>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u",
"!!": "!!!+mydoc[lang='zh-cmn-Hans']",
"$": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
"jq": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
"u": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>",
"_": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>"
}
}
}
}
snippets是指head头部的片段
addbreviations是body内的片段
在mydoc中引用要使用的片段，最终!!引用mydoc，如果需要多套模板，可按需定制。
生成如下代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<!-- 360 使用Google Chrome Frame -->
<meta name="renderer" content="webkit">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 开启响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO页面关键词 -->
<meta name="keywords" content="your keywords">
<!-- SEO页面描述 -->
<meta name="description" content="your description">
<!-- favicon，可更改图片类型 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>
</body>
</html>
下面是本人定制的模板：
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"snippets": {
"myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",
"bscss3":"<link rel=\"stylesheet\" href=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css\">",
"mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",
"360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",
"mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",
"mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",
"myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
},
"abbreviations": {
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport+mykeywords+mydesc+bscss3)+body>bsjq2+bs3",
"!!bs": "!!!+mydoc[lang='zh-cmn-Hans']",
"bsjq2":"<script src=\"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js\"></script>",
"bs3":"<script src=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\"></script>"
}
}
}
}
生成如下代码：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 开启响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO页面关键词 -->
<meta name="keywords" content="your keywords">
<!-- SEO页面描述 -->
<meta name="description" content="your description">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
注：
1.插入代码时，编辑器没有json一项，我选的XML
2.个人并不喜欢重写(抄袭)别人的代码，只是emmet自定义模板我找了好久，不容易，希望给需要的朋友一点帮助。
3.如有其他问题请在下方留言。
