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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • idea企业开发之插件推荐

    idea企业开发之插件推荐推荐在企业开发中,使用IntelliJIDEA时常使用到的插件。

  • 基于Spring MVC + Spring + MyBatis的【超市会员管理系统】

    基于Spring MVC + Spring + MyBatis的【超市会员管理系统】文章目录一、**语言和环境**二、**实现功能**三、**数据库设计**四、**具体要求及推荐实现步骤**五、**实现代码**MySQL数据库:JAVA代码:一、语言和环境实现语言:JAVA语言。使用:MyEclipse/Eclipse+Tomcat+MySql。使用技术:Jsp+Servlet+JavaBean或SpringMVC+Spring+Mybatis。二、实现功能随着信息化时代系统管理的普及,城市中各个每一个超市的会员管理也需要与时.

  • 谷歌提出新的字体调用方案帮助提高中文字体的加载速度

    谷歌提出新的字体调用方案帮助提高中文字体的加载速度

  • Okio—— 更加高效易用的IO库

    Okio—— 更加高效易用的IO库在OkHttp的源码中经常能看到Okio的身影,所以单独拿出来分析一下,作为作为OkHttp的低层IO库,Okio确实比传统的java输入输出流读写更加方便高效。

  • C# list介绍

    C# list介绍一、LIST概述所属命名空间:System.Collections.Genericpublic class List<T>: IList<T&gt

  • python基础知识点汇总

    python基础知识点汇总本文包括python基本知识:简单数据结构,数据结构类型(可变:列表,字典,集合,不可变:数值类型,字符串,元组),分支循环和控制流程,类和函数,文件处理和异常等等。(1)简单数据结构标识符第一个字符必须是字母表中字母或下划线_。 标识符的其他的部分由字母、数字和下划线组成。 标识符对大小写敏感。python中数字有四种类型:整数、布尔型、浮点数和复数。int(整数),如1,只有一种整数类型int,表示为长整型,没有python2中的Long。 bool(…

    2022年10月16日

发表回复

您的电子邮箱地址不会被公开。

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