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 頻道：設計與網路的法律常識。
