網頁

2019/7/30

Visual Studio Code HTML CSS JavaScript程式碼排版(Code Formatter)套件 Beautify

在Visual Studio Code(VS Code)撰寫前端網頁程式時,經常需要對編輯的HTML,CSS及JavaScript程式碼整理排版讓原始碼變得整齊好維護,在VS Code可以安裝Beautify這個程式碼排版(code formatter)擴充套件來幫助我們快速排版。

安裝方式在VS Code的最左側點選Extensions的圖示;或直接按Ctrl + Shift + X切換至擴充套件的marketplace。在搜尋欄位輸入"beautify"搜尋即可找到。



點選[install]即可安裝。

安裝好後只要在目前編輯的HTML,CSS或JavaScript文件上使用下面快速鍵即可對編輯區的程式碼排版。

  • Windows按Shift + Alt + F
  • macOs按Shift ⇧ + Option ⌥ + F

或按F1,或
Windows按Ctrl + Shift + P
macOS按Command ⌘ + Shift ⇧ + P
開啟指令面板(Command Palette),輸入"beautify"找到下面指令。
然後選擇[Beautify File]對編輯區的整份文件進行重新排版,
或選擇[Beautify selection]對滑鼠反白選取的區域重新排版。




若要修改Beautify的設定,可在偏好設定[Settings]搜尋欄位輸入Beautify,或在Settings -> Extensions -> Beautify Config找到Beautify的設定檔,點選[Edit in settings.json]編輯。



例如下面把Beautify的縮排統一調整為兩格空白。

settings.json (Beautify Config)

{
    "beautify.config": {
        "indent_size":2,
    }
}

3 則留言:

  1. 您好, 我們正在尋找Angular網頁工程師,不知是否有機會與您取得連繫。謝謝!

    回覆刪除
  2. 謝謝您的邀請,可惜因為我對前端和Angular都不是很熟,我是Java後端比較熟一點。

    回覆刪除
  3. 感謝您的介紹,好用的工具。:)

    回覆刪除