在前端開發中我們經常會輸入相同的一些基本代碼,例如常用的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。
簡直快的不能再快了,你看明白了嗎?