Brackets 擴充功能「Beautify & Indent Guides」:自動縮排美化與縮排層次標記
2018/09/20
萌芽站長
4,564 1
軟體應用 , 網站技術
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
Stable Diffusion:二次元角色雙手貼玻璃的 AI 繪圖提詞
📆 2025-02-13
📁
軟體應用, 人工智慧, AI繪圖
Toastr:最佳的通知提示 jQuery 插件
📆 2019-07-01
📁
網站技術, JavaScript, jQuery
oCam 螢幕錄影程式竟然藏有挖礦程式「BRTSvc」!(附解除安裝方式)
📆 2019-04-06
📁
軟體應用, 多媒體, 串流錄製
PhotoImpact:製作配合長寬之模糊邊緣遮罩影像
📆 2020-01-28
📁
軟體應用, 多媒體, 靜圖處理
Node.js:Webpack 封裝 CSS、SCSS 成單一 JS 教學(使用 VS Code)
📆 2019-08-19
📁
軟體應用, 網站技術, CSS, Sass/SCSS, JavaScript, Node.js, Webpack
PHP trim() 移除字串兩側空白或指定字串函數
📆 2019-06-28
📁
網站技術, PHP
資料庫基本知識 & 筆記
📆 2019-04-10
📁
網站技術, 伺服器, 資料庫, 學業筆記, 學術詞彙, SQL
Sequator:簡單且強大的自動星點對齊軟體、星空拍攝後製處理
📆 2020-05-14
📁
軟體介紹, 軟體應用, 多媒體, 靜圖處理
留言區 / Comments
萌芽論壇