使用 Sublime-snippet 来快速做前端页面

Sublime-snippet 简介

在 Sublime 中,可以通过 Sublime-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>

其中,

  • <content><![CDATA[ ]]></content> 定义了补全的内容
  • ${1:elem name} 中: 1是输入点的序号,1表示的是第一个输入点,elem name表示的是输入点的默认值。
  • ${2:content} 中:2表示第二个输入点。
  • <tabTrigger> : 定义了触发补全的字符串
  • <description> :对snippet描述

打开任意一个文件,通过输入elem-edge,然后按Tab键,就可以补全内容。再按Tab进入下一个输入点。

上面的是snippet在任意类型的文件中都能触发。如果要限定文件类型,可以用 <scope>source.文件类型</scope>

创建 Submlime-snippet 的方式

  1. 在菜单中打开 Tools-> New Snippet
  2. 编辑内容
  3. 保存

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

  1. 制作一个组件演示页面
  2. 打开 Sublime 存放 snippet 文件夹。打开方式是:打开 Preferences>Browse Package,在打开的文件夹中,打开 User文件夹。即 Sublime 存放 snippet 的文件夹。
  3. 新建一个文件夹,名称为项目的名称。这样做是方便管理。应该没人一辈子只做一个项目吧~
  4. 将一个个组件做成一个个的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>

注意,补全内容如果要输出$的话,要用\进行转义。

然后,就可以进行飞速的编码啦~

推荐

最后,推荐几个,比较好用的 Sublime 的自动补全插件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

IDEA使用

最重要的: Ctrl+Shift+A  打开搜索 定位代码: 项目之间的跳转: ? 文件之间的跳转: 打开最近文件列表  Ctrl + E     打开最近修改...

2854
来自专栏c#开发者

Silverlight 4 RIA Service dataform Template, 代码选择控件,Validate验证使用技巧

Silverlight 4 RIA Service dataform Template, 代码选择控件,Validate验证使用技巧 功能 定义只读,新增,...

3445
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

5379
来自专栏逆向技术

win32程序之窗口程序,以及消息机制

  通过上一讲.我们了解了窗口其实是绘制出来的.而且是不断绘制的过程. 所以窗口的本质是绘制. 但是我们现在看到的窗口程序.都可以点击关闭按钮. 使用鼠标点击会...

1163
来自专栏C语言及其他语言

C语言逆向系列之破解一个简单的C语言程序

以下正文 本节教程将教大家如何去逆向分析和破解一个简单的C程序,需要大家熟悉基本的C语言语法,用到工具有:VC6、IDAPro、OD、UE等工具。 下面我们开...

4765
来自专栏守望轩

Visual Studio 2008 每日提示(十)

#91、查找组合框的一些有趣的用法 原文链接:How to have fun with the Find Combo Box 操作步骤: 按Ctrl+D 转...

3607
来自专栏LIN_ZONE

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux

1722
来自专栏我和未来有约会

基于Cairngorm的Silverlight开发 - part5

搭建完整的Cairngorm项目 到这里已经都知道了如何独立的运用Cairngorm中两个特殊的部分,ModelLocator模型和View视图,现在需要的就是...

3595
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0

862
来自专栏逸鹏说道

GeetTest~下一代验证(附C#案例)

基本介绍 极验验证除了在服务器端提供了广泛的语言支持外,在客户端也提供了多平台的扩展支持。 客户端主要涵盖了如下平台: pcWeb 普通台式电脑,笔记本电脑w...

42811

扫码关注云+社区

领取腾讯云代金券