這還是我頭一次幫編輯器寫一篇文章，即使之前使用 VIM，也只是將自己的設定檔放到 github 上而已 XDDDD。

會想寫這篇文章，是因為有一次無意間把自己的 brackets 外掛 po 到 FB 上，意外有人在詢問，那時候才發現原來除了我之外也有人在用 brackets，畢竟他相對於 Sublime 來說是非常冷門的。後來在粉絲團詢問，也有一些朋友表示有意願想瞭解，所以決定簡單記錄一下自己使用的佈景與外掛！

如果你是第一次聽到 Brackets 這套編輯器，或是還沒使用過但想瞭解的話，可以先聽聽我選擇他的理由；假設你已經開始使用 Brackets，也願意將它當作你的主力編輯器，那麼可以直接往下拉到我使用的外掛清單，以供參考。

選擇 Brackets 的理由

我最早用 ubuntu 時，是使用 VIM，如同前面提到的，我有將自己的 vimrc 放在 github 上面。VIM 很好用，如果你是一個習慣鍵盤作業 + 喜歡記憶快速鍵 + 喜歡自己折騰的朋友，VIM 絕對是你的首選好朋友！

而我捨棄 VIM 的理由很簡單，就是改用 MAC 後， VIM 的一些設定被我搞爛了 XDDD，簡單來說，就是自己把他玩壞又無力修復，只好跳槽到這些不需要過於折騰的編輯器啦 XD。

離開 VIM 之後，一開始我是改用 Sublime Text，畢竟 Sublime 在當時可說是非常火紅，一套可以自由安裝佈景或是外掛的「開源」編輯器，是非常吸引大家的眼球的。就連後來的 Brackets 也是走這套路線，照理說兩套同樣開源的編輯器，內容應該是大同小異，沒必要特別換編輯器去熟悉吧？但我覺得 Brackets 還是有走出他的特色，以下是我跳槽到 Brackets 的幾個理由：

1. 炫技

YES，你沒看錯，我就是如此華而不實的人 XDDDD。

我在某次課程中，看到學生使用了這套編輯器，因此認識了 Brackets，當時就是這個「可在 HTML 看 CSS」的功能讓我深深著迷。

以上圖為例子，我在寫 HTML 時，如果想知道特定的 class 用了什麼樣式？我不用再開 CSS 檔案，而是按下一個快速鍵 (CMD + E) 他就會自動把跟這個 class 有關的所有 CSS 都秀出來。此外還可以直接編輯存擋，甚至連 SCSS 也能讀喔！

CMD + E 這個炫技還能用在選色上！

以往我在選顏色時，都會開 Photoshop 或是另外安裝選色軟體，但如果用 Brackets 編輯器的話，只要在顏色上按下 CMD + E，他就會跳出一個選色視窗，讓我們快速選色，整個超方便的啊啊啊～～

2. 客製化方便

編輯器可說是我們吃飯的工具，所以我對編輯器的期許除了好用之外，也希望他能很方便的客製成我想要的樣子。而 Brackets 的內建功能中，就可以快速地做一些簡單的客製化。

選擇 View ➡️ Themes 就可以修改字型與字體大小，只要電腦有的字體 Brackets 都讀得到，可以自行嘗試找出喜歡的字體，美化你的編輯器。

如果你想針對已安裝的外掛做一些調整，選擇 Help ➡️ Show Extensions Folder 就可以把放置外掛的資料夾打開，自行針對裡面的內容做調整，不用硬背外掛資料夾的位置。

Brackets 有許多外掛都是由 HTML, CSS 以及 JSON 組成的，只要看得懂這些語法，就可以輕鬆微調。像我就有調整一些外掛的樣式，以及幫外掛中文化，如此一來可以打造出屬於你的獨一無二編輯器。

3. 內建 live preview

Brackets 內建 HTML/CSS 的 live preview，所以不需要重新整理瀏覽器畫面，就可以即時看到你輸入的語法。另外你也可以將游標移到任一行語法，瀏覽器會即時秀出你指到的語法，就跟開發者工具很像。有興趣可以看底下的影片介紹喔 (可以從 1 分 33 秒開始看他的效果)。

4. 有中文版

雖然這不是吸引我的點，但我覺得還蠻貼心的，如果你是英文苦手可以試著把 Brackets 改成中文版唷。

修改方法：Debug ➡️ Switch Languages ➡️ 繁體中文

但，假設你可以閱讀英文，我會建議你不要改成繁中介面，因為有的外掛並沒有中文化，這樣一來選單會中英混合，不是很好看 XD"

5. 安裝外掛 / 佈景都很方便

Brackets 有做一個簡單的管理介面，我們可以透過該介面觀看可下載的外掛 / 佈景主題，也可以自由更新移除，當然也能將 zip 檔拖曳安裝，非常的直覺與方便。

光講一個選擇的理由，就把文章拖得有點長了，所以我把文章作成分頁，請自行點選有興趣的內容繼續閱讀唷。

我使用的 Brackets 外掛一覽

我的外掛大概也分兩種，一種是「實用」，一種是「華而不實」的炫技，所以各位可以依照自己的需求，選擇要不要安裝。當然 Brackets 的外掛很多，你也可以找到其他外掛有類似的功能，所以我列出來的外掛僅供參考用，不表示唯一喔！

✨✨ 以下照字母排序依序列出

1. Brackets Css Color Preview

• 外掛名稱：Brackets Css Color Preview
• 定位：炫技
• Github：https://github.com/cmgddd/Brackets-css-color-preview
• 介紹：寫 CSS 的時候如果有寫到color，會在行數的左邊，把你使用的顏色秀出來。這是一個非常不實用的功能，但我只是單純想讓編輯器花花綠綠而已 XD，然後如果你使用的是如 SASS 一樣的變數，這個外掛不會那麼聰明的知道變數里面的色碼，所以像我的範例寫了$brown，他只會忠實呈現 brown 的顏色。

2. Brackets Git

• 外掛名稱：Brackets Git
• 定位：實用
• Github：https://github.com/zaggino/brackets-git
• 介紹：這是獻給連 sourcetree 都不想打開的懶人專用，該外掛把 git 整合到 brackets 裡面，只要在 brackets 裡也可以輕鬆 commit / push / pull。

3. Brackets Terminal

• 外掛名稱：Brackets Terminal
• 定位：實用
• Github：https://github.com/artoale/brackets-terminal
• 介紹：一樣是懶人專用之獻給不想開 Terminal 的人 (對不起我到底是有多懶 艸)。不過他要從背景執行 tty.js，所以還是要開 Terminal 啦 XD，只是不需要一直切換視窗就是了😊

4. CanIUse

• 外掛名稱：CanIUse
• 定位：實用
• Github：https://github.com/cfjedimaster/brackets-caniuse
• 介紹：再次獻給連 Can I Use 網站都懶得打開的懶人一族 ...(愈講愈小聲)。不過他整合的資料沒有很完整，你只能簡易查詢這段語法是否支援，如果想要知道更細節的訊息，還是要連到 caniuse.com 查詢。

5. Emmet

• 外掛名稱：Emmet
• 定位：實用
• Github：http://emmet.io/
• 介紹：Emmet 是一套可以快速寫 HTML 的外掛，火紅的程度之高，我想我就不用再特別介紹了。而 Brackets 的 Emmet 設計非常貼心，將 Emmet 外掛獨立成一個選單，要查詢快捷線，或是想瞭解他有什麼功能，都可以透過這選單查詢，我覺得非常方便。

6. Hover Preview

• 外掛名稱：Hover Preview
• 定位：炫技
• 介紹：滑鼠移過特地的語法(顏色，圖片，漸層色)時，他會出現一個小視窗顯示相關資訊。這個外掛沒有提供 Github 或任何版權連結，所以想要下載的朋友可能要自己問一下谷歌大神囉。

7. HTML Templates

• 外掛名稱：HTML Templates
• Github：https://github.com/talmand/Brackets-HTML-Templates
• 定位：實用
• 介紹：可以快速產生 HTML 的頭跟尾，目前支援 XHTML, HTML4, 以及 HTML5 三種標準。另外還有提供像 Bootstrap, Foundation... 等一些比較熱門的框架。

8. Indentator

• 外掛名稱：Indentator
• Github：https://github.com/ahuth/brackets-indentator
• 定位：實用
• 介紹：有時候語法貼來貼去會把縮排弄得很亂，這時候只要用這個外掛，就可以一鍵幫你縮好排啦！

9. jQuinter

• 外掛名稱：jQuinter
• Github：https://github.com/Wikunia/brackets-jQuinter
• 定位：實用
• 介紹：這個外掛可以在 HTML, CSS, 以及 JS 檔案中，提供我們設定的選擇器，作者的 Github 網站有動畫範例，我這邊放上 CSS 的作為範例

10. Markdown Preview

• 外掛名稱：Markdown Preview
• Github：https://github.com/gruehle/MarkdownPreview
• 定位：實用
• 介紹：如果有寫 markdown 文件的需求，這個外掛可以幫你在 Brackets 裡即時預覽輸出的樣子

11. Tabs - Custom Working

• 外掛名稱：Tabs - Custom Working
• Github：https://github.com/DH3ALEJANDRO/custom-work-for-brackets
• 定位：實用
• 介紹：如果我沒記錯的話，Brackets 編輯器沒有頁籤功能，所以我安裝這個外掛，可以更方便讓我點選檔案與切換。

12. Todo

• 外掛名稱：Todo
• Github：https://github.com/mikaeljorhult/brackets-todo
• 定位：實用
• 介紹：假設你們團隊都使用 Brackets 編輯器，那我強烈推薦一定要安裝這個外掛，因為它可以增強彼此之間的溝通，對於推進專案進度會有很好的幫助。

13. Vimderbar

• 外掛名稱：Vimderbar
• Github：https://github.com/daveosborne/brackets-vimderbar
• 定位：實用
• 介紹：前面有提過，我有用 VIM 一陣子，所以會記得一些 VIM 的快捷鍵，這個外掛可以模擬 VIM 的快捷鍵，讓我可以直接在 Brackets 使用 VIM 快捷鍵。當然不是全部，不過對我而言也夠用了。

14. VisibleTabs

• 外掛名稱：VisibleTabs
• Github：https://github.com/Carreau/brackets-visualTabs
• 定位：實用
• 介紹：縮排真的很重要，所以可以用這個外掛把縮排弄得明顯一點。因為我不喜歡程式碼的排版太過鬆散，所以我還有把 tag 的 SIZE 改成 1，這些客製化在 Bracekts 裡面真的都超方便的 ❤

15. W3CValidation

• 外掛名稱：W3CValidation
• Github：https://github.com/cfjedimaster/brackets-w3cvalidation
• 定位：實用
• 介紹：如果你是 HTML 初學者，或者想知道自己是否有符合 W3C 的規範，可以使用這個外掛幫你檢測。

以上，就是我目前安裝的所有外掛啦！接下來是佈景主題的部分，有興趣的朋友就繼續看下去囉 🙂

使用 / 推薦的佈景主題

我比較喜歡暗色的主題，所以下載的主題當然就是黑色系居多，Brackets 有一些外掛可以一鍵安裝多種佈景主題，以下為各位介紹～

1. Themes for Brackets

• 外掛名稱：Themes for Brackets
• Github：https://github.com/Jacse/themes-for-brackets
• 介紹：這個佈景組合包，裡面大概有十來種暗系色主題，安裝後在 View ➡️ Themes 就可以找到了。
  我自己喜歡的幾款分別如下，也推薦給大家 😊

Ambiance

Mbo

Zenburn

我是為了這款而下載整個外掛的 XD，我很喜歡這款

2. Tomorrow Night

• 外掛名稱：Tomorrow Night
• Github：https://github.com/Brackets-Themes/TomorrowNight
• 介紹：同樣是暗色系裡面我很喜歡的一款，不過我更愛的是他的另外一個系列，可以再往下看有介紹 XD

3. Tomorrow Night Eighties

• 外掛名稱：Tomorrow Night Eighties
• Github：https://github.com/patrickfatrick/TomorrowNightEighties
• 介紹：Tomorrow Night Eighties 相較之下比較亮，我目前就是用這個佈景主題唷。

4. Tremendus Dark Theme

• 外掛名稱：Tremendus Dark Theme
• Github：https://github.com/tremendus/tremendus-dark-theme
• 介紹：這一套是 fork Zenburn 而來的

如果還想要找更多的佈景主題，也可以到 Brackets Themes 網站挖寶，有淺色也有暗色的主題唷。

更多推薦資源

如果以上這些資源都不能滿足你，也可以打開 Brackets 編輯器，從他的 Extensions 一個一個的挖寶，慢慢地挖出自己喜歡的外掛或佈景主題。

或者也可以到 Brackets Extensions 的非官方網站，看看大家在用什麼外掛？或是最近又有新增什麼外掛？ ... 等等的資訊

小結

寫到這，不知道你對 Brackets 這套編輯器有沒有心動呢？

其實如果有心，不管是用 VIM, Sublime 或是 Atom，都可以打造出屬於你自己獨一無二的編輯器，所以我想只要挑一個自己喜歡的一直用下去，一定會發現編輯器的優點。

當然，我也沒有為 Brackets 代言，也沒有收錢 (因為之前居然有學生問我有沒有收錢，真是無言＝＝)，只是想讓大家認識其他的編輯器，給各位多一點選擇囉，希望你們會喜歡這篇文章啦 😊