利用sublime的snippet功能快速創建代碼段


在前端開發中我們經常會輸入相同的一些基本代碼,例如常用的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。

簡直快的不能再快了,你看明白了嗎?

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM