Sublime Text 介紹
首先在開始前，先來介紹一下 Sublime Text。
Sublime Text 是一個代碼編輯器（Sublime Text 是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。
Sublime Text是由程序員Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim。
Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。
還可自定義鍵綁定，菜單和工具欄。
Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。
Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。
用過電腦，搞過開發的人都知道，一個好用的 IDE 能省多少事，但是很多時候我們需要的僅僅是一些簡單的基礎開發，我們就可以去使用我們的 Sublime Text 了。
除此之外，還有幾款開發工具也非常推薦。
ATOM（https://atom.io/）
HBulier（http://www.dcloud.io/）
WebStorm（https://www.jetbrains.com/webstorm/）
當然，也不能少了我們今天的主角。
Sublime Text（http://www.sublimetext.com/3）
需要注意，如果你需要下載，請下載符合你當前電腦的對應版本。
到官網下載好Sublime編輯器，直接官網下載就行了，不用錢的，不要去下載別的亂七八糟的版本。
安裝package control
Sublime是之所以受到那麼多程序員追捧的原因就是因為其靈活。
而其中自有的插件安裝更是其靈活的主要原因。
安裝插件必不可少的是先安裝package control。
如果你的sublime還沒安裝package control，那先安裝好了再開始漢化吧！
安裝好了之後，先打開編輯器，然後找到頂部菜單的Tools菜單，如下圖所示
然後選擇Tools菜單下面的Command Paletter選項，如下圖所示
在打開的命令行模式輸入框中，輸入pac，然後回車安裝，如下圖所示
稍等片刻以後，軟件會提示以下的信息，證明工具已經安裝好了，如下圖所示
安裝完了以後需要關閉軟件，然後重新啟動軟件。
重啟以後，在菜單欄的preferences菜單下你會看到Package Settings和Package Control兩個選項，以後會用到他們
使用官方漢化插件實現漢化
打開sublime，找到preference 下的package control
點擊package control ，彈出如下框搜索install
找到install package點擊進入
稍等一會，彈出如下界面
搜索localiza，找到如下選項，極為中文插件，點擊安裝
出現如下界面即完成安裝
安裝完成了，這是漢化好的界面
在設置裡面也可以直接更換語言
就這樣漢化就完成了。
自動補全提示
其實這個步驟，用英文版會簡單一點，介於有一部分學員喜歡用英文版的，在企業也是英文版更加專業，所以我用英文版演示
點擊菜單欄的：Preferences;選擇：Setting-User項;
然後在大括號輸入以下兩項設置，可以直接複製就行了：
"auto_complete": true,
"auto_match_enabled": true
設置完先保存，再關掉sublime text ;
重啟，新建一個HTML文件，就會有提示了。
英文界面：menu-》Preferences-》Setting-User-》加上這一句 ,"auto_complete": true,"auto_match_enabled": true-》保存-》關閉編輯器-》重新打開-》完成
中文界面：菜單欄-》首選項-》設置-用戶-》加上這一句 ,"auto_complete": true,"auto_match_enabled": true-》保存-》關閉編輯器-》重新打開-》完成
Sublime Text 的插件推薦
Emmet
功能：編碼快捷鍵，前端必備
簡介：Emmet作為zen coding的升級版，對於前端來說，可是必備插件，如果你對它還不太熟悉，可以在其官網上看下具體的演示視頻。
使用教程： http://docs.emmet.io/cheat-sheet/
html-css-jsprettify
功能：對Html，css，js文件進行格式化
簡介：代替了JsFormat 和 CSSFormat
使用：快捷鍵Windows: ctrl+shift+i
快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數組內）
{“keys”: [“ctrl+shift+i”],”command”: “htmlprettify”},
CSSComb
功能：用來給CSS屬性進行排序的格式化（處女座必備）
簡介：按一定的順序排列
使用：到https://github.com/csscomb/sublime-csscomb下載插件包，放到sublime text文件夾的\\Data\\Packages\\User目錄裡
快捷鍵：ctrl+shift+c
ColorHighlighter
功能：方便調色
簡介：它可以展示你所選擇的顏色代碼（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正顏色。同時它還包含一個顏色選擇器讓你可以方便地更改顏色。
使用：快捷鍵Windows: ctrl+shift+w
快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數組內）
{ “keys”: [“ctrl+shift+w”],”command”: “color_picker”,”context”: [{“key”: “color_highlighter.color_picker”}]},
Trailing spaces
功能：檢測並一鍵去除代碼中多餘的空格
簡介：還在糾結代碼中有多餘的空格而顯得代碼不規範？或是有處女座情節？次插件幫你實現發現多餘空格、一鍵刪除空格、保存時自動刪除多餘空格，讓你的代碼規範清爽起來
使用：安裝插件並重啟，即可自動提示多餘空格。一鍵刪除多餘空格：CTRL+SHITF+T（需配置），更多配置請點擊標題。
快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數組內）
{ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” },
auto-save
功能：自動保存文件
簡介：為保存提供了方便
使用：默認是不會自動保存，按快捷鍵Ctrl+Shift+S開啟。
快捷鍵配置方法：首選項-快捷鍵設置，在數組內添加{ “keys”: [“ctrl+shift+s”], “command”: “auto_save” },如需自動啟用，首選項-插件-auto-save—settings-usre粘帖一下配置
{
“auto_save_on_modified”: true,
“auto_save_delay_in_seconds”: 10,
“auto_save_all_files”: true,
“auto_save_current_file”: “”,
“auto_save_backup”: false,
“auto_save_backup_suffix”: “autosave”
}
view in browser
功能：通過默認瀏覽器打開文件
簡介：方便打開瀏覽器檢查編譯效果
使用：快捷鍵配置方法：首選項-快捷鍵設置，在數組內添加快捷鍵：F12{ “keys”: [“f12”], “command”: “open_in_browser” },
autoprefixer(下載超慢)
功能：CSS添加私有前綴
簡介：CSS還未標準化，所以要給各大瀏覽器一個前綴以解決兼容問題
使用：快捷鍵配置方法：首選項-快捷鍵設置，在數組內添加{ “keys”: [“ctrl+shift+enter”], “command”: “autoprefixer” },
快捷鍵：ctrl+shift+enter
CSS Extended Completions
功能：關聯CSS文件，智能提示css文件中的類名，非常好用
JavaScript Completions
功能：支持javascript原生語法提示，媽媽再也不用擔心我輸入document.getElementById(id)
jQuery
功能：jQ函數提示
簡介：快捷輸入jQ函數，是偷懶的好方法
AutoFileName
功能：快捷輸入文件名
簡介：自動完成文件名的輸入，如圖片選取
使用：輸入”/”即可看到相對於本項目文件夾的其他文件
SublimeLinter
功能：代碼檢查
簡介：支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多種開發語言
使用：需要配置相應語言的環境，要檢查JavaScript代碼需要安裝node.js，檢查PHP代碼需要安裝PHP並配置環境等。
SideBarEnhancements
功能：擴充邊欄菜單的功能
簡介：包括在當前工程文件夾中新建文件，移動文件或文件夾，產生文件或文件夾的副本，在新窗口或瀏覽器中打開，刷新等。
Bracket Highlighter
功能：代碼匹配
簡介：可匹配[], (), {}, “”, ”, ，高亮標記，便於查看起始和結束標記
Monokai Extended
功能：主題
簡介：如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended
使用：首選項-> 配色方案 -> User -> Monokai Extended
全文快捷鍵配置
[ { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },
{ "keys": ["ctrl+shift+s"], "command": "auto_save" },
{ "keys": ["f12"], "command": "open_in_browser" },
{ "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },
{ "keys": ["ctrl+shift+i"],"command": "htmlprettify"},
{ "keys": ["ctrl+shift+w"],"command": "color_picker","context": [{"key": "color_highlighter.color_picker"}]},
]
閱讀更多 WEB開發李家靖 的文章
