首頁 > 開發者 > JavaScript
Brackets--我的初戀編輯器，brackets--我的初戀
大學畢業以後，因為一些個人瑣事沒有找到自己專業的對口工作，整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕，怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源，開始自學一些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.htmlStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
