本文轉載於:猿2048網站➪新手必需用！大道至簡的前端編輯器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這個外掛彌補這個缺陷，由於在包管理工具上面已經不能搜尋到這個外掛，因此，可以手動把這個外掛下載下來，下載地址：http://pan.baidu.com/s/1eSFzd2E   下載下來後，直接把資料夾裡面的檔案拷貝到“首選項- Package”裡面，此時就完成安裝了

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

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

 

ConverToUTF8

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

AllAutoComplete 和 PackageResourceViwer 

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

 https://zhuanlan.zhihu.com/p/21824377

還可以利用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哈！

      

 

     

 

 

        

 

   

 

 

 

相關推薦