emmet plus 让emmet更强大

如何使用？

以 Sublime Text 为例

1. 首先你得有个 emmet。
2. 打开 Sublime Text 的安装目录。
3. 在 Data 文件夹下面新建一个名为 emmet 的目录。
4. 拷贝snippets-emmet-plus.json到该目录下。
5. 打开 emmet 的配置文件Emmet.sublime-settings。
6. 修改extensions_path 后面的路径为之前新建的 emmet 目录的绝对路径，例如D:/Program Files/Sublime Text 2.0.2/Data/emmet。

尽情享受吧！

扩展了哪些功能？

• 统一的注释风格，以css-creating为参考。

例如输入c，cc

在HTMl文件中会输出：

<!--  -->

<!-- 模块名 begin -->
    
<!-- 模块名 end -->

在 CSS 文件中会输出：

/*  */

/**
 * 
 * @file:     
 * @author:   
 * @update:   
 * @note:     
 * @doc:      
*/

在 CSS 文件中输入c1，c2，会输出

/* ==========================================================================
   1级区块标题
   ========================================================================== */

/* --------------------------------------------------------------------------
   2级区块标题
   -------------------------------------------------------------------------- */

• 扩展代码片段

输入@ff，会输出：

@font-face {
    font-family: 'FontName'; /* IE9 */
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('FileName.woff') format('woff'), /* Chrome,Firefox */
         url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
         url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
}

输入bgi+，会输出：

@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
       only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
    .selector{
        background-image:url();/* Retina */
        background-size: 图片宽度÷2px 图片高度÷2px;
    }
}

• 输出 cube 中的布局结构 输入vbox，会输出：

<div class="vertical-box">
    <b class="vertical-hack"></b>
    <div class="vertical-content">
        <p>未知高度垂直居中模块</p>
    </div>
</div>

• 扩展和修复 emmet 错误的 CSS 声明

例如font-smoothing属性，输入fsm，会输出：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; /* Firefox 25+ */

所有输出代码都已经预定义光标路径，按TAB可以自动切换到下一个编辑点。

赶快试试吧(^__^) ！