Sublime Snippet

部分转载自：使用sublime-snippet来快速做前端页面

分析

• 在sublime来中，可以通过submlime-snippet来快速补全代码。
• 举个栗子，如果在sublime的存放submlime-snippet的文件夹下有如下的文件(elem-edge.sublime-snippet 文件名不重要)

    <snippet>
        <tabTrigger>elem-edge</tabTrigger>
        <description>edge of the element</description>
        <content><![CDATA[ <!-- ${1:elem name} start --> ${2:content} <!-- ${1:elem name} end --> ]]></content>
    </snippet>

创建snippet

• 在菜单中打开 Tools-> New Snippet
• 编辑内容
• 保存到User文件夹

用sublime-snippet来快速做前端页面的方式

• 制作一个组件演示页面
• 打开sublime存放snippet文件夹。打开方式是：打开 Preferences>Browse Package，在打开的文件夹中，打开 User文件夹。即sublime存放snippet的文件夹。
• 新建一个文件夹，名称为项目的名称。这样做是方便管理。应该没人一辈子只做一个项目吧~
• 将一个个组件做成一个个的Snippet。为了保证和之前的Snippet的触发的按键不冲突，定义触发按键要加项目名称。例如,下面是一个通用的box

    <snippet>
        <content><![CDATA[
    <!-- ${1:box-name}-box start -->
    <div class="box ${1:box-name}-box">
        <div class="box-header clearfix">
            <h3 class="box-title">${2:title}</h3>
            <div class="box-header-op">
                <a href="###">更多>></a>
            </div>
        </div>
        <div class="box-content">${3:content}</div>
    </div>
    <!-- ${1:box-name}-box end -->
    ${4:}
    ]]></content>
        <tabTrigger>项目名称:box</tabTrigger>
    </snippet>

• 稍微复杂一点的，分页组件。

    <snippet>
        <content><![CDATA[ <!-- 分页 start --> <link rel="stylesheet" href="path-to-jquery.paging.css/jquery.paging.css"> <script src="path-to-jquery.paging.js/jquery.paging.js"></script> <div class="paging-wrap ${1:paging-name}"></div> /*var pager = \$('.${1:paging-name}').paging({ pageNum: 10, onPageChange: function(pageAt) { console.log(pageAt); } });*/ <!-- 分页 end --> ]]></content>
        <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
        <tabTrigger>项目名称:paging</tabTrigger>
        <!-- Optional: Set a scope to limit where the snippet will trigger -->
        <!-- <scope>source.python</scope> -->
    </snippet>

• 注意，补全内容如果要输出$的话，要用\进行转义。
• 然后，就可以进行飞速的编码啦~

自己的Snippet

myscript.sublime-snippet

    <snippet>
        <content><![CDATA[ <script> ${1:} </script> ]]></content>
        <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
        <tabTrigger>mscript</tabTrigger>
        <!-- Optional: Set a scope to limit where the snippet will trigger -->
        <!-- <scope>html</scope> -->
    </snippet>

myscriptsrc.sublime-snippet

    <snippet>
        <content><![CDATA[ <script src="${1:}"></script>${2:} ]]></content>
        <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
        <tabTrigger>mscriptsrc</tabTrigger>
        <!-- Optional: Set a scope to limit where the snippet will trigger -->
        <!-- <scope>source.python</scope> -->
    </snippet>