Brackets介紹

最近開始使用一個新的編輯器，是Adobe開發的開源的專案，與Sublime Text2相比有兩點優勢：1.可以實時預覽；2.可以快速編輯，在HTML可以編輯CSS和JS程式碼。

Adobe Brackets是一個開源的基於HTML/CSS/JavaScript開發，執行在native shell上的整合開發環境。該專案由Adobe建立和維護，根據MIT許可證釋出。提供Windows和OS X平臺支援。

Brackets的特點是簡約、快捷，沒有很多的檢視或者面板，它的核心目標是減少在開發過程中那些效率低下的重複性工作，例如瀏覽器重新整理，修改元素的樣式，搜尋功能等等。

在這裡我還是要推薦下我自己建的web前端開發學習群：617327703，群裡都是學web前端開發的，如果你正在學習前端 ，小編歡迎你加入，今天分享的這個案例已經上傳到群檔案，大家都是軟體開發黨，不定期分享乾貨（只有前端軟體開發相關的），包括我自己整理的一份2018最新的前端進階資料和高階開發教程，歡迎進階中和進想深入前端的小夥伴。

Brackets使用

官方提供簡體中文語言包，在選單欄處選擇debug->language->simple chinese就可更換為簡體中文版本

左側目錄樹頂部會顯示你最近開啟的正在工作的幾個文件，非常的方便。

Brackest會檢測文件是否符合html規範，並且還有JS錯誤提示，點選黃色三角感嘆號就會彈出錯誤提示，如下圖

把游標放在一個class或id屬性的標籤名稱上，按下Ctrl/Cmd + E（“編輯”）或退出編輯。Brackets將搜尋專案下所有CSS檔案，然後開啟一個內嵌的編輯器嵌入在HTML檔案中，可以讓你迅速修改CSS程式碼。唯一美中不足的是：搜尋的是專案下所有的CSS檔案，如果能修改成所搜當前檔案使用的CSS檔案就更好了。

Brackest同樣也支援JS的快速預覽和編輯。

Brackets內建取色器，提供RGBa、HEX、HSLa的顏色編碼形式。把游標放在一個顏色編碼上，按下Ctrl/Cmd + E（“編輯”），退出取色器視窗需要使用Esc鍵。

Brackets提供網頁即時預覽功能。使用該功能時，Brackets呼叫Chrome瀏覽器開啟當前頁面，此後修改html、css、javascript並儲存後，所修改的內容會即時響應到瀏覽器中的頁面，無須手動重新整理頁面。這是Brackets最大的一個亮點，有兩個顯示器的coder有福了，可以分屏顯示Brackets和chrome，即時修改即時預覽，無需切換編輯器/瀏覽器和重新整理頁面。

目前即時預覽功能的一些限制：

它僅適用於Chrome瀏覽器為目標瀏覽器，你必須安裝Chrome。

它依賴於在Chrome瀏覽器中的遠端除錯功能，這是一個命令列標誌啟用。在Mac上，如果你已經在使用Chrome瀏覽器，這時啟動“即時預覽”，Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠端除錯功能。

只能同時對一個HTML檔案進行預覽 – 如果切換另一個HTML檔案，Brackets將關閉原來的預覽。

Brackets快捷鍵

Ctrl/Cmd+Shift+H 可以撥出與關閉檔案樹

Ctrl/Cmd + E 快速預覽/編輯 css樣式/javascript函式

Ctrl/Cmd + +/- 放大縮小編輯區字型大小

Ctrl/Cmd + 0 重置編輯區字型大小

Ctrl/Cmd + Alt + P 開啟即時預覽功能

Ctrl/Cmd + / 行註釋

Ctrl/Cmd + Alt + / 塊註釋

不足：不支援程式碼摺疊。

Brackets外掛推薦

1.程式碼格式化外掛：Beautify

直接開啟Brackets 外掛管理器，搜尋安裝beautify。

安裝完畢後，選擇選單上的編輯→beautify（或使用快捷鍵ctrl+alt+L）完成程式碼格式化

2.HTML程式碼編輯：Emmet

最強大的HTML和CSS快速編輯外掛

3.CSS和JS壓縮外掛：Minify

很強大的外掛，集成了CSS和JS的壓縮，會在同個目錄下自動生成*.min.*格式的檔案。

4.css3程式碼自動補全外掛：auto prefix

使用CanIUse上的css3資料，自動補全css3字首和瀏覽器相容，不過可能有些新了。有一些舊版本的瀏覽器會被拋棄掉。

5.程式碼摺疊外掛：brackets-code-folding

安裝URL：https://github.com/thehogfather/brackets-code-folding

預設不支援程式碼的可摺疊功能。通過此擴充套件的安裝，對程式碼新增可摺疊功能。

6.當關閉編輯器時自動儲存所有開啟未儲存的檔案：Autosave Files on Window Blur

類似Sublime Text2、phpstorm / webstorm的風格，之前提到的不足全部解決了。

7.Brackets主題：theme

安裝URL：https://github.com/MiguelCastillo/Brackets-Themes

該擴充套件為一個用於使用基於CodeMirror的主題集的擴充套件。安裝該擴充套件後應用程式選單中出現“Themes”選單，開發者可以為應用程式介面從中選用一個主題。

其他的等待發現中，如果你發現有優秀的外掛，不妨給我推薦一下。

原創文章，請勿轉載

喜歡這篇文章的朋友，歡迎關注、收藏、轉發、評論，幫我上熱門，你的支援，是我每日更新的動力！

喜歡前端的朋友可以點選關注一下，每日分享精彩的前端文章！