网站首页 » 前端开发 » 前端工具 » Sublime Text Snippets 模板库插件
上一篇:
下一篇:

Sublime Text Snippets 模板库插件

前言

模板库插件对于我们做前端的人来说也很有历史的了,还记得以前刚做前端的时候,如果遇到经常用到的代码,就是把这些代码放到一个文件中,到用的时候就打开文件,复制粘贴完成手动版的模板库功能,但是现在就不用这个纯手工的方法了,因为我们有了Sublime Text Snippets 模板库插件。

Snippets 之旅

安装配置

安装方法也是一如既往地简单,在这里就不多说了。安装完后就可以用了,但要怎么用呢?现在我们一步一步来,来慢慢建立起我们的模板帝国。首先安装完后,这个插件并不会像我们的其它插件一样会出现在【Preferences】-【Package Settings】。而是在【Tools】-【Developer】中,选中【Developer】你可以看到有一个【New Snippets】。这个选项就是用来创建模板的。我们首次打开后,默认的内容如下:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

Hello, ${1:this} is a ${2:snippet}.这一串字符就是模板的内容,你可换成你自己的 HTML 代码。

${1:this}${2:snippet},这个是用来定位光标的。你可以自己设置这个光标的位置,比如上面的设置了两个${},注意里面是用键值对的方法设置的,冒号前面用数字作为 key 值,后面就是你要定位并想选中的字符串 ,也就是说,当你按完 Tab 后,光标默认会跳到并选中 this 字符串,当你再次安 Tab 的时候,光标就会跳到并选中 snippet 字符串。这样的好处就是你可以很快速地修改模板来满足实践需要。

<tabTrigger>yunkus</tabTrigger>触发的快捷方式,类似于 Emmet 插件,敲出关键词,然后按下 Tab 键,就可以把你这个模板的内容调出来。

<scope>source.python</scope>可使用范围,不写侧是默认全部文件可用。

保存位置

模板的保存位置也比较有讲究,因为你不能乱放。默认是放在 D:\Program Files (x86)\Sublime Text Build 3126 x64\Data\Packages\User 中的(我安装在D盘,这个因人而异),你可以直接把文件放在 User 目录下,但我想你也会跟我一样觉得都在这里,跟其它混在一起,模板少还好,要是模板很多,那就一团糟了,如果你不想把模板文件直接放在User 目录下,你可以在User 目录下新建一个文件文件夹的名称可以随便取,然后把创建的模板文件都放在这个目录下。如果要想放在 User 目录的其它目录下,插件是找不到的。不过这个只是我个的的测试结果,可能是可以的,改改插件的配置估计可以实现,如果你找到了,可以给我留言,除了保存的方法有讲究个,保存的文件后缀也是很有讲究的,我们要保存成 .sublime-snippet 后缀名。

Snippets 模板示例

下面这个就是一个非常简单的示例:

// yunkus.sublime-snippet (注意这个是文件名,不需要出现在配置中)
<snippet>
    <content><![CDATA[
        <section class="category-list">
            <ul class="category-list-box">
                 <li class="cat-item cat-item-5"><a href="http://yunkus.com/category/fewd/css3/" >CSS3</a></li>
                    <li class="cat-item cat-item-12"><a href="http://yunkus.com/category/cms/dedecms/" >dedecms</a></li>
                    <li class="cat-item cat-item-8"><a href="http://yunkus.com/category/fewd/divcss/" >div+css</a></li>
                    <li class="cat-item cat-item-4"><a href="http://yunkus.com/category/fewd/html5/" >HTML5</a></li>
                    <li class="cat-item cat-item-2"><a href="http://yunkus.com/category/fewd/javascript/" >JavaScript</a></li>
                    <li class="cat-item cat-item-3"><a href="http://yunkus.com/category/fewd/jquery/" >jQuery</a></li>
                    <li class="cat-item cat-item-51"><a href="http://yunkus.com/category/operator/linux/" >Linux</a></li>
                    <li class="cat-item cat-item-16"><a href="http://yunkus.com/category/operator/seo/" >SEO推广</a></li>
                    <li class="cat-item cat-item-10"><a href="http://yunkus.com/category/cms/wordpress/" >wordpress</a></li>
                    <li class="cat-item cat-item-11"><a href="http://yunkus.com/category/cms/zblog/" >zblog</a></li>
                    <li class="cat-item cat-item-13"><a href="http://yunkus.com/category/cms/other/" >其它</a></li>
                    <li class="cat-item cat-item-7"><a href="http://yunkus.com/category/fewd/tool/" >前端工具</a></li>
                    <li class="cat-item cat-item-1"><a href="http://yunkus.com/category/fewd/" >前端开发</a></li>
                    <li class="cat-item cat-item-15"><a href="http://yunkus.com/category/operator/search/" >搜索引擎</a></li>
                    <li class="cat-item cat-item-6"><a href="http://yunkus.com/category/fewd/mobile/" >移动WEB</a></li>
            </ul>
        </section>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>yunkus</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

敲出 yunkus 然后 Tab 一下,上面一大串代码就会美美出现了。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/sublime-text-snippets-template-library-plugin/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END