Sublime

　　把自己比作劍客，那么Sublime對於我來說，就是一把鋒利的寶劍！關於軟件本身我就不多做介紹了，有興趣請百度，高端看客請百度谷歌，然后谷歌Sublime(— —！若你僥幸沒撞死在“長城牆”上，訪問成功了的話)。廢話不多說，請聽下文：

　　（PS：Sublime 3還是beta版，而且就個人感覺目前還是Sublime 2好使，所以本文的主角兒為Sublime 2）

一：界面

　　看到頂部的UNREGISTERED沒，未注冊，不妨，Sublime的使用完全免費，只是有時候會有個概率比紫裝的爆率會高那么一點點的彈框，提示你購買注冊，取消就得，不用管它，若你為高富帥，點個確定很值得表揚。

　　

　　Preferences -> Color Scheme可以改變整體的色調風格，調一個你喜歡的。反正我是非常喜歡默認的這個花花綠綠的，挺好看。

　　

　　右下角可以選擇當前文檔的格式：

　　

二：插件安裝

　　Sublime非常輕量，那么它強大的功能就依托於各式各樣的插件，已經擁有的插件部分可以通過Preferences -> Package Settings查看。

　　

　　Sublime的插件安裝有兩種方式：

　　一種是直接將插件下載解壓后放到插件的Packages文件夾里，文件夾位置可以通過Preference -> Browse Packages查看；

　　

　　另一種就是通過線上的包管理器Package Control進行管理，這也是方便且常用的那種。　　　

　　通過下圖的選項，打開控制台（CTRL + `）輸入以下代碼：

　　import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

　　

　　回車，重啟Sublime Text 2，你就會發現多了一個Package Control。

　　

　　打開之后點擊Install Package或上下鍵選擇然后回車（或者 CTRL + SHIFT + P，輸入 install package，回車），

　　

　　左下角會有一個狀態，Loading repositories，之后界面上會彈出插件列表，然后選擇你需要的插件即可，當然這一切的前提是你的電腦是在聯網狀態。

 　　

　　方向鍵選擇回車確定或者直接鼠標點擊，就會進入安裝狀態，同樣左下角也會出現[=]的符號，安裝成功后，有的插件能直接用，但保險起見關閉Sublime然后重新打開就OK了。

三、插件推薦 

　　1.Emmet

　　此插件的前身叫做Zen Coding。用了Sublime而沒裝Emmet的話，就好比你的絕世好劍，沒有開鋒，此言毫不誇張！

　　下面一段代碼可以讓你領略到Emmet的強大之處：

div.main>ul.nav>li#li${標題$}*3

　　 然后Tab，代碼就會變為

<div class='main'>
    <ul class='nav'>
        <li id='li1'>標題1</li>
        <li id='li2'>標題2</li>
        <li id='li3'>標題3</li>
    </ul>
</div>

　　在此，本文對Emmet做詳細的使用說明了，因為網絡里有更好的，請移駕 http://www.iteye.com/news/27580 ,這里簡單明了，清楚詳盡，絕對讓您食欲大開。

　　2.jQuery

　　此jQuery插件可以讓已經將jQuery代替JS的同學在使用jQuery編寫代碼時得心應手。此插件無他，就是代碼提示以及自動補全。不信，安裝之后，輸入'aj',然后Tab試試。平常要到其它地方復制的老長的ajax代碼是不是一下就蹦出來了。

$.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {
        param1: 'value1'
    },
})
.done(function() {
    console.log("success");
})
.fail(function() {
    console.log("error");
})
.always(function() {
    console.log("complete");
});

　　什么，沒用的信息多，還要刪除？有這種需求的同學請移駕本篇第四大標題，自定義讓你完美。

　　3.HTML/CSS/JS Prettify

　　這個插件是用來來格式化代碼的，但依賴於Node.js，所以要使用本插件的同學一定要記得先安裝Node.js。默認格式化快捷鍵CTRL + SHITF + H，也可以到Preferences -> Package Settings找到本插件然后到設置快捷鍵里修改。

　　如果在使用快捷鍵時，提示“Node.js was not found in the default path..”雲雲,請一：確保點擊確定之后彈出的文檔里的node_path的路徑設置正確，二：確保你的html或css或js文件所在的目錄以及上層目錄中沒有中文，三：沒有三！

　　4.TortoiseSVN

　　SVN，想必合作完成項目的同學少不了吧。這個插件就可以將SVN的提交、更新等常用功能集成在Sublime里，便宜實惠。默認提交快捷鍵Alt + C，更新快捷鍵Alt + U，也可以在左側Side Bar里右鍵文件夾或文件進行操作，同樣快捷鍵也可以在Preferences -> Package Settings里修改。

　　5.ConvertToUTF8

　　對於一個人來說，看你看不懂的語言文字，是沒有感覺或是很頭疼的。但當你打開一份代碼，發現里邊的漢字是亂碼的，你就不僅僅是頭疼了，還會連帶的讓你產生看不懂代碼的錯覺，相當痛苦。這時，本插件就起大作用了，他可以讓其它編碼的文檔以UTF8的格式在Sublime里打開，並且在保存時還是原來的編碼。Sublime到是自帶的有Reload with Encoding..功能，但是貌似不太好使。

　　6.IMESupport

　　如果Sublime中的中文輸入法的輸入框的位置困擾到你的話，裝了它就沒事了。

四、自定義Sublime

　　誠然，Sublime漂亮，強大，甚至有些人第一眼就會愛上它（我就是）。但是對其來個“私人定制”，就會從好使變得完美。

　　1.快捷鍵定制，主題定制，View里邊的Hide Or Show定制，略...

　　2.插件定制

　　（1）Emmet定制

　　依次點擊Preferences -> Browse Packages...,在眾多的插件文件夾里找到Emmet，進去，里邊有個Emmet.sublime-settings，真奇怪，我們發現這個文件沒有后綴名，管他吶，打開它，把滾動條拉倒最下面，然后你會看大一個配置參數“syntaxProfiles”，把里邊的“html”的值改為“xhtml”，然后再在逗號后加上“html”：{“attr_quotes”：“single”}，示例如下：

1 "syntaxProfiles": {
2     "html": "xhtml",
3     "html": {
4         "attr_quotes": "single"
5     }
6 }

　　這樣做可以解決兩個問題，其一：Emmet自動產生的HTML單標簽是不閉合的問題（例如input、img等是沒有閉合的"/"的），其二：Emmet自動產生的HTML標簽里的屬性的值用的是雙引號的問題（這個看個人習慣，我是比較喜歡用單引號）; 

　　（2）jQuery定制

　　同樣在打開的Packages文件夾里找到jQuery，里邊都是一些自動生成的代碼的模板，以ajax.sublime-snippet為例：

 1 <snippet>
 2     <content><![CDATA[\$.ajax({
 3     url: '${1:/path/to/file}',
 4     ${2:type: '${3:default GET (Other values: POST)}',}
 5     ${4:dataType: '${5:default: Intelligent Guess (Other values: xml, json, script, or html)}',}
 6     ${6:data: {param1: 'value1'\},}
 7 })
 8 ${7:.done(function() {
 9     console.log("success");
10 \})}
11 ${8:.fail(function() {
12     console.log("error");
13 \})}
14 ${9:.always(function() {
15     console.log("complete");
16 \})};
17 $0]]></content>
18     <tabTrigger>ajax</tabTrigger>
19     <description>$.ajax()</description>
20     <scope>source.js</scope>
21 </snippet>

　　跟之前'aj'回車產生的代碼比較一下，刪掉自己不想要的：

 1 <snippet>
 2     <content><![CDATA[\$.ajax({
 3     url: '${1:/path/to/file}',
 4     ${2:type: '${3:GET}',}
 5     ${4:dataType: '${5:json}',}
 6     ${6:data: {param1: 'value1'\},}
 7 })${7:.done(function(data) {
 8     console.log("success");
 9 \})}${8:.fail(function() {
10     console.log("error");
11 \})};
12 $0]]></content>
13     <tabTrigger>ajax</tabTrigger>
14     <description>$.ajax()</description>
15     <scope>source.js</scope>
16 </snippet>

　　修改保存，回到代碼頁，'aj'回車：

$.ajax({
    url: '/path/to/file',
    type: 'GET',
    dataType: 'json',
    data: {param1: 'value1'},
}).done(function(data) {
    console.log("success");
}).fail(function() {
    console.log("error");
});

　　（3）Javascript以及其它的讓你看着不順眼的插件里的代碼模板都可以這樣改，如果你要問我這些模板里的代碼什么意思，Sorry，I don't know。

五、好使的操作

　　1.快捷鍵

　　CTRL + R：查找關鍵字

　　CTRL + G：跳到相應行

　　CTRL + T：交換選中的內容（CTRL，選中內容，CTRL不松，選中另外的內容）

　　CTRL + C：復制光標所在行

　　CTRL + X：剪切光標所在行

　　CTRL + SHIFT + K：刪除光標所在行

　　CTRL + P：查找文件（文件或包含文件的項目文件夾已拖入右側的Side bar中）

　　2.批量查找替換

　　右側Side Bar中文件夾右鍵，Find in Folder...，Find批量查找，Replace批量替換。

　　3.標簽欄（Tabs）操作

　　雙擊標簽欄空地：產生新的空白文檔

　　點擊標簽欄拖動：拖動標簽欄

　　4.格式化JSON

　　雙擊標簽欄空地，把亂數據貼進去，右下角Plain Text -> Javascript -> JSON，然后CTRL + SHIFT + H(前提是已經裝了上面提到的格式化的工具)

　　5.多欄

　　View -> Layout

六、不足

　　我沒有找到自動補全插入文件路徑的插件，引入js、css、圖片等的路徑都得手敲，望哪位神通廣大的知曉此種插件的同學予以告知，Over。