分享自己使用的編輯器--Sublime Text

很多人在進入學習前端的時候（包括我自己），除了選擇學習合適的技術，還需要一個得（自）心（己）應（喜）手（歡）的開發工具，一個得心應手的開發工具除了可以令你的效率大大提高，也可以令你在寫程式碼的時候，心情舒暢O(∩_∩)O。

    我的第一個前端開發工具就是Sublime Text ，說我對它的理解吧。

   在學習前端的時候，我也像很多人那樣上網搜一搜前端開發應該選擇什麼樣的開發工具，一搜，結果幾乎大部分結果都是推薦Sublime ，於是乎下載了一個，結果下載完打開一看，黑乎乎的窗體，一點也不華麗啊（sublime 的中文譯名就是「華麗的」），後來自己琢磨和網上百度了一段時間，終於明白了為啥這麼多人說sublime 好用，很重要的一個原因是它的“自訂性”，就是在sublime裡面，你想要的一切，都可以自訂，自己選擇。自己去改變；和另一個特性：快捷鍵快速寫或許有人會問，這不是瞎折騰嗎？什麼都需要自己配自己去搗鼓。但是，到了後面自己寫程式碼的時候，就會明白，這所有的「瞎折騰」都是必要的。用Sublime 寫一些簡單的demo 的頁面那是非常快的，但是，Sublime 也有明顯的缺點，對專案的管理等不太方便，程式碼提示不如其他IDE強大

#   

    1. 跨平台的編輯器。

    同時支援Windows、Linux、Mac OS X等作業系統，輕量的編輯器，支援各種程式語言。

 

   2.sublime 的外掛機制。

(怎麼安裝外掛這裡就不多說了，網路上有很多很好的文章)說真的，安裝的外掛不需要太多，裝太多還不如用專業的IDE（整合開發環境），分享我自己用得心應手的幾個插件吧；同一個sublime 的插件，手動下載後，放進無論是windows系統，還是放進去Mac 系統，都能安裝。

 Emmet

 

  Emmet   # 這個是必須的，html ,css,js 的快速智慧提示它都能提供，而且還提供各種快速產生頁面html 頁面骨架的快捷鍵.

     

     

# Sublime Server

#sublime 本身瀏覽頁面的方式，預設是用檔案路徑的方式去存取的，並不是以http localhost:8080/的方式去存取頁面，這很容易發生一些檔案路徑的誤差。

 

#當安裝了Sublime Server 外掛程式之後，就可以使用 htttp 的方式去存取頁面了。安裝完後在「工具  -  sublime server-  star sublime server」打開，之後，在頁面點選滑鼠右鍵「View in sublimer」之後，可以得到  

 

#

 Andy JS2

上面說的Emmet 外掛程式對JavaScript 的程式碼提示支援是有限的，因此，可以，安裝AndyJS2這個外掛程式彌補這個缺陷，由於在套件管理工具上面已經不能搜尋到這個插件，因此，可以手動把這個插件下載下來，下載地址：   下載下來後，直接把資料夾裡面的文件拷貝到「首選項- Package」裡面，此時就完成安裝了

這時候，再去寫JS 程式碼，就會發現，多了很多其他的智慧提示。

也許會有人說，智慧提示不強要裝這麼多插件，用它sublime幹嘛，不如用IDE，例如Webstorm或visual studio ，但是，如果是新手學習，想更熟悉一些文法和程式碼，那麼，請一試sublime，這個“華麗的智能提示” O(∩_∩)O

 

#ConverToUTF8

如果頁面出現亂碼了，可以安裝這個外掛程式來解除亂碼，這個也是必備的外掛。

AllAutoComplete 與PackageResourceViwer 

對於資料夾內檔案的智慧提示，搭配修改sublime預設的配置，可以設定CSS 類別名稱提示，在知乎上有大神的教程位址如下 

 

也可以利用PackageResourceViwer 修改sublime 側邊欄的樣式和字體大小等

這些是部落客自己安裝的外掛程式

 

  

3.sublime 自帶的快速鍵快速寫

   （1）上面說的，配合Emmet 快速產生頁面骨架

     注意，先點右下角  選擇「HTML」格式或先「ctrl + s」儲存頁面

     在空白頁面寫上 html:xt   //按著鍵盤的tab 鍵就可以產生xhtml 的頁面骨架

 

在空白頁面寫上 html:5  //按著鍵盤的tab 鍵就可以產生html5 的頁面骨架     

#   (2)html,CSS，快速語法

#    

#    

#################    ####### ###   ### 類似的文法還有很多很多，這裡列舉了幾個常用的，其餘的可以上網搜一下就有，很多。 ############ （3）跨行齊編輯#########    ###做法：在需要編輯的文字裡，按住滑鼠滾輪鍵，注意，是按住滑鼠滾輪鍵，然後把滑鼠往下拉，拉到那些需要編輯的文字的行裡，會出現一條豎線，這時候就可以開始編輯了，如圖############# #####  ###對我自己而言，Sublime Text 確實是個不錯的程式碼編輯器，我以後會再寫兩個我也喜歡的編輯器Visual Studio Code 和 IDE Webstorm。 ######

   第一篇長的博文就先寫到這裡了，不得不說，寫博客確實是件挺累人的事情，差不多跟在學校寫報告差不多，但是，能溫故而知新，想起很多以前學到的和接觸到的東西，這是一件好事情O(∩_∩)O哈！

以上是分享自己使用的編輯器--Sublime Text的詳細內容。更多資訊請關注PHP中文網其他相關文章！