Sublime Text自定義snippet
Sublime Text自定義snippet
snippet可以理解為代碼片段, 在自定義好snippet後就可以快帶生成相應的代碼片段
- 安裝sass snippet插件 （支持該功能的插件，sublime 2和3都可以使用該功能）
- 查看snippet功能是否可用
- 新建一個html文件，按ctrl+shift+p 後輸入snippet，看是否有相應的snippet字段。如果有，則表示snippet可正常使用
- 查看對應文件的scope
- snippet功能通過鍵入關鍵詞後按tab完成代碼不全，但是很多時候我們針對不同文件類型，並不需要其他文件中使用的代碼，所以需要查看某些文件對應的scope
- 打開要編輯snippet代碼塊指定補全的代碼類型或者通過命令行（ctrl+shift+p）鍵入‘ssphp’（set syntax:php 設置文件類型為php）。接著按ctrl+shift+alt+p，在編輯器下方就會顯示對應的scope。比如php文件和html文件對應的scope是‘text.html’，而css和js則是source.css和source.js。
- 新建snippet並編輯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> --> <!--使用時註釋去掉，將中間的詞換成按tab觸發補全的關鍵詞-->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> --> <!--設置在什麽文件類型下觸發補全，填寫上文獲得的scope-->
</snippet>
3.補全內容中，$符號表示的是代碼不全後光標出現的位置和順序。比如${1:this}：意為光標在此第一次出現，默認值為this，且該默認值被選中。如果有多個$1，則光標同 時出現在此處，而默認值只按照第一個設置的值出現。下面定義了${2:snippet}，所以，當修改了$1後，按tab，則直接跳轉到$2的位置。另外，如果需要顯示$符號，則需 要在符號前面加‘\’轉義。
4.如果觸發關鍵詞和sublime text中自帶的代碼補全關鍵詞有沖突的話，可能會造成該snippet無效。
在ST中: 依次選擇tools -> Developer -> New Snippet, 就打開默認的snippet了:
- snippet的保存
- 編輯完的snippet需要使用sublime text規定的後綴： .sublime-snippet。
- 代碼保存到sublime text安裝路徑下的：Data > Packages > User 目錄下即可。
- 建議在User 目錄下新建一個snippet目錄專門保存snippet的代碼塊。（不影響功能）。
- snippet的使用
- 編輯完後，打開新建一個該snippet對應文件類型的文件後，鍵入關鍵字並按tab即可完成代碼的補全
- css的代碼塊補全前，需要在關鍵字前加‘.‘或者‘#‘然後再按tab。（此處略坑。所以在編輯snippet的時候，可以在代碼塊前加個$1,補全後可以直接把符號刪除。）
其中的content中的CDATA就是實際的snippet的內容. tabTrigger就是觸發snippet的字符串, 比如html5. scope就是說在哪裏會觸發, 可以簡單理解為文件類型.
下面是上圖中的snippet寫法:
<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <title>${1}</title> <link rel="stylesheet" href="index.css"> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>html5</tabTrigger> <scope>text.html</scope> </snippet>
可以看到上面有個${1}, ${2}, 就是按tab鍵時,光標依次停留的位置.
註意事項:
- 保存snippet時, 文件擴展名要是
sublime-snippet
Sublime Text自定義snippet