前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

学会使用Sublime Text Snippets提高编码速度

首页
2016-08-13 22:10:08
工欲善其事必先利其器
sublime

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

  • 创建方法:Tools > New Snippet

这时你会看到如下示例代码:

<snippet>
     <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>
@前端进阶之旅: 代码已经复制到剪贴板

我们接着来看下完整的结构和说明


<snippet>
    <content><![CDATA[ 你需要插入的代码片段${1:name} ]]></content>
    <!-- 可选:快捷键,利用Tab自动补全代码的功能 -->
    <tabTrigger>xyzzy</tabTrigger>
    <!-- 可选:使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。 -->
    <scope>source.python</scope>
    <!-- 可选:在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。 -->
    <description>My Fancy Snippet</description>
</snippet>
@前端进阶之旅: 代码已经复制到剪贴板

${1:name}表示代码插入后,光标所停留的位置,可同时插入多个。其中:name为自定义参数(可选)。 ${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)

开始自己动手编写一个实例:

<snippet>
     <content>
     <![CDATA[
     <footer>
          <p>Copyright © 2008-2012 ${1:bluesdream}.com</p>
          <p>增值电信业务经营许可证 沪B2-${2} <a href="#">沪ICP备号${3}</a></p>
     </footer>
     ]]>
     </content>
     <tabTrigger>cft</tabTrigger>
     <description>custom-footer</description>
     <scope>text.html</scope>
</snippet>
fe

← 写给大家看的设计书总结配置sublime的LiveReload与webstorm的插件实现实时预览 →