學習web前端之神器sublime text 3

　　

　　第一次在博客園寫博客，之前都是看別人寫的技術在本身慢慢的學習。如今想本身把天天學習的東西理解並記錄下來，加深下印象之後能夠作個回顧。不知道本身可否堅持每週至少寫2篇博文。

　　古話說的好：工欲善其事,必先利其器。因此咱們要找到一個神器來幫助咱們更好的學習前端開發，要麼記事本怎麼樣？不錯是不錯估計要寫到猴年馬月了。

　　百度一搜，web前端開發利器有不少，好比：EditPlus，Dreamweaver，HBuilder，Webstorm，Aptana Studio，Sublime text,這麼多最後我仍是選擇了sublime，聽說是前端開發神器。

　　Sublime text：輕量級IDE（集成開發環境），神器神在可擴展性，幷包含大量實用插件，咱們能夠經過安裝本身領域的插件來成倍提升工做效率。擁有高效、沒有干擾的界面，在編輯方面的多選、宏、代碼片斷等功能。

1、安裝Sublime Text 3

　　官網/下載網站：http://www.sublimetext.com/3

　　

　　對應這各個版本，選擇最適合你係統的版本下載安裝，大約7MB左右，直接下一步便可

2、安裝Package Control

　　安裝好了這時候咱們想要sublime用的更稱手，要安裝一個基礎的也是sublime必備的包管理：Package Control，用來之後安裝插件用的。

　　點擊菜單 View -> Show Console或者 Ctrl + `  會在底部出現一個命令輸入框（sublime控制檯），而後將下面的命令拷貝到輸入控制檯中，回車，等待，安裝成功。

　　安裝代碼和指導地址:https://packagecontrol.io/installation

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

　　在安裝Package Control過程當中有時候會出先錯誤，可是安裝仍是成功的，並無什麼影響。若是安裝失敗建議你關掉sublime而後在重複上面的操做，在安裝Package Control過程當中會有點卡頓。

3、安裝插件

　　 上面已經安裝了Package Control，這是時候咱們能夠經過快捷鍵　 Ctrl + Shift + P 打開命令面板，而後輸入pack就會出現安裝

　　

　　點擊紅色框中的安裝，稍做等待

　　

　　安裝成功後的界面

　　成功安裝Package Control以後，這時候咱們在經過 Ctrl + Shift + P 　　打開命令面板輸入想要安裝的插件：

　　在安裝插件中也須要等待:

　　

　　做爲一個前端開發人員，我認爲須要的插件：

1. Emmet：（誰用誰知道）快速生成代碼段插件，熟練使用讓你鍵步如飛
   

   如何使用百度一下，你就知道。

2. ConvertToUTF8：直接在菜單欄中能夠轉了，專爲中文設計，媽媽不再通擔憂中文亂碼問題了
   
3. BracketHighlighter：顯示我在哪一個括號內
4. JSFormat：Javascript的代碼格式化插件
5. AutoFileName：自動完成文件名的輸入，如圖片選取
6. Sublime CodeIntel：代碼自動提示
7. Bracket Highlighter：相似於代碼匹配，能夠匹配括號，引號等符號內的範圍。
   

 　　這只是一小部分sublime插件，若是你須要更多百度一下，根據你的喜愛去下載你喜歡的插件。

4、快捷鍵

　　做爲一個開發人員熟練使用快捷鍵是必須的，這樣才能事半功倍。

　　sublime通用的快捷鍵這裏就不談了，由於百度上有一堆。下面我要談的是如何設置本身的快捷鍵。

　　當你發現你下了一堆插件，可是有時候去使用一些插件的快捷鍵卻怎麼按都不會出現效果，我想這時候你是快捷鍵衝突了。sublime中的默認快捷鍵在編輯器中是沒法修改的，這時候你須要自定義快捷鍵，如何自定義下面分享：

　　

　　Key Bindings - Default是sublime默認的快捷鍵，點開他你想修改可是sublime是不會讓你修改的。

　　這時候就要用到Key Bindings - User 

　　　　配置的話跟默認的同樣去配置，json格式:

　　　　

　　Keys:須要設置的快捷鍵組合

　　command:按下快捷鍵發生的sublime命令,sublime根據命令發生相應的事件。

　　好比：上圖的事件是打開一個新的編輯窗口，當我感受這個快捷鍵使用的不爽，因而就修改成ctrl+shift+.保存便可，固然在默認裏面是修改不了，把默認中的代碼複製到User中。當你在按下快捷鍵的時候他會執行你User中的快捷鍵，而不是執行Default中的快捷鍵。

      這個修改快捷鍵不難，如何去定義一個沒有不知道命令的快捷鍵

5、自定義快捷鍵

　　在sublime作任何事情都會有一個命令

　　如何查看命令？

　　打開sublime控制檯，前面已經說過控制檯打開方式：點擊菜單 View -> Show Console或者 Ctrl + `會在底部出現一個命令輸入框（sublime控制檯）

　　輸入 sublime.log_commands(True) 而後回車， 就能監控你所操做的命令。

　　

　　下面就舉個列子，如今咱們寫好了代碼想看效果，通常都在HTML編輯器中鼠標右擊Open in Browser(在瀏覽器中打開)。這種方式不爽，由於我還要去動鼠標。

　　要獲取"在瀏覽器中打開"這個功能的命令就須要你操做一次，並在控制檯中觀察它的命令

　　

　　這樣控制檯就顯示出咱們剛剛操做的命令，而後在Key Bindings - User 中設置本身的快捷鍵。

　　

　　保存便可。而後就但是使用你本身的定義的快捷鍵。

　　注意：當你設置快捷鍵後，怎麼按都不起做用時，並非你設置錯誤，是你的快捷鍵和其餘軟件或者命令衝突。當快捷鍵衝突的時候sublime並不會提示你，只是不起做用，這時候你能夠換個快捷組合方式去試試

6、sublime不錯的功能

　　按TAB切換到編輯區

　　

　　Shift+鼠標右鍵多行選中以及多行編輯

　　

　　

　　Ctrl+J合併多行

　　

 

　　到了這裏就要結束今天的博文了。寫了半天，第一次寫。但願是個好的開始。堅持下來。若有不對之處，還但願各位能指導我這位前端新人。