在前端开发中我们经常会输入相同的一些基本代码,例如常用的jquery引用,bootstrap框架,cssreset等等,如果每次使用时在复制粘贴感觉很麻烦,这里介绍一种更为简洁的方法

利用sublime的snippet功能快速创建代码段

打开Tools->New snippet我们能看到如图所示内容

要是没有一点英语基础,就有点抓瞎了,今天就来介绍一下如何使用这超级功能

首先简要介绍一下snippet的组成部分:

  • content:其中必须包含<![CDATA[…]]>,否则无法工作, 里面包含自己要使用的代码段,这里页面上所示的代码段是Hello, this is a snippet. ${1:this}表示获得代码段后光标首先放在this后面, ${2:snippet}表示按下Tab键后光标将从this跳到snippet后面,这些都是为了方便输入后续代码。如果你要贴入的代码段是不需要修改的,则可忽略这些
  • tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Hello, this is a snippet. 这段代码片段
  • scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活.

好了,接下来展示我自己经常使用的代码段

如此设置之后,在html页面中输入jquery再按下Tab键,即可快速得到你在snippet中的代码段,即

<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

怎么样,够快的吧!再也不用敲那么多代码了。

css也可如此使用

这是我的pc端cssreset代码段,这样我只要在css页面中输入cssresetpc,再按下Tab键即可得到cssreset。

简直快的不能再快了,你看明白了吗?

利用sublime的snippet功能快速创建代码段的更多相关文章

  1. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  2. 【转】在Visual Studio中怎样快速添加代码段

    原文网址:http://blog.csdn.net/yl2isoft/article/details/9735527 以前一直只知道,键入prop,再按两次tab键,会生成自动属性代码. 今天闲着无事 ...

  3. 在visual studio中快速添加代码段

    昨天我在网课上,看到老师输入#2之后,立马就出现了一堆代码. 我于是赶紧打开自己的visual studio尝试一下,并没有任何反应. 上网查找,发现visual studio有自定义代码段的功能. ...

  4. VS Code 创建代码段 Snippets

    菜单:文件 -> 首选项 -> 用户代码片断 打开User Snippets菜单: 选择C#: 然后把里面注释的文字留下, 复制其中那段代码并修改称自己的代码段: "Create ...

  5. Visual Studio Code 添加设置代码段(snippet)

    从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...

  6. Visual Studio常用小技巧一:代码段+快捷键+插件=效率

    用了visual studio 5年多,也该给自己做下备忘录了.每次进新的组换新的电脑,安装自己熟悉的环境又得重新配置,不做些备忘老会忘记一些东西.工具用的好,效率自然翻倍. 1,代码段 在Visua ...

  7. VS.net中快捷键收缩和展开代码段

    i. Ctrl-M-O   折叠所有方法 ii. Ctrl-M-P   展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M   折叠或展开当前方法 iv. Ctrl-M-L展开所 ...

  8. (视频) 《快速创建网站》 2.3 WordPress初始化和功能简介

    本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  9. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

随机推荐

  1. 大话RAC介质恢复---只有备份文件的恢复

    场景:Oracle 10g RAC:数据文件.控制文件.联机日志.参数文件都使用ASM,归档到ASM.完整备份后,删除所有控制文件.联机日志.数据文件:最后利用备份进行不完全恢复. 1.模拟灾难场景( ...

  2. Python初学者笔记:打印出斐波那契数列的前10项

    问题:斐波那契数列(意大利语: Successione di Fibonacci),又称黄金分割数列.费波那西数列.费波拿契数.费氏数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.- ...

  3. java 中 java.lang.ArrayIndexOutOfBoundsException: 0 异常

    package test; public class Test { public static void main(String[] args) { final int num2 = Integer. ...

  4. hudson项目中的运用

    项目中持续集成管理一直是用的hudson,最近的话,hudson遇到不少问题,因为之前对这个也不是很熟悉,所以也花了比较多的时间去解决,现在刚好也可以总结下自己学习到的hudson知识. 首先在我看来 ...

  5. ruby cookbook

    11.2 listing object's method Oject.methods/singleton_methods/instance_methods 指定类名定义的方法在 singleton_m ...

  6. 1084. Broken Keyboard (20)

    On a broken keyboard, some of the keys are worn out. So when you type some sentences, the characters ...

  7. uninstall 11.2.0.3.0 grid & database in linux 5.7

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  8. 【6.24-北京】AppCan移动开发者大会:最新议程曝光

    6.24,首届AppCan移动开发者大会将在北京国际会议中心召开. 大会以“平台之上,应用无限”为主题,旨在探讨在“互联网+双创”的大潮下,通过移动互联网技术.思维.模式,帮助开发者/创业者实现创新创 ...

  9. hdu 1026 Ignatius and the Princess I

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1026 Ignatius and the Princess I Description The Prin ...

  10. DataReader 链接关闭解惑篇

    不管是啥xxDataReader,都是继承DataReader实现的,所以是有共性的,因此标题就以DataReader为题了. 情况一:DataReader 默认链接不关闭 static void M ...