提及編輯器，可能類似與語言之爭，什么vim才是最好的編輯器等等。其實自己用的順手熟練才好，畢竟作為一門工具，效率第一，而且現(xiàn)在總多的編輯中，你所需要的常規(guī)功能都已經(jīng)具備了。

Adobe Brackets 是Adobe公司推出的一款編輯器，可謂名門之后。或許還在幾年前，有的朋友也還用著他家的Dreamwearver寫完了自己的第一個網(wǎng)頁。 而Brackets相對Adobe Dreamweaver，我們將它定義為一款編輯器，它身上完全看不出Dreamweaver那樣繁重的功能，而它誕生的目的就是:

With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers.

簡而言之，就是提升開發(fā)效率，讓開發(fā)者少走一些路，專注于在瀏覽器的 “設計” 。同樣，Brackets是開源的而且基于HTML + JS,因此你可以在它的Github項目提出自己的理解，讓全世界的設計或者前端開發(fā)受益于你的改變。

與Brackets結(jié)緣

自己接觸前端大約4個年頭，12年的春節(jié)開始接觸html，那個時候真的才開始用windows記事本寫代碼（??）。隨后自己轉(zhuǎn)向了Adobe Dreamweaver，來源偉大的網(wǎng)頁三劍客啟蒙。隨后有幸加入一個小團隊吧，開始使用團隊一致的開發(fā)工具 Visual Studio 2010。確實這款軟件非常不錯，用著很爽，無論是寫C # 還是寫JavaScript，它都足夠Smarty。但是最大的不滿，可能是自己電腦問題，非常吃內(nèi)存，差不多開了這個軟件，Photoshop 就不要想了。隨后接觸到了Sublime Text2/3，完成一些基本配置，其實寫起來也非常適合尤其適合新手，(當然這是收費的，雖然你可以自己想辦法??)。在@Dragon的推薦下，開始嘗試了Brackets。那個時候最大的噱頭是psd連調(diào)。你可以用Brackets 打開一個Psd文件，然后直接進行顏色，寬度的截取。

這個功能簡直解決了當時自己這個小美工的一個痛點啊，切圖爽歪歪。然后隨著深入，web調(diào)試，熱替換，代碼聯(lián)想，預處理等等功能(后面詳細說明)都開始使用。承認這個時候自己已經(jīng)回不去了。而且非常輕量級級別，無論在windows上還是Mac上，都足夠隨心所欲的編寫的你的程序。

基本擴展推薦

一些基本的擴展讓你的Brackets變得更加強大，你可以自己去 搜索這些擴展，找到你心目中最適合的自己開發(fā)的擴展（比如你時一位PHP開發(fā)工程師，那么你自然而然會聯(lián)想到php-doc）。

打開PSD文件

點擊右邊導航欄的按鈕，會提示你登錄你的Adobe ID ，然后將你要打開的設計稿傳上去后，點擊對應文件就可以開始實時選取了。

打開后就可以看到您的設計稿了，然后在元素上你可以看到顏色高度等信息。

Live Preview

其實現(xiàn)在很多構(gòu)建工具都支持實時預覽，不過一些不喜歡折騰的，可以使用自帶的該功能，而且支持文件瀏覽器修改同步。

點擊類似閃電的符，設置端口就可以預覽該界面了。你在代碼里做的改變就可以及時預覽了。

推薦幾款插件:

• brackets-beautify 一款非常棒的美化格式的插件，使用Ctrl/Command + shift + L 進行格式化。

• brackets-emmet Emmet是一種非常高效的編寫html css的工作流。詳情

• Markdown Preview markdown preview是一款支持markdown的實時預覽的插件，對于經(jīng)常寫項目文檔的用戶，算是一個福音。

• Brackets Color Palette 支持直接在圖片上吸取顏色的小插件，切圖利器。

• JSHint JS的語法檢查插件，大家都知道的

• brackets-snippets 搜集代碼片段用的，方便快速編輯。

• html-designer 專門為設計師提供的一款可實時預覽設計的插件，讓我想起了DW.

• Popup Menu Brackets 支持鼠標右鍵，可以選擇復制或者剪切功能。

• AngularJS for Brackets Angular 的一款擴展插件

• Brackets Vue 一款支持 VUE語法高亮的插件

常見問題

1. 下載慢?

這個考慮兩方面原因，一個是自己網(wǎng)速，一個是自己人品(??說話直了點)吧。由于下載的包放在國外的AWS上的，因此有的時候沒有感覺異常，但是最近卻是慢的異常。下載地址

自己把1.7的最新版放在了360云盤上，覺得慢的可以用這個

(Win)Brackets.Release.1.7.msi: https:///ckZhgHWzfatxu （提取碼：c612）

(Mac)Brackets.Release.1.7.dmg:https:///ckZh9SJEj3iWi （提取碼：cfbf）

1. 打開慢？

很多網(wǎng)友反映打開慢的問題，這個問題自己遇到過，卻是在打開大型項目(10000+文件)時候比較慢，不過Brackets添加忽略目錄功能，神馬node_module， log類的 可以選擇忽略.擴展地址:https://github.com/gruehle/exclude-folders

樓主親測了，確實把node_module去掉后，卡慢的問題真的消失了。

1. 擴展安裝錯誤以及升級錯誤?

這個其實還是由于Chinese Gov 的問題吧，時好時不好，建議使用網(wǎng)絡下載zip文件，進行安裝，這樣的話，不會出現(xiàn)網(wǎng)絡長時間不響應的問題。

更多問題或者反饋，你可以去這里找到 。更加詳細的教程，你可以去 http:///brackets-course/ 這里找到。

如果你想更近一步，你可以自己編寫插件，How-to-Write-Extensions

擴展閱讀

https://github.com/adobe/brackets/wiki/Troubleshooting

https://www./sitepoint-smackdown-atom-vs-brackets-vs-light-table-vs-sublime-text/

http://brackets./

https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

https://www./watch?v=VPjuAFcPK_M