Brackets 擴充功能「Beautify & Indent Guides」:自動縮排美化與縮排層次標記
2018/09/20
萌芽站長
4,575 0
軟體應用 , 網站技術
Brackets
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
「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」,點擊即開啟標記功能。

▲縮排層次已經清楚標記啦!是不是很棒呢?😊
贊助廣告 ‧ Sponsor advertisements
取得 WordPress Popular Posts REST API 熱門文章資訊至任何網頁 (AJAX 取得 JSON)
📆 2020-01-25
📁
網站技術, HTML, JavaScript, jQuery, 架站程式, WordPress
Stable Diffusion web UI x Catppuccin:為 Web UI 添加舒適淡色主題,可自選喜歡的顏色主題
📆 2023-03-25
📁
軟體應用, 人工智慧, AI繪圖
GitHub Pages x GitHub Desktop:在 GitHub 上建立靜態網站可供即時瀏覽
📆 2020-04-21
📁
軟體應用, 網路應用, 網站技術
SD web UI x ControlNet:運用 Tile Resample 製作二次元動漫風格 QR Code
📆 2023-06-09
📁
軟體應用, 人工智慧, AI繪圖
Google Search Console 全新深入分析報表上線!網站流量與內容成效一目瞭然
📆 2025-07-14
📁
網路應用, 網站技術, 資訊新聞
Windows 7 DreamScene Activator:打造動態桌面
📆 2014-06-29
📁
軟體應用
Telegram x Group Butler:設定群組歡迎訊息、刪除最後的歡迎訊息
📆 2020-03-28
📁
軟體應用, 行動平台, APP應用, Android
JavaScript:點擊任一按鈕使其他按鈕無法點擊
📆 2019-10-26
📁
網站技術, HTML, JavaScript
留言區 / Comments
萌芽論壇