如何配置Prettier使块内HTML元素格式化保持一致？

我使用NextJS默认ESLint规则，同时在VSCode中启用了Prettier。开发模板时，需要让父div内的所有子HTML元素格式保持一致——因为频繁使用多选操作，格式统一才能提升效率。

格式化前代码 #

<div className="grid grid-cols-2 gap-x-12 gap-y-4 mt-12">
  <div className="border-b border-[#87469E] pb-8">Staked Supply</div>
  <div className="border-b border-[#87469E] pb-8">Deployer Address</div>
  <div className="border-b border-[#87469E] pb-8">Circulating Supply</div>
  <div className="border-b border-[#87469E] pb-8">Treasury Contract</div>
  <div className="border-b border-[#87469E] pb-8">wTIA Liquidity</div>
  <div className="border-b border-[#87469E] pb-8">Burnt Address</div>
  <div className="border-b border-[#87469E] pb-8">wTIA Price</div>
  <div className="border-b border-[#87469E] pb-8">Vesting Contract</div>
</div>

格式化后出现的问题 #

<div className="grid grid-cols-2 gap-x-12 gap-y-4 mt-12">
  <div className="border-b border-[#87469E] pb-8">Staked Supply</div>
  <div className="border-b border-[#87469E] pb-8">
    Deployer Address
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Circulating Supply
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Treasury Contract
  </div>
  <div className="border-b border-[#87469E] pb-8">wTIA Liquidity</div>
  <div className="border-b border-[#87469E] pb-8">Burnt Address</div>
  <div className="border-b border-[#87469E] pb-8">wTIA Price</div>
  <div className="border-b border-[#87469E] pb-8">
    Vesting Contract
  </div>
</div>

这种格式混乱导致无法用快捷键批量选择文本，以下是两种统一格式的解决方法：

方法1：强制所有元素保持单行 #

修改项目根目录的.prettierrc或.prettierrc.json配置文件，增大printWidth的值（比如设为180），让所有子元素的内容加标签长度都能容纳在单行内：

{
  "printWidth": 180,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
  // 保留你原有其他Prettier配置
}

调整后Prettier会允许更长的单行内容，所有子div都会保持统一的单行格式。

方法2：强制所有元素内容换行 #

如果希望所有子元素的文本内容都单独换行显示，可以通过<!-- prettier-ignore -->指令禁用父div的自动格式化，然后手动调整格式：

<!-- prettier-ignore -->
<div className="grid grid-cols-2 gap-x-12 gap-y-4 mt-12">
  <div className="border-b border-[#87469E] pb-8">
    Staked Supply
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Deployer Address
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Circulating Supply
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Treasury Contract
  </div>
  <div className="border-b border-[#87469E] pb-8">
    wTIA Liquidity
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Burnt Address
  </div>
  <div className="border-b border-[#87469E] pb-8">
    wTIA Price
  </div>
  <div className="border-b border-[#87469E] pb-8">
    Vesting Contract
  </div>
</div>

添加该指令后，Prettier不会修改这个父div内部的格式，确保所有子元素保持统一的换行样式。

内容的提问来源于stack exchange，提问作者mchl18