在前端开发中我们经常会输入相同的一些基本代码,例如常用的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. 图片加载与缓存利器(自动缓存)--第三方开源-- Glide

    Android Glide使用便利,短短几行简单明晰的代码,即可完成大多数图片从网络(或者本地)加载.显示的功能需求. 使用Android Glide,需要先下载Android Glide的库,And ...

  2. 索尼MT27i Android2.3.7 线刷Android4.04

    Author:KillerLegend From:http://www.cnblogs.com/killerlegend/p/3733150.html Date:2014.5.16 工具:Window ...

  3. keytool 获取证书信息

    keytool -list -v -keystore E:\androidkestore 红色部分为证书地址 输入密码后得到md5及sha1 google地图和百度地图申请key可能用到

  4. C#之匿名类型与隐式局部变量

    一.匿名类型 下面一段代码展示了如何定义并且使用匿名类型: static void Main(string[] args) { var patent1 = new { Title = "Ne ...

  5. Python学习教程(learning Python)--1.1Python程序设计流程

    Python程序设计与其他高级语言程序设计流程基本一致     step1 程序设计     step2 编写Python代码     setp3 Python语句语法纠错     step4 测试程 ...

  6. C语言如何 实现 下雪效果

    题外话  前言 1.本文主要围绕 如何 在 控制台上 下起 一场 只有自己能看见的雪 2.是个简易跨平台的,主要是C语言 3.动画 采用 1s 40帧, 雪花具有 x轴速度和y轴速度 4.比较简单,可 ...

  7. 【转】Winform下KeyDown,KeyPress,KeyUp事件的总结

    http://blog.csdn.net/xiashengwang/article/details/6777907

  8. RMAN 完全恢复

    OS:ORACLE-LINUX 5.7 DB:11.2.0.3.0 完全恢复 查看现有的数据文件SQL> select name from v$datafile; NAME----------- ...

  9. [转]ubuntu错误解决E: Sub-process /usr/bin/dpkg returned an error code (1)

    [转]ubuntu错误解决E: Sub-process /usr/bin/dpkg returned an error code (1) http://yanue.net/post-123.html ...

  10. SharePoint 2010 RBS 安装和配置遇到的一个问题

    在按照微软官方的文档按照配置的时候遇到下面问题: <Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event ...