Brackets - 免費的編輯網頁必備神器
Brackets 是一套開放原始碼的編輯器,開發商是鼎鼎大名的 Adobe。Brackets 除了可以編輯 HTML、CSS、JavaScript 等網頁相關檔案以外,還支援了 Sass、Less、PHP 約 60 種程式語言。
因為 Brackets 內建 CSS 快速編輯功能、CSS、JavaScript 等語言的自動完成,還有網頁即時預覽功能,再搭配一些外掛,可稱得上是編輯網頁的神器!
2021/3/8 更新:
目前官網公告,2021/9/1 起 Adobe 不再支援 Brackets,相關程式碼則繼續開放在 GitHub。Adobe 則與 Microsoft 合作開發 Visual Studio Code。(看來要寫篇文章來介紹介紹了!)
文章快速連結
安裝 Brackets /介面說明/改中文版
在 Brackets 中建立文件
Brackets 的即時預覽功能
在 HTML 裡快速編輯 CSS
Brackets 的快速文件與自動完成功能
Brackets 快捷鍵
安裝 Brackets /介面說明/改中文版
☝️進入 Brackets 官方網站,就可以馬上看到最新版的 Download 連結,只要點下去就會下載安裝 msi 檔了。(執行安裝檔的過程這邊就省略了。)
Brackets安裝檔並沒有分語言版本,中文化的步驟待會再進行。
介面介紹
Brackets 的介面與其他文字編輯器大同小異,也非常乾淨。
左方是正在執行的工作檔案列表,及資料夾檔案列表,方便我們快速開啟網站中的各個檔案。
中間則是主要的編輯區域,這裡支援分割畫面,可以同時開啟兩個檔案。
最右方則是即時預覽、外掛等一些附加按鈕。如果你有安裝其他外掛功能,這裡的按鈕也可能會變多。
Brackets 改中文版
Brackets 內建 30 多種語言,也包含正體中文跟簡體中文。修改方式如下:
點選「Debug > Switch Language」在選單中找到「繁體中文」,然後重新啟動Brackets就可以了。
改 Brackets 介面的方法
Brackets 內建兩個佈景主題,分別是亮色及暗色,我個人是比較習慣用暗色來做編輯介面,看久了眼睛比較不會疲憊。修改方式如下:
「檢視 > 佈景主題」
剛剛有談到 Brackets 中央的主要編輯區域,可以改用分割畫面同時檢視兩個檔案,修改方式如下:
「檢視 > 左右分割 / 上下分割」
若要使用其中一個畫面開啟檔案,則先點選一下該畫面之後,再從左方的列表中點開檔案。
在 Brackets 中建立文件
開啟資料夾
開啟 Brackets 之前,必須要先為你的專案建立一個資料夾,然後再從左方的檔案列表點選「開啟資料夾」。
新增檔案
將 Brackets 連結到專案資料夾後,就可以開始新增檔案。點選工具列的「檔案 > 新增」。
因為Brackets支援的檔案類型高達60多種,新增檔案後要先進行存檔,存檔時也要記得輸入檔案的附檔名,這樣Brackets才能辨識檔案種類。若不這麼做,Bracket編輯區域的右下角,也是可以修改編輯檔案類型啦。
Brackets 的即時預覽功能
Brackets 的即時預覽是其他編輯器沒有的功能,它可以讓你在做 HTML、CSS 編輯的同時透過瀏覽器觀察編輯後的變化。這個功能是搭配 Google Chrome 執行的,使用之前電腦也必須先安裝好。
在編輯過程中,只要點選介面右上的「閃電按鈕」,電腦就會開啟 Chrome 視窗即時呈現網頁樣貌。網頁進行修訂的當中,視窗不需要重新整理,就會即時更動!
在 HTML 裡快速編輯 CSS
Brackets 另一個厲害的功能,就是能讓你在 HTML 檔裡面即時修改元件的 class 或 ID 屬性,不需要再額外開啟 CSS 檔案的「快速編輯」。
把游標停在想快速編輯的元素上(HTML tag、class 或 ID name 都可以),再按下 Ctrl/Cmd + E
的快捷鍵,就會跳出「所有」相關的 CSS 選取器及屬性,還可以直接進行編輯!
Brackets 的快速文件與自動完成功能
對於網頁初學者來說,Brackets 有一個超實用的功能-快速文件!
你可以在任何你想了解的元素上按下 Ctrl/Cmd + K
就會出現文件提示!在 HTML tag name 或屬性使用,會顯示該 tag 或屬性的用法與說明;如果在 CSS 的屬性上使用,則還會出現該屬性「值」的選項。
另外 Brackets 也附有文件自動完成功能,當你鍵入前幾個字母之後,Brackets 就會依文件類型跳出可用的程式碼供選擇,非常節省程式撰寫的時間,也可以避免打錯字。
上列就簡單地介紹 Brackets 這個神器的基本用法跟厲害之處了,不過 Brackets 還可以搭配多種外掛使用,讓功能變得更強大!
最後附上常用的 Brackets 快捷鍵,讓操作更得心應手!
Brackets 快捷鍵
Ctrl/Cmd + Alt/Opt + S
全部儲存Ctrl/Cmd + /
加上/取消註解Ctrl/Cmd + D
複製整行Ctrl/Cmd + Shift + D
刪除整行Ctrl/Cmd + Shift + ↑
整行上移Ctrl/Cmd + Shift + ↓
整行下移
按住 Ctrl/Cmd
加滑鼠左鍵(拖曳):增加游標/多選文字
按住 Alt/Opt
加滑鼠左鍵拖曳:連續多選文字
謝謝你耐心閱讀我的文章
你可以在堯舜設計網站看到我們的案例及作品,也可以歡迎追蹤下列媒體獲得更多資訊:
堯舜設計臉書粉絲頁
堯舜設計 Instagram:各種簡單前端與網路行銷知識。
堯舜設計 YouTube 頻道:設計與網路的法律常識。