在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 則留言:
您好, 我們正在尋找Angular網頁工程師,不知是否有機會與您取得連繫。謝謝!
謝謝您的邀請,可惜因為我對前端和Angular都不是很熟,我是Java後端比較熟一點。
感謝您的介紹,好用的工具。:)
張貼留言