例如:新建console.log();的快捷键为 co

环境:windows 7

step1:

Tools -> New Snippet

 <snippet>
<content><![CDATA[consloe.log(${1:this});]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>co</tabTrigger>
<!-- html file -->
<!-- <scope>text.html</scope> -->
<!-- css file -->
<!-- <scope>source.css, source.less, source.scss, source.stylus</scope> -->
<!-- js file -->
<scope>source.js</scope>
<description>console.log</description>
</snippet>
  • 第二行里的 ${1:this} 代表光标1所在位置,多个值:比如css的padding:${1:this} ${2:this} ${3:this} ${4:this};
  • tabTrigger:触发词
  • scope:文件格式,多个用半角逗号隔开
  • description:显示在提示右边的描述

step2:

保存文件为 C:\Users\yourname\AppData\Roaming\Sublime Text 3\Packages\User\test.sublime-snippet

这个文件夹即package所在文件夹,Preferences -> Browse Packages 然后下面的user文件夹,一定要存为 .sublime-snippet 后缀

step3:测试

打开或新建一个js文件,输入"co",然后按tab键,即可快捷输入 console.log();

注意:html和css、js的snippet 在<scope></scope>中的写法不一样,html是<scope>text.html</scope>,而js、css是<scope>source.js</scope>和<scope>source.css</scope>

sublime text 3 添加 javascript 代码片段 ( snippet )的更多相关文章

  1. sublime text 内调试Javascript代码

    转自:sublime内调试Javascript代码 之前用webstorm, 可以直接调试js, 在浏览器中也可以调试js,最近换了sublime text, 在想它是否支持调试js代码,于是找到了这 ...

  2. 在sublime text中添加JavaScript的build-system

    -step 1: 下载安装node.js, 并添加到path变量中. -step 2: 在sublime text中新建一个build-system. tools --> build-syste ...

  3. sublime text 3 添加代码片段

    工具>插件开发>新建代码片段 <snippet> <content> <![CDATA[ Hello, ${1:this} is a ${2:snippet} ...

  4. Sublime Text3—Code Snippets(自定义代码片段)

    摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用. 平时用sublime安装各种插件,使用Tab键快速补全,便是snippets(可译为代码片 ...

  5. VSCode添加用户代码片段,自定义用户代码片段

    在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入. VScode中添加用户自定义代码片段很简单. 1.在VScod ...

  6. 在Sublime Text 3上安装代码格式化插件CodeFormatter

    1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...

  7. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!

    原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...

  8. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

    原文:Chalarangelo  译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...

  9. 精心收集的48个JavaScript代码片段,仅需30秒就可理解

    源文链接 :https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 该项目来自于 G ...

随机推荐

  1. Flash+XML前后按钮超酷焦点图

    在线演示 本地下载

  2. PSPnet:Pyramid Scene Parsing Network——作者认为现有模型由于没有引入足够的上下文信息及不同感受野下的全局信息而存在分割出现错误的情景,于是,提出了使用global-scence-level的信息的pspnet

    from:https://blog.csdn.net/bea_tree/article/details/56678560 2017年02月23日 19:28:25 阅读数:6094 首先声明,文末彩蛋 ...

  3. Mybatis异常_02_Result Maps collection already contains value for

    一.异常 1.异常信息 2.异常原因 XXXMapper.xml文件中存在重名对象,保持名称不要一样即可正常启动. 我的原因是namespace与其他mapper 一样. 3.可能的原因 (1)nam ...

  4. 从TS流到PAT和PMT

    转自:https://blog.csdn.net/rongdeguoqian/article/details/18214627 一 从TS流开始 最近开始学习数字电视机顶盒的开发,从MPEG-2到DV ...

  5. 【boost】使用serialization库序列化子类

    boost.serialization库是一个非常强大又易用的序列化库,用于对象的保存与持久化等. 使用base_object可以在序列化子类的同时也序列化父类,以此获得足够的信息来从文件或网络数据中 ...

  6. 用rem适配移动端

    常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...

  7. javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片

    javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...

  8. js中关于事件捕获与事件冒泡的小实验

    1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...

  9. nginx中有关命令和日志切割,配置文件加载的详细阐述

    一.Nginx简介 Nginx (“engine x”) 是俄罗斯人Igor Sysoev(塞索耶夫)编写的一款高性能的 HTTP 和反向代理服务器.Nginx 已经在俄罗斯最大的门户网站── Ram ...

  10. [原创]Devexpress XtraReports 系列 1 创建静态报表

    在各种管理系统中,报表是必不可少的.报表是数据最直观体现的方式之一 以前,屌丝我是微软的忠实粉丝,所以报表工具就是微软自带的RDLC... 不可否认的是RDLC的功能是非常强大的.能够满足绝大多数的要 ...