用Snippets建立本身喜歡的註釋格式

事出有因

是這樣的，我以爲Sublime Text 3對CSS和JS的註釋太簡陋了，因而想本身修改下默認設置，沒發現哪裏能改，而後發現了Snippets這個神器，歷經曲曲折折曲曲後順利解決了問題。（Snippets官方介紹點我）

Snippets能做甚？

功能：輸入定義過的字符串，再摁Tab，字符串會變成與它對應的內容（相似於你用Ctrl+V實現粘貼這個過程）

舉慄：我設置了一個字符串name，它對應的內容設爲xxxHolic，因而我在Sublime Text 3裏想輸入xxxHolic時，我能夠輸入name而後摁Tab來搞定。

好比某段代碼你常常使用，那你能夠給它想個名字，用Snippets設置下，你就能夠直接按名字來快捷輸出這段代碼。

Snippets怎麼上手？

新建： 菜單欄Tools → Developer → New Snippet...

新建的文件會顯示以下代碼。保存文件的時候後綴名務必爲.sublime-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> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

---

1.<content>

在CDATA[]中插入你想方便輸出的大段內容。

光標默認出如今內容末尾。也能夠設置光標初始位置以及佔位符。$1表示光標首次出現的位置，$2就表示你摁Tab後光標跳到的位置，依次還可設置$3，$4等等。要設置佔位符的話，要這樣，${1:佔位符內容}，同理可設置${2:佔位符內容}等。$0表示最後光標跳的位置，默認是內容末尾，你也能夠修改。

容許有兩個或多個$1，$2等，這樣就有兩個或多個光標，你能夠在不一樣的位置同時輸入一樣的內容。

容許使用已有的變量或者本身新建變量。好比$TM_FILENAME表示當前文件名（帶後綴）。（點這裏看更多）

高級玩法是Substitutions，用到了正則表達式，看着很高級，我還不會玩，sign...

2.<tabTrigger>

<tabTrigger></tabTrigger>中間插入你爲內容設置的字符串就好了。

3.<scope>

<scope></scope>中間填你但願指令生效的文件。text.html指HTML文件，source.css指CSS文件，source.js指JS文件。多個文件的話用逗號分開。

能夠不要這項，則全部地方指令都有效。

4.<description>

其實還有<description></description>這項的，可不設置，默認值是你保存的文件名字。當你輸入進行觸發的字符串的前幾個字母后，若是有代碼提示，會在右側顯示<description></description>中的內容。

5.舉慄舉慄

<snippet>
     <content>
<![CDATA[
----------------------------
CONTACT ME
----------------------------
Name: ${1:my name}
Tel: ${2:123456}
WeChat: ${2:123456}
Address: ${4:my address}
----------------------------
]]>
     </content>
     <tabTrigger>con</tabTrigger>
     <description>contact-me</description>
     <scope>text.html,source.js,source.css</scope>
</snippet>

作了個動圖來展現哈哈。（圖片怎麼調大小啊...怎麼都沒試出來...+_+）

發現了嗎，我輸入c，就會有代碼提示，左邊是字符串全名con，右邊是描述contact-me，而後我直接按Enter就好了，並不須要輸全字符串後按Tab。不過這隻在JS文件中有效。由於啊，在HTML中代碼提示總要現有<，在CCS中須要先有{。多輸入一個符號也無所謂啦，可是每次多輸的符號仍是要刪掉，好麻煩的，仍是解決掉好了。

在HTML中開啓代碼提示

解決方法：菜單欄Preferences→ Settings。在彈出的Preferences.sublime-settings — User 文件中加入下面的代碼就行了。

"auto_complete_triggers":
[
  {
    "characters": "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.<",
    "selector": "text.html"
  }
],

而默認的是設置是下面這樣的。對比下進行意會，正則我知其然不知其因此然，待填坑。

"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],

在CSS中開啓代碼提示

去掉CSS只有輸入{才能代碼提示這個規則麻煩點。由於對HTML的設置對CSS無效-.-，我想了想，確定是別的啥地方給設了規則。

網上浪啊浪，發現瞭解決方案。你要修改一個文件，在你安裝Sublime Text 3的文件夾裏有個Packages，裏面有個CSS.sublime-package，這貨是個壓縮文件，你須要修改裏面Completion Rules.tmPreferences這個文件裏的<string>.*</string>，把.*去掉就OK了。

然鵝直接在快壓裏面修改改不了，用快壓解壓了是能夠改，可是我沒法再把文件壓縮成.sublime-package這種類型的壓縮文件。

因而我又繼續在網上浪啊浪。

恩，發現裝個插件就能夠修改了，就是它 → Package​Resource​Viewer。

若是你還沒裝過插件，你須要先裝一個Package Control，用來管理插件的好像，菜單欄Tools→ Command Palette...，輸入install，選擇Install Package Control,它會自動安裝，裝好了會彈窗告訴你。若是軟件提示你沒安裝成功，讓你去網站手動安裝，而後那個網頁又怎麼都打不開，那多是你網絡問題。我在學校圖書館怎麼都裝很差，回家就行了。你只是須要換個網絡-.-

而後咱們安裝Package​Resource​Viewer這個插件。仍是菜單欄Tools→ Command Palette...，輸入install，選擇Package Control: Install Package，而後輸入packagereso，選擇Package​Resource​Viewer，OK，軟件頁面底部會顯示正在安裝，靜靜等它裝好。

裝好後，仍是打開命令行，輸入packagere，選擇PackageResourceViewer: Open Resource，再選擇CSS，再選擇Completion Rules.tmPreferences，好了，這個文件打開了，咱們把裏面的<string>.*</string>註釋掉，而後加上<string></string>就行了。（也就是去掉.*）。

這時候在CSS裏面你能夠直接輸入首字母根據代碼提示選擇Snippets了。

恩，渾身舒暢。

用Completions管理Snippets

噢，還有一個問題，Snippets是一個文件只能寫一個，因此若是你須要不少Snippets的話，文件多了管理起來會很麻煩。這時候咱們用Completions來解決這個問題。（點我看官方介紹）

直接看我寫的一個栗子吧。記住保存文件時後綴名爲.sublime-completions。

{
  "scope": "source.js",
  "completions":
  [
    { "trigger": "q\tnote", "contents": "//---- ${1} ------" },
    { "trigger": "con\tcontact-me", "contents": "----------------------------\nCONTACT ME\n----------------------------\nName: ${1:my name}\nTel: ${2:123456}\nWeChat: ${2:123456}\nAddress: ${4:my address}\n----------------------------\n" },
  ]
}

在"completions"裏可添加多對"trigger"與 "contents"。"trigger"中 \t 以前是觸發的字符串，以後是描述；可省略 \t 與描述。

"contents"好像只能把代碼寫在一行，不能換行，痛苦，不方便排版，還沒找到解決辦法。有知道怎麼整的交流下啊，感激.jpg