sublime text 3 插件 自定义 Emmet 语法规则以快速输出 bootstrap 组件

Question

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、参考文档

• http://www.sublimetext.com/3
• http://docs.emmet.io/customization/
• https://github.com/emmetio/emmet/blob/master/snippets.json