新手必需用！大道至簡的前端編輯器Sublime Text

本文轉載於:猿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哈！