前言
今天爲大家分享一款我用了很久的編輯器：sublime text 3。它的輕便和高度可定製化，是我覺得最棒的地方。本文會涉及到 sublime text 3 的方方面面，方便自己的同時，也希望能幫到你。
安裝與初始化
首先，可以在 官網 下載最新版的安裝文件。選擇對應的平臺，我用的是 mac 版，最新的安裝包也才 15.2 M，真的很輕量了。
安裝完成後的第一件事，就是按照自己的習慣進行定製啦~
打開 Preferences->Setting，會分屏顯示目前的配置。左側爲 Setting-Default 的系統默認配置，不需要動它。一般我們會在右側的 Setting-User 中添加定製化的配置，我的配置表如下：
{
// 默認使用Unix換行符，統一風格
"default_line_ending": "unix",
// 編寫代碼時，右側的代碼地圖的可視區域部分是否加上邊框
"draw_minimap_border": true,
"font_face": "monaco",
// 顯示的字體大小
"font_size": 14,
// 突出顯示當前光標所在的行
"highlight_line": true,
"line_padding_bottom": 1,
// 設置每一行到頂部，以像素爲單位的間距，效果相當於行距
"line_padding_top": 1,
"tab_size": 4,
// 使用空格填充 tab 鍵
"translate_tabs_to_spaces": true,
// 保存文件時會刪除每行結束後多餘的空格
"trim_trailing_white_space_on_save": true,
// 關閉自動更新檢查
"update_check": false,
// 自動換行
"word_wrap": "true"
}快捷鍵
快捷鍵的熟練使用，可以提高你的編碼效率。sublime 的快捷鍵有很多，下面列舉的這些常用的快捷鍵，希望能給還不太熟悉的童鞋一些幫助。
插件
想要優雅地使用 sublime，插件則是不可缺少的存在。強大的插件功能，造就了它無與倫比的擴展性。
在安裝插件之前，首先需要安裝 Package Control 組件（它本身也是個插件哦~）。
點擊 sublime 的菜單欄 view->show console，打開控制檯，然後運行以下代碼：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())等待幾秒鐘後，如果能在下圖中看到 Package Control，就表示安裝成功了。
安裝插件也十分簡單，點開上圖的 Package Control，直接搜索你想安裝的包即可。
接下來，會列舉一些非常實用的插件，並簡單介紹其各自的使用場景。
Material-Theme
個人比較喜歡的主題，本文的截圖用的正是這個主題。
用法：下載成功後，只需要修改 Preferences->Setting 的 Setting-User，引入主題。具體配置如下：
{
// 引入下載的主題包
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
// 設置主題
"theme": "Material-Theme.sublime-theme",
// 用來將已修改的代碼的標籤高亮
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
...
}babel
用於 react 的語法高亮。
安裝後，打開 .js, .jsx 後綴的文件，打開菜單 view， Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，選擇 babel 爲默認 javascript 打開 syntax。
SCSS
支持 sass 語法提示。
相比於 SASS，SCSS 更適合 .scss 的語法支持。因爲 SASS 在某些情況下會被其他的插件影響而導致語法提示失效，這時可以引入另一個插件 Syntax Highlighting for Sass，來解決這個問題。
但如果直接用 SCSS，則不會出現這個問題。
html5
支持hmtl5規範的插件包。
使用方法：新建 html 文檔 > 輸入 html5 > 敲擊 tab 鍵 > 自動補全 html5 規範文檔。
git 和 git blame
安裝 git 可以在底部狀態欄顯示當前文件的 git 狀態。
而 git blame 則用於查看 git 記錄。很讚的一點是，它可以查看每一行代碼在 git 上的記錄，包括 提交人、提交時間以及標識。
docblockr
快速幫你爲代碼建立文檔。它會解析函數，變量，和參數，根據它們自動生成文檔，你只需要去填充對應的說明即可。
用法：'/**' 快捷鍵能快速生成函數註釋。
EditorConfig
控制代碼的縮進等的代碼規範插件。
安裝好之後，在工程中創建文件.editorConfig，例如：
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = falseBracket Highlighter
可匹配 []、()、{}、""、''、<tag></tag>，高亮標記，便於查看起始和結束標記。
SideBarEnhancements
增強 sublime 的右鍵功能，包括拷貝、粘貼、刪除、重命名等。
AutoFileName
可以自動補全文件名，如圖片選取。比如：輸入 "/" 即可看到相對於本項目文件夾的其他文件。
ConvertToUTF8
將文件轉碼成 UTF-8。用於編輯並保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。安裝插件後自動轉換爲 UTF-8 格式。
GBK Support
可識別 UTF-8 格式的中文，不識別 GBK 和 ANSI，因此打開很多含中文的文檔都會出現亂碼。可以通過安裝插件 GBK Support，來識別 GBK 和 ANSI。
用法：打開一個 GBK 的文件，直接用 GBK encoding 模式另存爲即可。
FileDiffs
強大的比較代碼不同工具。用於比較當前文件與選中的代碼、剪切板中代碼、另一文件、未保存文件之間的差別。可配置爲顯示差別在外部比較工具，精確到行。
用法：右鍵標籤頁，出現 FileDiffs Menu 或者 Diff with Tab… 選擇對應文件比較即可。
下載插件被“牆”？
sublime text 3 很好用，但也會有些小問題。比如，國內用戶在使用 sublime 下載插件時，可能會出現 There are no packages available for installation 的問題。
這個問題出現的原因很簡單，就是獲取 Sublime Text 3 的網絡地址被“牆”了。
對於有梯子的童鞋，很容易解決。但對於更多的翻不了牆的童鞋，爲了給予方便，我找了一種解決方案。說白了也簡單，就是使用別人能夠訪問的地址就行了唄，比如 github。
https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json該如何使用呢？
在 "Preferences -> Package Settings -> Package Control -> Settings User" 中新添加一個項 "channels"。
"channels":[
"https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json"
],然後，快去下載插件試試吧~
總結
sublime 用了挺久了，因爲感覺很棒，正是我喜歡的風格。分享給有需要的朋友~
PS：歡迎關注我的公衆號 “超哥前端小棧”，交流更多的想法與技術。
