WebStorm中如何優(yōu)雅地控制HTML代碼格式化：標簽換行而屬性保持單行？

webstorm html 代碼格式化：標簽換行，屬性單行

許多 webstorm 用戶希望 HTML 代碼既整潔又易讀，特別是控制標簽換行和屬性換行。本文介紹如何在 WebStorm 中實現(xiàn)：標簽換行，但屬性保持在同一行。

假設我們有一段 HTML 代碼需要格式化，目標是標簽換行，但屬性（例如 src 屬性）保持單行。

首先，確保 WebStorm 正確識別并格式化 HTML 代碼。然后，打開 WebStorm 設置面板（File -> Settings 或 WebStorm -> Preferences）。

搜索 “HTML” 或 “Code Style”，找到 HTML 代碼格式化選項。 關鍵在于找到并調(diào)整以下兩個設置：

立即學習“前端免費學習筆記（深入）”；

• 標簽換行: 選擇合適的選項，例如 “Wrap always”（總是換行）或 “Wrap if long”（超過一定長度換行），以控制標簽換行行為。

• 屬性換行: 找到控制屬性換行的設置（通常命名為 “Attributes” 或類似名稱）。選擇 “Do not wrap”（從不換行）選項，確保屬性始終保持在同一行，即使屬性值很長。

通過調(diào)整這兩個設置，即可實現(xiàn)標簽換行，而屬性保持單行的效果。 最終效果如下：

標簽換行：

屬性不換行：

通過選擇 “Do not wrap”，所有屬性都將保持單行顯示。