我的 Brackets 編輯器設定 (佈景與外掛)

  • 日期:
  • 留言數:15
  • 標籤:

Intro

這還是我頭一次幫編輯器寫一篇文章,即使之前使用 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 檔拖曳安裝,非常的直覺與方便。


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


  • Pingback: 適合給Web程式設計師開發用的編輯器 – SoftShare()

  • bean

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

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

    • 田艸

      請問是哪個網站QQ 跪求~

  • Pingback: 適合給Web程式設計師開發用的編輯器 – Soft & Share()

  • 楓銀月

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

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

  • 張元鴻

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

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

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

  • Pingback: 適合給Web程式設計師開發用的編輯器 | Soft & Share()

  • Pingback: 免安裝_免費好用的 網頁編輯器 Brackets – 呼哩起司 | Frankiss()

  • ling li

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

  • Lin Yi Fang

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

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