1、什么是emmet

如果没有了解过 sublime 和 emmet,先去参考阅读sublime text 3 插件:Emmet(原ZenCoding)。

2、自定义emmet语法

emmet的简写语法,使前端输入html、css的过程简化了不少。比如输入!(英文感叹号),就可以输出一个标准的html5文档结构。如此便捷的操作方式,当然也支持自定义语法规则。使用sublime text的可以打开插件设置页面:

img.png

如果你没有设置过自己的语法规则,那么这个页面是空白的,然后按如下格式开始写:

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