sublime text 2自定義代碼片斷

時間 2019-11-19

原文原文鏈接

本文引用 http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.htmlhtml

對於前端工程師來說，寫一個html頁面的基本結構是體力活，每次去拷貝一個也麻煩，sublime text 2 提供了一個很好的複用代碼片斷。下面介紹一下建立一個html5的代碼片斷的過程。

在菜單上點擊Tools -> New Snippet，(工具->代碼段)會新建一個xml文件頁籤：前端

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    
    
    
    
</snippet>

註釋已經說的比較詳細了。

content 裏面就是代碼模版：${序號：默認值} ，序號相同的地方光標會同時停在那能夠多處同時編輯。序號大小就是tabindex。在實際使用代碼的時候，能夠使用tab切換光標位置。

tabTrigger是指輸入該字符串後tab就是在光標插入content中的內容。

scope是指在何種文件類型中使用。

下面是html5代碼片斷的定義：

html5

<snippet>
    <content><![CDATA[
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>${1}</title>
</head>
<body>
    <h1>${1}</h1>
    Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
    
    <tabTrigger>html5</tabTrigger>
    
    
</snippet>

編輯完以後保存爲 C:\Users\[用戶]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet (Win7下) 默認的保存路徑就行。後綴必須是.sublime-snippet。

保存完重啓Sublime text 2，新建文件：輸入html5,tab會出現以下效果：

${1}出現了兩次，因此光標同時編輯圖中兩處。
${2:this}，因此在2處出現this默認值。${1}處編輯完按tab就到${2}處。

OK, That's all。java