subdiscipline_Sublime

subdiscipline_Sublime部分转载自:使用sublime-snippet来快速做前端页面分析在sublime来中,可以通过submlime-snippet来快速补全代码。举个栗子,如果在sublime的存放submlime-snippet的文件夹下有如下的文件(elem-edge.sublime-snippet文件名不重要)ele

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

部分转载自:使用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>

Jetbrains全家桶1年46,售后保障稳定

创建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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231336.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 半小时一篇文过完C语言基础知识点[通俗易懂]

    半小时一篇文过完C语言基础知识点[通俗易懂]本文定位读者为小白读者,将使用最快的方法学完C语言,并且制作一个学生管理系统。由于是速成的方法,本文不会描述过多的其它知识,大部分知识点只是描述了如何进行使用,如何深入还需要各位努力;不过学习过了一遍内容后,学习起来也会较为容易。环境:系统:windows7IDE:Devc面向读者:小白一、HelloWorldHelloWorld是经典的编程入门程序,指在编写代码生成程序,运行该程序将会在程序中显示HelloWorld。以下是一个HelloWorld的C语言代码:#include&

    2022年9月21日
    0
  • c语言中的双周期指令,时钟周期 机器周期 指令周期的概念[通俗易懂]

    c语言中的双周期指令,时钟周期 机器周期 指令周期的概念[通俗易懂]时钟周期:时钟周期也称为振荡周期,定义为时钟脉冲的倒数(可以这样来理解,时钟周期就是单片机外接晶振的倒数,例如12M的晶振,它的时间周期就是1/12us),是计算机中最基本的、最小的时间单位。在一个时钟周期内,CPU仅完成一个最基本的动作。对于某种单片机,若采用了1MHZ的时钟频率,则时钟周期为1us;若采用4MHZ的时钟频率,则时钟周期为250us。由于时钟脉冲是计算机的基本工作脉冲,它控制…

    2022年10月13日
    0
  • java中clone的用法_java clone是浅拷贝吗

    java中clone的用法_java clone是浅拷贝吗一.Cloneable的用途Cloneable和Serializable一样都是标记型接口,它们内部都没有方法和属性,implementsCloneable表示该对象能被克隆,能使用Object.clone()方法。如果没有implementsCloneable的类调用Object.clone()方法就会抛出CloneNotSupportedException。二.克隆的分类(1)浅克隆(s

    2022年10月14日
    0
  • 4个线程池_vc2010线程win32线程已退出

    4个线程池_vc2010线程win32线程已退出在windows中,系统提供了QueueUserWorkItem函数实现异步调用,这个函数相当于在线程池中建立多个用户工作项目,跟普通线程机制一样,线程池也有线程的同步等机制。 【函数原型】BOOLWINAPIQueueUserWorkItem(__inLPTHREAD_START_ROUTINEFunction,__inP…

    2022年9月24日
    0
  • 清华毕业生开发新特效编程语言,99行代码实现《冰雪奇缘》,网友:大神碉堡!创世的快乐「建议收藏」

    清华毕业生开发新特效编程语言,99行代码实现《冰雪奇缘》,网友:大神碉堡!创世的快乐「建议收藏」只用99行代码,你也可以像《冰雪奇缘》里的艾莎公主一样拥有冰雪魔法。虽然你不能在现实世界中肆意变出魔法,但却能在计算机的虚拟世界挥洒特效。或许你不知道,电影和动画中特效有时仅仅短短的一秒,却可能需要高性能计算机演算一周,花费惊人。《冰雪奇缘》没有真人出演,预算却高达1.5亿美元,每一秒的镜头都是经费在燃烧。一般人想用电脑做出CG特效简直不可想象。然而,最近一位来自中国的MIT博…

    2022年5月9日
    47
  • try-with-resource如何优雅的关闭io流[通俗易懂]

    try-with-resource如何优雅的关闭io流[通俗易懂]JAVA的一大特性就是JVM会对内部资源实现自动回收,即自动GC,给开发者带来了极大的便利。但是JVM对外部资源的引用却无法自动回收,例如数据库连接,网络连接以及输入输出IO流等,这些连接就需要我们手动去关闭,不然会导致外部资源泄露,连接池溢出以及文件被异常占用等。传统的手动释放外部资源一般放在一般放在try{}catch(){}finally{}机制的finally代码块中,因为finally代码块中语句是肯定会被执行的,即保证了外部资源最后一定会被释放。同时考虑到finally代码块中也有可能出现异

    2022年10月9日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号