如何配置Prettier避免HTML属性换行及标签拆分？

当前.prettierrc配置 #

{
    "semi": true,
    "useTabs": true,
    "tabWidth": 4
}

问题1：禁止HTML属性拆分为多行 #

当前格式化结果 #

<input
    type="radio"
    name="radiogroup1"
    id="rd2"
/>
<i
    aria-hidden="true"
    class="fa fa-user"
>

期望格式 #

<input type="radio" name="radiogroup1" id="rd2" />
<i aria-hidden="true" class="fa fa-user">

问题2：禁止拆分HTML标签的开闭角括号 #

当前格式化结果 #

<span
>
<label for="cb1"
>I agree with terms and conditions</label
>

期望格式 #

<span>
<label for="cb1">I agree with terms and conditions</label>

解决方案 #

修改你的.prettierrc配置，添加以下关键选项：

{
    "semi": true,
    "useTabs": true,
    "tabWidth": 4,
    "printWidth": 200,
    "wrapAttributes": "preserve"
}

• printWidth: 设置足够大的数值（比如200），确保单条标签的所有属性和内容能在一行内容纳，避免Prettier自动换行。
• wrapAttributes: 设置为"preserve"时，会保持你原本的属性换行格式；若希望强制所有属性都在一行，保持默认的"auto"即可，只要printWidth足够大就能实现。

标签角括号被拆分的问题本质是内容超出了默认printWidth（默认80），增大该值即可解决。

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