Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

這還是我頭一次幫編輯器寫一篇文章,即使之前使用 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,他就會跳出一個選色視窗,讓我們快速選色,整個超方便的啊啊啊~~

沐奇碎碎念

我講的這些都是 Brackets 內建的功能,不需額外安裝任何外掛唷 ^_____^

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

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

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

使用 / 推薦的佈景主題

我比較喜歡暗色的主題,所以下載的主題當然就是黑色系居多,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

3. Tomorrow Night Eighties

4. Tremendus Dark Theme

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

更多推薦資源

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

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

小結

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

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

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

歡迎給我點鼓勵,讓我知道你來過 :)

1
Subscribe
Notify of
guest

13 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
bean
bean
8 years ago

謝謝你的詳細介紹!超級實用的!
最近在看一個網站的教學,他就是用Brackets,我覺得它非常的新手friendly XD

muki
8 years ago
Reply to  bean

謝謝你喜歡!~
看到有人也在用真是令人開心 XDDDD

田艸
田艸
7 years ago
Reply to  bean

請問是哪個網站QQ 跪求~

楓銀月
楓銀月
8 years ago

Brackets 我覺得對新手很友善~~~ 從1.0用到現在 感覺比ATOM順手

muki
8 years ago
Reply to  楓銀月

Brackets 的炫技實在是好棒棒,所以用了它之後,就沒什麼再比較 Sublime 跟 ATOM 惹 >艸<

張元鴻
張元鴻
7 years ago

Hi, 謝謝你的介紹, 我個人也非常喜歡Brackets,尤其以Live Preview的功能最為喜歡,因此找齊了所有可以取代sublime的替代外掛後,我也終於切換過來,所以補充一下在使用中的兩個問題:
1. jQuinter 可能與Live Preview發生衝突,會使Live Preview與Brackets失去連結,目前暫無解答,只好先不安裝
2. 若有使用Brackets Beautify的人,Live Preview亦會發生問題,原作者的Github提供的zip連結可以解決此問題,若需要使用的人請用連結手動安裝

muki
7 years ago
Reply to  張元鴻

太棒了~~很謝謝你的心得分享,看到也有人在使用 Brackets 得很開心 XDD

天野幻
7 years ago

幾個月接觸Brackets也是蠻喜歡的
不過他似乎沒有兩個檔案的比對功能?

ling li
ling li
7 years ago

想請問VisibleTabs要去哪裡改SIZE~~這個感覺超好用的可是我摸半天還是找不到是哪項QQ

Lin Yi Fang
Lin Yi Fang
6 years ago

謝謝妳的分享!
目前也在練習使用brackets來撰寫scss,只是碰到一個問題就是編譯出來的css都會有大量的註解
不知道這樣的設定得去哪裡關掉他們呢,真的好困擾我。
希望muki可以幫忙解惑~

muki
6 years ago
Reply to  Lin Yi Fang

不太清楚你是用甚麼語言編譯耶,但這跟 Brackets 應該沒有關係。
如果是用 SASS 的話,可以到 config.rb 設定喔~

柯宜君
柯宜君
6 years ago

感謝分享!
目前還是初學者
發現您的文章非常實用並且介紹十分詳細

wade
wade
5 years ago

並排顯示html跟Css請問是哪個套件