Brackets 編輯器停更了,寫網頁還能用它嗎

Brackets 1.6 資料更新 2016-01-22 閱讀約 7 分鐘

寫網頁時,最煩的就是改一行 CSS 就要切到瀏覽器按重新整理,來回幾次就暈了。尤其前端切版階段,微調間距、顏色、字體大小,每調一次就看一次,整個流程斷斷續續,專注力全被切換動作打散。你需要的是一個能讓你在寫程式的同時,馬上看到結果的工具,而不是改完還要手動刷新、等畫面重載。

傳統做法是開著編輯器和瀏覽器兩個視窗,改完存檔、切過去、按 F5。聽起來沒什麼,但一天下來重複幾十次,累積的時間和注意力損失很可觀。這類工具的切入點,是把「編輯」和「預覽」併在一起,讓你在同一個畫面裡邊改邊看,甚至直接點選網頁元素就能跳到對應的 CSS 規則。這樣的工作方式,是為了縮短「修改→確認」的回饋迴圈,而不是幫你把程式寫得更好。

01Brackets 是做什麼用的?

它是一套免費的開源程式碼編輯器,主要給寫網頁的人用,支援 HTML、CSS、JavaScript。核心功能是 Live Preview,也就是你在編輯器裡改程式碼,瀏覽器會同步更新畫面,不用手動重新整理。另外還有 Quick Edit,可以直接在 HTML 檔裡點選元素,旁邊跳出對應的 CSS 規則來修改,不用切換檔案。

02Live Preview 即時預覽是怎麼運作的?

開啟 Live Preview 後,編輯器會在你存檔的瞬間把變動同步到瀏覽器,你不用自己按重新整理。它支援 Chrome 和 Firefox,其他瀏覽器可能會有相容性問題。使用時要把 HTML 檔案放在專案資料夾裡,單獨開一個檔案有時會無法啟動預覽。這個功能對切版、調 CSS 特別實用,改完馬上看到結果。

03Quick Edit 快速編輯是什麼意思?

它是 Brackets 的一個特色功能。在 HTML 檔案裡,把游標放在某個元素或 class 名稱上,按快捷鍵,畫面會直接跳出一個小視窗,顯示對應的 CSS 規則,你可以在裡面直接修改,不用離開目前的檔案。改完關掉視窗就回到原本的 HTML。這對前端切版時頻繁調整樣式很方便,省去在 HTML 和 CSS 之間反覆切換的麻煩。

04它支援哪些程式語言?

官方說明指出,它主要聚焦在網頁開發語言,也就是 HTML、CSS、JavaScript。其他語言可以透過安裝擴充功能來補足,但內建支援就這幾種。如果你主要寫 PHP、Python 或其他後端語言,它並不是設計來做這件事的,雖然還是能開檔案來編輯,但不會有語法提示或除錯這類的輔助功能。

05擴充功能要怎麼安裝?

編輯器內建擴充功能管理員,打開後可以直接搜尋、安裝、管理擴充套件。可以找到語法檢查、版本控制、程式碼片段管理之類的擴充功能。安裝過程不用另外下載檔案,在管理員介面點一下就會裝好。主題樣式也可以從這裡安裝,改編輯器外觀。擴充功能的數量跟 VS Code 比起來少很多,但常見需求大致上找得到。

06這套軟體適合什麼樣的人?

適合主要寫 HTML、CSS、JavaScript 的前端開發者或設計師,尤其是需要頻繁調整樣式、想即時看到結果的人。它的 Live Preview 和 Quick Edit 對切版工作流幫助很大,而且介面乾淨、輕量,開機速度快,不會像大型 IDE 那樣吃記憶體。如果你只是偶爾改個網頁、不想學太複雜的工具,它也算好上手。

07初學者拿它來學寫網頁適合嗎?

可以。它的介面簡單,沒有太多複雜設定,安裝過程也很快,對剛開始學 HTML 和 CSS 的人來說,負擔比較小。Live Preview 讓初學者改程式碼馬上看到畫面變化,比較有成就感,也比較容易理解每一行程式碼的效果。不過要注意,它已經停止開發,官方建議改用 VS Code,所以如果你打算長期投入,一開始就學 VS Code 可能更省事。

08跟 VS Code 比起來,現在還有人會選 Brackets 嗎?

會,但理由多半是習慣或特定功能。Live Preview 和 Quick Edit 是 Brackets 的強項,對純前端切版的人來說,這兩個功能確實好用。VS Code 功能更全面、擴充生態更龐大,但相對也比較複雜。如果你已經習慣 Brackets 的工作方式,繼續用沒有問題;如果還在選工具,VS Code 是官方建議的遷移目標,社群和更新都更活躍。

09它已經停止維護了,繼續用會不會有風險?

dobe 在 2021 年 9 月結束對 Brackets 的支援,之後官方不再推出新版本。這代表不會有新的功能、安全性更新或相容性修補。如果你只是拿來寫個人專案,風險不大;但如果是工作用途,或需要跟其他工具搭配,就要考慮長期維護的問題。官方建議可以到 GitHub fork 專案自行維護,或者改用 VS Code。

10介面只有英文,對中文使用者有影響嗎?

介面是英文的,沒有官方中文語系。對看得懂英文的人來說,選單和設定不算難懂,因為選項不多、用詞也簡單。但如果你完全不習慣英文介面,操作上會多一層障礙。可以到擴充功能管理員找找看有沒有社群做的中文化套件,但這不是官方提供的,安裝後的效果和更新狀況需要自行確認。

11我主要是寫後端程式,適合用 Brackets 嗎?

不適合。它主要服務前端開發,對 HTML、CSS、JavaScript 的支援最完整,後端語言沒有內建的語法提示或除錯功能。雖然可以安裝擴充功能來補強,但整體設計不是往那個方向走。如果你主要寫 PHP、Python、Java 這類語言,應該找專門的 IDE 或支援更廣泛的編輯器,像是 VS Code 或 Sublime Text,會順手得多。

12跟 Atom 比起來,哪個比較值得用?

兩者都是免費開源的程式碼編輯器,但 Atom 的使用者評分人數是 277 人,比 Brackets 的 189 人多,社群的活躍程度有差。Atom 的擴充套件數量也比較多,而且 GitHub 在 2022 年也停止維護 Atom 了,所以兩套都是停更狀態。如果你在意社群規模和擴充生態,Atom 可能稍微好一點;但如果你特別需要 Live Preview 這種即時預覽功能,Brackets 的實作方式更直接。