免費線上工具 – 前端排版 js-beautify(支援HTML、CSS、JavaScript)

今天來跟大家介紹一套線上的排版工具，是同事推薦給我的

大家在寫著前端頁面的時候，是不是常常被排版搞到快瘋掉

雖然有些編譯器都有支援內建的自動排版，但卻缺乏了一點彈性

那就要講到今天跟大家分享的 – js beautify

基本介紹

那我們先進到首頁看看

⬆️右上角可以切換三種前端的語言

來講一下主要的設定

分別是以下幾個設定

• 縮排間距 – 一個tab、2格空白、3格空白、4格空白、8格空白
• 允許符號前的新換行 – 移除所有新的行、允許1行、允許2行、允許5行、允許10行、允許無限制
• 自動換行 – 不要換行、40、70、80、110、120、160個字元附近自動換行
• 程式碼風格 – Braces with control statement ( if、for、else後面接括號)、Braces on own line(括號自己一列)、End braces on own line(結束的括號自己一列)、維持原樣

來講一下第二項的 允許符號前的換行

這裡用我寫的程式作為範例，可以看出來中間換行比較雜亂

那要是我現在選擇「允許5列新行」

⬆️可以看到超出5列新行(也就是4列空白)就會被縮下去，而本來就在裡面的則不會有影響

程式碼風格的範例

//Braces with control statement - 跟著控制邏輯後面
function generateChart() {
    if (abc > 10) {
        blala
    } else(abc < 10) {
        lalala
    }
}


//Braces on own line - 全都自己一列
function generateChart()
{
    if (abc > 10)
    {
        blala
    }
    else(abc < 10)
    {
        lalala
    }
}

//End braces on own line - 結束的會自己一行
function generateChart() {
    if (abc > 10) {
        blala
    }
    else(abc < 10) {
        lalala
    }
}

這樣就能比較明顯的看來差異了

(偷偷講筆者自己最習慣的是第三種的寫法)

結論

免費且開源的線上功能就是香啊!

在需要排版的時候，確實還是挺便利的

像是有時候只是想寫一個小功能檢查，根本懶得打開編譯器，都是打開記事本、notepad ++ 就寫一些

那這時候這一個網站就相當有用了，集合了JavaScript排版、CSS排版…等前端排版於一身

而且開源也保證了一定的公開及安全性

🧡希望這篇文章有對你有一點幫助，有空有閒的話幫我點一個小小的廣告或留言如何

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

一些隨機的資訊文章