大學畢業以後,因為一些個人瑣事沒有找到自己專業的對口工作,整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕,怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源,開始自學一些web方面的知識。 經過小段時間的學習,發現自己之前真的是孤陋寡聞 ...
大學畢業以後,因為一些個人瑣事沒有找到自己專業的對口工作,整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕,怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源,開始自學一些web方面的知識。
經過小段時間的學習,發現自己之前真的是孤陋寡聞,如今的網路學習資源真的挺多的,比如最先接觸的網易雲課堂http://study.163.com/,而後遇到的慕課網http://www.imooc.com/,再之後碰見的實驗樓https://www.shiyanlou.com/等等。雲課堂的界面設計的很不錯,課程也很多;慕課網自不必說,程式員的修煉之地,在裡面學習了一些基礎知識,講的內容很不錯;實驗樓是之後無意間發現的,他的特點是會給一個虛擬的Linux環境,讓你在Linux下學習,真的就感覺像在學校做實驗,不過不知道是不是我的電腦的問題,有時候會莫名的卡頓。
而今天要說的主角Brackets也正是在實驗樓的環境里認識的,當時感覺這個編輯器的界面就是簡潔,方便;後來在自己的電腦上搜這個編輯器,沒想到在win系統下也有,而且網上的評價也都不錯,大有火紅一片的趨勢。所以現在簡單的來介紹一下。
Brackets是一個開源的基於HTML/CSS/JavaScript開發的集成開發環境。項目由Adobe創建和維護。支持Windows和Linux平臺。Brackets的特點是簡約、快捷,它的核心目標是減少在開發過程中那些效率低下的重覆性工作,例如瀏覽器刷新,修改元素的樣式,搜索功能等等。
前往Brackets download頁面下載所需版本。
一、Brackets的界面
打開Brackets,整個界面很簡。左側為項目組織結構的文件樹,使用Ctrl/Cmd+Shift+H可以呼出與關閉文件樹。右側為編輯區,上部為菜單欄,中部為文檔區域,下部為提示區域。
而且最新版本的Brackets還可以選擇皮膚和字體:
這是自帶的dark皮膚,個人感覺超級不錯的。
二、文本編輯
Brackets會自動檢測你的代碼是否符合規範,併在下方進行提示;
把游標放在class和id標簽上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。Brackets將搜索項目下所有CSS文件,然後打開一個內嵌的編輯器嵌入在HTML文件中,可以讓你迅速修改CSS代碼。
Brackets同樣支持對JS對象定義的快速預覽/編輯,把游標放在一個js函數名稱上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。
Brackets內建取色器,提供RGBa、HEX、HSLa的顏色編碼形式。把游標放在一個顏色編碼上,按下Ctrl/Cmd + E(“編輯”),退出取色器視窗需要使用Esc鍵。
三、即時預覽
最值得一說的當然是Brackets的即時預覽功能了。
Brackets使用時預覽功能時,Brackets調用Chrome瀏覽器打開當前頁面,此後修改html、css、javascript並保存後,所修改的內容會即時響應到瀏覽器中的頁面,無須手動刷新頁面。這是Brackets最大的一個亮點,有兩個顯示器的coder有福了,可以分屏顯示Brackets和chrome,即時修改即時預覽,無需切換編輯器/瀏覽器和刷新頁面。
不過目前即時預覽功能的還有一些限制:
它僅適用於Chrome瀏覽器為目標瀏覽器,你必須安裝Chrome。
它依賴於在Chrome瀏覽器中的遠程調試功能,這是一個命令行標誌啟用。在Mac上,如果你已經在使用Chrome瀏覽器,這時啟動“即時預覽”,Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠程調試功能。
只能同時對一個HTML文件進行預覽 - 如果切換另一個HTML文件,Brackets將關閉原來的預覽。
四、必備插件
為了提高效率,怎麼能少的了萬能的插件呢,下麵就推薦幾個Brackets的插件,讓你的的擼代碼速度起飛。
1、Can I us
不用離開 Brackets 就可以查看當前瀏覽器是否支持某個特定的 WEB 技術。
2、HTML Skeleton
HTML Skeleton 可以快速的為你的 HTML 文件插入基本的標簽,如doctype聲明、<html>、<head>、<body>等等。
3、Brackets Icons
這是一個非常簡單的插件,它為你的 Brackets 邊欄添加文件圖標。該圖標視覺體驗非常好,可以快速幫你識別出你要編輯的文件的類型。
4、JS CSS Minifier
這個插件為你的 JavaScript 和 CSS 文件移除不必要的字元。這個過程成為壓縮,它可以提升網頁的載入速度。
5、Emmet
如果你從事Web前端開發的話,該插件一定是必不可少的。它可以加快你的 HTML 和 CSS 編寫速度。
6、Beautify
這個插件可以讓你的 HTML、CSS、JavaScript 等代碼格式化一致,從而提升可讀性。
當然還有很多有用有意思的插件,這裡就不一一介紹了,感覺不錯的朋友自己去體驗一下吧。
我是黃金小蘿蔔頭,一個IT屆的小菜鳥,歡迎大家一起分享自己的心得體會。
文章如需轉載請註明轉載自:http://www.cnblogs.com/Elecrabbit/articles/6442481.html