首頁 > 開發者 > Sublime Text

sublime text 2自訂程式碼片段

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

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

 

 

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

在菜單上點擊Tools -> New Snippet，(工具->程式碼片段)會建立一個xml檔案頁簽：

<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>


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

content 裡面就是代碼模版：${序號：預設值} ，序號相同的地方游標會同時停在那可以多處同時編輯。序號大小就是tabindex。在實際使用代碼的時候，可以使用tab切換游標位置。

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

scope是指在何種檔案類型中使用。

下面是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>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</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。

sublime text 2自訂程式碼片段

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
sublime text 2 online sublime text 2 sublime text 2 compare files sublime text 2 show menu sublime compare text sublime text 3 ftp sublime text compare files
相關文章
Sublime Text 3 常用快速鍵
Sublime Text 2支援GB2312和GBK,解決中文顯示亂碼問題
Sublime Text 2_vim配置及快鍵設定
Sublime Text 3 全程詳細圖文原創教程_Sublime
完美解決 sublime text 3 /2不能安裝 package control 的問題 手動安裝_經驗教程
2018 年最佳 Sublime Text 3 主題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More