「Brackets」是 Adobe Systems 開發的一個以 HTML、CSS 及 JavaScript 編寫的 HTML 編輯器。
這邊要推薦兩個非常棒的 Brackets 擴充功能，可以分別達到自動縮排美化與縮排層次標記，讓編寫的網頁更加清楚明瞭！
Beautify - 將 HTML、CSS 及 JavaScript 原始碼自動縮排整齊排列。
Indent Guide - 自動將縮排層次標記出來，一眼就可以看出每個層次排列，編寫網頁更加輕鬆！
趕快依照著以下圖文為自己的 Brackets 擴充這兩個功能吧！

▲兩個箭頭指的地方都可以開啟「擴充功能管理員」。

▲搜尋「Beautify」，找到後安裝。

▲安裝畫面。

▲安裝成功後該擴充功能將出現在「已安裝」頁籤中。

▲這是一個完全沒有縮排的網頁。

▲按下剛剛「Beautify」擴充的快捷鍵「Ctrl+Alt+B」，網頁將自動縮排美化。接下來安裝「Indent Guide」擴充：

▲一樣到「擴充功能管理員」搜尋「Indent Guide」並安裝它。

▲之後就可以在「檢視」找到「Indent Guides」，點擊即開啟標記功能。

▲縮排層次已經清楚標記啦！是不是很棒呢？

利用IcoFX抓軟體圖示
2014-04-28
軟體應用

Highlight Matching Tag（Visual Studio Code 擴充功能）：HTML 開始與結束標籤強調與標示
2020-03-02
軟體應用, 網站技術, HTML

Internet Explorer8:讓網站變醜!
2013-01-01
軟體應用

Git 版本控制：「.gitignore」是讓你忽略某些檔案、目錄的設定檔！
2019-10-02
軟體應用, 網站技術, 程式設計

Docker Desktop：安裝官方提供的三個擴充，方便查詢 Log、硬碟空間及系統資源用量！
2022-12-29
軟體應用

Visual Studio Code：開放原始碼的程式碼編輯器、中文化支援、可個人化
2019-02-11
軟體介紹, 網站技術, 程式設計

PHP trim() 移除字串兩側空白或指定字串函數
2019-06-28
網站技術, PHP

HeidiSQL：支援 MariaDB、MySQL、Microsoft SQL、PostgreSQL、SQLite 的資料庫管理軟體
2022-09-11
軟體介紹, 網站技術, 資料庫, SQL

《上一篇》Telegram 建立相簿教學，圖文對應功能更方便做記錄！ 《下一篇》Brackets 擴充功能「Brackets Icons」：為左側樹狀檔案列表加入類型圖示