很多人在進入學習前端的時候(包括我自己),除了選擇學習合適的技術,還需要一個得(自)心(己)應(喜)手(歡)的開發工具,一個得心應手的開發工具除了可以令你的效率大大提高,也可以令你在寫代碼的時候,心情舒暢 O(∩_∩)O。 我的第一個前端開發工具就是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哈!