VSCode的HTML格式化功能可提升代碼可讀性，支持右鍵或快捷鍵Shift+Alt+F手動(dòng)格式化，推薦設(shè)置Prettier或內(nèi)置工具為默認(rèn)格式化程序，通過(guò)settings.json配置默認(rèn) formatter，啟用“format on save”實(shí)現(xiàn)保存時(shí)自動(dòng)格式化，并可用.prettierrc文件自定義縮進(jìn)、引號(hào)等規(guī)則。

VSCode 的 HTML 格式化功能可以幫助你快速整理代碼結(jié)構(gòu)，讓標(biāo)簽嵌套清晰、縮進(jìn)統(tǒng)一，提升可讀性。這個(gè)功能開箱即用，只需簡(jiǎn)單操作就能生效。

自動(dòng)格式化 HTML 文件

當(dāng)你編輯一個(gè) .html 文件時(shí)，VSCode 通常會(huì)自動(dòng)識(shí)別語(yǔ)言模式，并啟用默認(rèn)的格式化工具。要手動(dòng)觸發(fā)格式化：

• 右鍵點(diǎn)擊編輯器中的 HTML 內(nèi)容，選擇“格式化文檔”
• 或使用快捷鍵：Shift + Alt + F（Windows / Linux），Shift + Option + F（Mac）

如果未指定默認(rèn)格式化工具，VSCode 會(huì)提示你選擇一個(gè)。推薦選擇內(nèi)置的 Prettier 或 HTML Language Features。

設(shè)置默認(rèn)格式化工具

為避免每次都要選擇，可以設(shè)定默認(rèn)的格式化程序：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

• 打開設(shè)置（Ctrl + ,）
• 搜索“Default Formatter”
• 找到 “Editor: Default Formatter”，設(shè)置為 esbenp.prettier-vscode 或 vscode.html-language-features

也可以在項(xiàng)目根目錄添加 .vscode/settings.json 文件，指定格式化規(guī)則：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

保存時(shí)自動(dòng)格式化

提高效率的一個(gè)常用做法是開啟“保存即格式化”：

比格設(shè)計(jì)

比格設(shè)計(jì)是135編輯器旗下一款一站式、多場(chǎng)景、智能化的在線圖片編輯器

124

查看詳情

• 進(jìn)入設(shè)置 → 搜索 “format on save”
• 勾選 Editor: Format On Save

這樣每次保存文件（Ctrl + S），HTML 代碼就會(huì)自動(dòng)被整理整齊。

自定義格式化規(guī)則（可選）

如果你使用 Prettier，可在項(xiàng)目中創(chuàng)建 .prettierrc 文件來(lái)控制格式化行為：

{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": false,
  "printWidth": 80
}

這些配置會(huì)影響 HTML（以及 JS/JSX）的格式化效果，比如縮進(jìn)空格數(shù)、是否使用分號(hào)等。

基本上就這些。VSCode 的 HTML 格式化功能不復(fù)雜但容易忽略，合理設(shè)置后能顯著提升編碼體驗(yàn)。

以上就是VSCode的HTML格式化功能怎么用_VSCodeHTML格式化功能教程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！