學習web前端之神器sublime text 3


  

  第一次在博客園寫博客,以前都是看別人寫的技術在自己慢慢的學習。現在想自己把每天學習的東西理解並記錄下來,加深下印象以后可以做個回顧。不知道自己能否堅持每周至少寫2篇博文。

  古話說的好:工欲善其事,必先利其器。所以我們要找到一個神器來幫助我們更好的學習前端開發,要么記事本怎么樣?不錯是不錯估計要寫到猴年馬月了。

  百度一搜,web前端開發利器有很多,比如:EditPlus,Dreamweaver,HBuilder,Webstorm,Aptana Studio,Sublime text,這么多最后我還是選擇了sublime,據說是前端開發神器。

  Sublime text:輕量級IDE(集成開發環境),神器神在可擴展性,並包含大量實用插件,我們可以通過安裝自己領域的插件來成倍提高工作效率。擁有高效、沒有干擾的界面,在編輯方面的多選、宏、代碼片段等功能。

一、安裝Sublime Text 3

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

  

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

二、安裝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過程中會有點卡頓。

三、安裝插件

   上面已經安裝了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插件,如果你需要更多百度一下,根據你的喜好去下載你喜歡的插件。

四、快捷鍵

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

  sublime通用的快捷鍵這里就不談了,因為百度上有一堆。下面我要談的是如何設置自己的快捷鍵。

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

  

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

  這時候就要用到Key Bindings - User 

    配置的話跟默認的一樣去配置,json格式:

    

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

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

  比如:上圖的事件是打開一個新的編輯窗口,當我感覺這個快捷鍵使用的不爽,於是就修改為ctrl+shift+.保存即可,當然在默認里面是修改不了,把默認中的代碼復制到User中。當你在按下快捷鍵的時候他會執行你User中的快捷鍵,而不是執行Default中的快捷鍵。

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

五、自定義快捷鍵

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

  如何查看命令?

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

  輸入 sublime.log_commands(True) 然后回車, 就能監控你所操作的命令。

  

  下面就舉個列子,現在我們寫好了代碼想看效果,一般都在HTML編輯器中鼠標右擊Open in Browser(在瀏覽器中打開)。這種方式不爽,因為我還要去動鼠標。

  要獲取"在瀏覽器中打開"這個功能的命令就需要你操作一次,並在控制台中觀察它的命令

  

  這樣控制台就顯示出我們剛剛操作的命令,然后在Key Bindings - User 中設置自己的快捷鍵。

  

  保存即可。然后就可是使用你自己的定義的快捷鍵。

  注意:當你設置快捷鍵后,怎么按都不起作用時,並不是你設置錯誤,是你的快捷鍵和其他軟件或者命令沖突。當快捷鍵沖突的時候sublime並不會提示你,只是不起作用,這時候你可以換個快捷組合方式去試試

六、sublime不錯的功能

  按TAB切換到編輯區

  

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

  

  

  Ctrl+J合並多行

  

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM