轉自：http://www.jianshu.com/p/ff7798aa4548

?

---

Brackets是Adobe開發的web編輯器，是一款免費開源、多平臺支持的軟件，并在于GitHub上維護。Brackets支持增加插件以提供額外的功能擴展，下面的文章將介紹一些我常用的插件以及我使用期間的心路歷程。

?

Brackets網站的介紹圖片

這就是Brackets的介紹圖片，可以看出，他們對“快速編輯”這一功能是非常推薦的。快速編輯就是當你的鼠標點到某元素的ID或者Class時，Ctrl+E 迅速為您查找該項目下面所有ID名或者Class名所在的CSS文檔位置。除了“快速編輯”，Brackets還有實時預覽，通過Chrome可以在編輯html、css時，實時預覽最終效果。

這也是Sublime Text3、atom這些編輯器所不能比擬的，縱然會有類似的插件，但一定是不如原生的兼容性和流暢度。Brackets給自己的定位就是現代、開源、懂WEB設計的編輯器。

我自己在前端開發上也用了很多軟件，Adobe Dreamweaver---- 暴露年齡說一句：從它還不是Adobe時就開始用----現在功能還是很強大，但UI以及軟件思維已經落后了。

之后就用了Sublime Text3,這是一款啟動速度快、運行流暢的編輯器，種類繁多、功能強大的插件更是給Sublime Text 3錦上添花。

Atom

Atom在windows只能用驚艷來形容。它是基于Chromium開發成多平臺的編輯器，它和Sublime Text3一樣，插件很多，有老東家GitHub的支持，使得它的發展非常迅速。它現在就是我的MarkDown 編輯器，你能把它打造成你想要的IDE.

Brackets更關注于web設計師的需求，代碼提示、快速編輯、實時預覽都是它的強項，它同樣基于Chromium開發，前端工程師可以非常快捷方便開發各種插件，加強對Brackets的體驗，豐富Brackets的功能。

下面我將為大家推薦一些實用的Brackets插件，一方面可以增強工作效率，一方面可以少安裝一些工具軟件。

emmet

emmet 現在已經成了前端編輯器必裝插件，大大的提高了html css代碼的工作效率，不用多介紹。這個屬于現代編輯器的武器。。。

主頁：http://emmet.io/

brackets beautify

這也是各個前端編輯器必裝插件，它可以使您的代碼看起來很整潔。代碼格式化插件.

主頁：https://github.com/brackets-beautify/brackets-beautify

brackets-git

Git集成插件。我現在都不用git軟件了，完成后直接提交。不管是GitHub、bitbucket還是我自建的git服務器。

主頁：https://github.com/zaggino/brackets-git

• MarkdownPreview

Markdown有多受歡迎呢，看看那些賣得老貴IOS軟件、MAC軟件就可見一斑了。用Brackets當Markdown文檔編輯器不會輸給那些很貴的編輯器的。----你懂得怎么拓展的話。

主頁：https://github.com/gruehle/MarkdownPreview

• JS CSS Minifier

  這個插件好像也是前端編輯器必裝的插件，可以壓縮CSS和JS文件

  主頁：https://github.com/abagshaw/brackets-minifier

• brackets-minimap

?

Sublime Text用習慣了以后，對minimap還是相當有好感的，Atom我也專門找了對應的插件來裝，Brackets也是。

主頁：https://github.com/zorgzerg/brackets-minimap

• simple-todo

?

todo類的插件用過很多，其實也就用用而已，Atom有個很不錯的插件，它居然搜索整個項目的TODO 作為列表，但我不喜歡那樣的。這個插件之所以被我列入武器系列，因為它除了可以在項目里面創建txt todo，還可以連接Trello。Trello有什么用，我將在下篇文章寫。

主頁：https://github.com/ovk/brackets-simple-todo

• brackets-colorHints
  

這個插件有看到介紹的好像比較少，它能夠對CSS文件里面的顏色16進代碼做成一個列表，然后從暗到亮做一個排列，提高工作效率就得靠這些小工具。

主頁：https://github.com/konstantinkobs/brackets-colorHints

• HTML Wrapper
  

這個插件可以自動為<ul>, <ol>, <nav>, <tr>, <select>生成包裹代碼。是Atom和Brackets通用插件。

主頁：https://caferati.me/labs/html-wrapper

• Brackets Icons

Brackets 邊欄添加文件圖標，可以快速幫你識別出你要編輯的文件的類型。

主頁：https://github.com/ivogabe/Brackets-Icons

• Brackets Autoprefixer

  這個插件可以自動只能的為 CSS 元素添加前綴。

  主頁：https://github.com/mikaeljorhult/brackets-autoprefixer

• brackets-color-palette

這個插件是利用Brackets打開圖片后，可以選擇顏色并且復制顏色代碼到剪貼板。有三種代碼可供選擇：Hex, RGB(a), HSL(a) 。

主頁：https://github.com/sprintr/brackets-color-palette

• brackets-documents-toolbar

還是習慣有個TAB在上面選文件吧。。。。還可以關閉掉左側的文件列表。

• brackets-projects

插件默認快捷鍵alt+p,打開項目窗口，可以設置名稱圖標等。。。

其實以前用Sublime Text3、Atom都有做類似的筆記，但只想自己備忘，所以寫得非常籠統。這次真的寫出來分享，其實就是想逼迫自己好好寫博客。至少有十年不曾寫blog了吧。。。

最重要還是要告訴大家，Brackets真的很好用，如果你正用其它工具寫前端的話。也許上面那些我喜愛的插件還不是您的菜的話，下面的連接您可要珍藏好了，TOP-100 extensions！

http://brackets.dnbard.com/extensions

轉載于:https://www.cnblogs.com/rangeon/p/7838234.html

總結

以上是生活随笔為你收集整理的[转] 前端开发利器--Brackets 的七种武器和旁门左道的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。