sublime text 3 插件：自定义Emmet语法规则以快速输出bootstrap组件
1、什么是emmet
如果没有了解过 sublime 和 emmet，先去参考阅读sublime text 3 插件：Emmet（原ZenCoding）。
2、自定义emmet语法
emmet的简写语法，使前端输入html、css的过程简化了不少。比如输入!（英文感叹号），就可以输出一个标准的html5文档结构。如此便捷的操作方式，当然也支持自定义语法规则。使用sublime text的可以打开插件设置页面：
如果你没有设置过自己的语法规则，那么这个页面是空白的，然后按如下格式开始写：
{
///////////////////////////////
// Emmet customization
// Each section has the same meaning as the same-named JSON file
// described here:
// http://docs.emmet.io/customization/
///////////////////////////////
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
// https://github.com/emmetio/emmet/blob/master/snippets.json#L644
"abbreviations": {
// 这里开始写自定义语法
}
}
},
// Output profiles for syntaxes
// http://docs.emmet.io/customization/syntax-profiles/
"syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
// "html": "xhtml"
}
}
这是个json配置文件，一定要按json格式来写，假设现在要设置一个自定义语法test，快速输出如下代码：
<div class="test" data-test="test">test div</div>
然后就可以这么配置该自定义语法：
"test": "div.test[data-test=test]{test div}"
在自定义语法规则里，可以继续是有既定的语法规则。
3、快速输出bootstrap组件
既然可以方便的定义自己的语法规则，那么也可以用这些语法规则来快速输出bootstrap的组件，如表格、导航、面包屑、分页等等。如：
// 测试
"test": "div.test[data-test=test]{test div}",
// 表格
"bs:table": ".table-responsive>table.table.table-hover.table-striped.table-bordered>(thead>tr>th^^+tbody>tr>td)",
// 下拉组件
"bs:dropdown": ".dropdown>button.btn.btn-default.dropdown-toggle.trigger-dropdown[data-toggle=dropdown]{按钮}+ul.dropdown-menu[role=menu]>li>a[href=#]"
当然，要写好上述的自定义语法，首先要弄清楚bootstrap的常用组件是怎样构成的，语法快速输出只是简化操作，并不会帮你理解。如果你还不太了解bootstrap的组件，建议你看看bootstrap学习笔记（bootstrap3学习1：响应式布局layout等）。
下面是我的个人自定义语法规则：
{
///////////////////////////////
// Emmet customization
// Each section has the same meaning as the same-named JSON file
// described here:
// http://docs.emmet.io/customization/
///////////////////////////////
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
// https://github.com/emmetio/emmet/blob/master/snippets.json#L644
"abbreviations": {
"meta:vp": "<meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\" />",
"meta:compat": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />",
"meta:renderer": "<meta name=\"renderer\" content=\"webkit\" />",
"meta:author": "<meta name=\"author\" content=\"云淡然;http://ydr.me\" />",
"meta:key": "<meta name=\"keywords\" content=\"关键词1,关键词2\" />",
"meta:desc": "<meta name=\"description\" content=\"描述语句\" />",
"link:favicon": "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\" />",
"link:touch": "<link rel=\"apple-touch-icon\" href=\"/favicon.png\" />",
"meta5": "meta:compat+meta:renderer+meta:vp+meta:author+meta:key+meta:desc+link:favicon+link:touch",
// css
"css:bs": "link[href=http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css]+link[href=http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap-theme.min.css]",
"css:pretty": "link[href=http://festatic.aliapp.com/css/google-prettyprint/bootstrap.css]",
// js
"jq1": "script[src=http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js]",
"jq2": "script[src=http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js]",
"js:bs": "script[src=http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js]",
"js:pretty": "script[src=http://cdn.bootcss.com/prettify/r298/prettify.min.js]",
// doc
"doc": "html>(head>(meta[charset=UTF-8]+meta5+title{${1:文档标题}}))+body",
"doc:bs": "html>(head>(meta[charset=UTF-8]+meta5+title{${1:文档标题}}+css:bs))+body>(.container{${1:bootstrap}}+jq1+js:bs)",
"html:5": "!!!+doc[lang=${lang}]",
"pre": "pre.prettyprint.linenums",
"pre:scroll": "pre.prettyprint.linenums.pre-scrollable",
// for bootstarp 3
"!bs": "!!!+doc:bs[lang=${lang}]",
"bs:jumb": ".jumbotron>.container>h1",
"bs:table": ".table-responsive>table.table.table-hover.table-striped.table-bordered>(thead>tr>th^^+tbody>tr>td)",
"bs:dropdown": ".dropdown>button.btn.btn-default.dropdown-toggle.trigger-dropdown[data-toggle=dropdown]{按钮}+ul.dropdown-menu[role=menu]>li>a[href=#]",
"bs:form": ".form-group>label.control-label+input:text.form-control+.help-block",
"bs:btn": "button.btn.btn-default",
"bs:tab": "ul.nav.nav-tabs>li>a[href=#tab1][data-toggle=tab]{#tab1}^^+.tab-content>#tab1.tab-pane{#tab1 content}",
"bs:nav": "nav.navbar.navbar-default>(div.navbar-header>button.navbar-toggle[data-toggle=collapse][data-target=#navbar1]>i.icon-bar*3^+a.navbar-brand[href=#]{brand})+(#navbar1.navbar-collapse.collapse>ul.nav.navbar-nav>li>a[href=#]{菜单})",
"bs:bread": "ol.breadcrumb>(li>a[href=#]{父级}^+li.active>{当前})",
"bs:page": "ul.pagination>(li>a[href=#]{1}^+li.active>span{2})",
"bs:pager": "ul.pager>(li.previous>a[href=#]{上一页}^+li.next>a[href=#]{下一页})",
"bs:list": "ul.list-group>li.list-group-item",
"bs:lista": "div.list-group>a.list-group-item",
"bs:panel": ".panel.panel-default>(.panel-heading+.panel-body)",
"bs:paneltable": ".panel.panel-default>(.panel-heading+bs:table)",
"bs:panellist": ".panel.panel-default>(.panel-heading+.panel-body+bs:list)",
"bs:panellista": ".panel.panel-default>(.panel-heading+.panel-body+bs:lista)"
}
}
},
// Output profiles for syntaxes
// http://docs.emmet.io/customization/syntax-profiles/
"syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
// "html": "xhtml"
}
}
4、参考文档
</>