[轉] 前端開發利器--Brackets 的七種武器和旁門左道

轉自：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 Text三、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插件，一方面能夠加強工做效率，一方面能夠少安裝一些工具軟件。

1. emmet

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

   主頁：http://emmet.io/

2. brackets beautify

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

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

3. 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 Text三、Atom都有作相似的筆記，但只想本身備忘，因此寫得很是籠統。此次真的寫出來分享，其實就是想逼迫本身好好寫博客。至少有十年未曾寫blog了吧。。。

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

http://brackets.dnbard.com/extensions