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,
    }
}

• 在Visual Studio Code直接開啟html於瀏覽器