Adobe Brackets是一個開源的基於HTML/CSS/JavaScript開發，運行在native shell上的集成開發環境。該項目由Adobe創建和維護，根據MIT許可證發佈。提供Windows和OS X平臺支持。
Brackets的特點是簡約、快捷，沒有很多的視圖或者面板，它的核心目標是減少在開發過程中那些效率低下的重複性工作，例如瀏覽器刷新，修改元素的樣式，搜索功能等等。
前去官網下載：http://brackets.io/
Extract for Brackets預覽版介紹
新發布的Brackets 1.0版本包括Extract for Brackets預覽版，Extract for Brackets是一個擴展，可自動從PSD(如顏色、字體、坡度和圖像等)抽取設計信息，並生成純淨的CSS。下面介紹新版新增功能，舊版功能請繼續往下看。
Brackets 1.0（Extract for Brackets）預覽版中最大的特點在於，可以直接導入PSD文件，然後直接獲取PSD中元素，並轉化成CSS，非常實用、方便。
最大支持2個窗口編輯，即可左邊直接寫html,右邊直接寫css,再也不用像舊版一樣在文件中來回切換了，加快了開發速度。
功能及使用介紹
官方提供簡體中文語言包，在菜單欄處選擇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將關閉原來的預覽。
部分快捷鍵
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.Brackets 代碼格式化的插件–beautify。
插件安裝方法（下同）
直接打開Brackets 插件管理器，搜索安裝beautify。
安裝完畢後，選擇菜單上的編輯→beautify（或使用快捷鍵ctrl+alt+L）完成代碼格式化（或者也可選擇beautify on load保存時自動格式化）。
如果不能在線安裝，可直接下載https://github.com/drewhjava/brackets-beautify後，解壓放到Brackets 插件目錄下（插件目錄Help 幫助>Show Extensions Folder 顯示擴展目錄），記得要放在user目錄裏，然後重啓Brackets ，就能看到beautify了。
注：新版brackets用以上方法安裝不了,必須從https://s3.amazonaws.com/extend.brackets/brackets-beautify/brackets-beautify-1.1.3.zip下載，安裝方法同上，解壓出來直接把brackets-beautify-1.1.3文件夾放到擴展目錄的user目錄下，重啓即可。
快速編寫HTML和CSS：Emmet
新發現的代碼格式化的插件–jsbeautifier：這款插件支持更多的代碼格式化，下載地址：https://s3.amazonaws.com/extend.brackets/brackets-jsbeautifier/brackets-jsbeautifier-0.0.2.zip
Emmet演示請看：http://www.zjgsq.com/1062.html
插件安裝方法同beautify
或從GITHUB手動下載：https://github.com/emmetio/brackets-emmet
2.Brackets 代碼摺疊插件–Code folding。
GITHUB：https://github.com/thehogfather/brackets-code-folding
或點擊直接下載
插件安裝方法同上。安裝完畢後按F5刷新Brackets或重啓Brackets。效果如下圖
轉載請註明：Web前端開發-Web前端工程師 » web前端不可錯過的開發工具–Adobe Brackets（開源、簡潔強大的HTML、CSS和JavaScript集成開發環境）