如何避免Prettier将单属性HTML标签格式化为多行

理解Prettier的printWidth配置

printWidth是Prettier的核心配置项之一，它定义了代码行的最大长度。当一行代码超出这个宽度时，Prettier会尝试将其拆分成多行以保持可读性。对于HTML标签，这意味着当一个标签（包括其属性）的总长度超过printWidth时，Prettier可能会在属性之间或标签内部进行换行。

例如，一个理想的单行HTML标签：

<div class="header_info"></div>

如果printWidth设置得较低，或者Prettier的内部逻辑判断需要换行，它可能会被格式化为：

<div
  class="header_info"
></div>

这种自动换行对于具有许多属性的复杂标签非常有用，可以提高代码的可读性：

立即学习“前端免费学习笔记（深入）”；

<button
  class="btn btn-primary"
  type="submit"
  data-toggle="modal"
  data-target="#exampleModal"
>
  提交
</button>

然而，对于只有一个属性的简单标签，将其强制拆分为多行通常是多余的，反而降低了简洁性。

易标AI

告别低效手工，迎接AI标书新时代！3分钟智能生成，行业唯一具备查重功能，自动避雷废标项

75

查看详情

配置printWidth： 你可以在Prettier的配置文件（如.prettierrc、.prettierrc.json或package.json中的prettier字段）中设置printWidth：

// .prettierrc
{
  "printWidth": 120
}

将printWidth设置得足够大（例如120或更高）可以在一定程度上减少单属性标签被拆分的可能性。但是，正如用户所遇到的，过大的printWidth会导致所有长行都不被拆分，这与需要多行格式化的复杂标签的初衷相悖。因此，printWidth是一个全局性的折衷方案，无法完美解决所有细粒度的格式化需求。

使用<!-- prettier-ignore -->进行局部豁免

当全局的printWidth无法满足特定代码块的格式化需求时，Prettier提供了prettier-ignore注释来局部禁用格式化。对于HTML文件，你需要使用HTML注释的格式。

语法： 在需要忽略格式化的代码块上方添加<!-- prettier-ignore -->注释。Prettier会跳过该注释紧随其后的代码块，不对其进行任何格式化。

示例： 如果你希望某个单属性的div标签始终保持单行，即使它超出了当前的printWidth（或Prettier决定拆分它），你可以这样做：

<!-- prettier-ignore -->
<div class="header_info"></div>

<!-- 另一个示例，即使属性值很长，也会保持单行 -->
<!-- prettier-ignore -->
<span class="very_long_class_name_that_might_exceed_print_width_but_we_want_it_on_one_line">文本内容</span>

使用<!-- prettier-ignore -->的优势在于它提供了精确的控制，允许你为特定的、不希望被Prettier改动的代码段设置豁免，而不会影响项目中其他部分的全局格式化规则。

最佳实践与注意事项

1. printWidth作为全局基线： 首先，根据团队或项目的整体风格，设置一个合理的printWidth值。这个值应该在保证大部分代码可读性的前提下，尽量减少不必要的换行。例如，80或100是常见的选择。
2. prettier-ignore作为例外处理： 仅在printWidth无法满足特定、明确的格式化需求时使用<!-- prettier-ignore -->。例如，当一个简单标签被不恰当地拆分，或者你有一个特定格式的模板需要保持原样时。
3. 避免滥用： 过度使用prettier-ignore会导致代码库中出现大量手动格式化的代码，从而降低Prettier带来的自动化和一致性优势。它应该被视为一种例外机制，而非常规做法。
4. 可读性优先： 无论使用何种方法，最终目标都是提高代码的可读性和维护性。在某些情况下，即使是单属性标签，如果其属性值非常长，被拆分成多行可能反而更易读。始终权衡格式化结果与实际可读性。
5. 跨文件类型： 请注意，prettier-ignore的注释语法因文件类型而异。在JavaScript/TypeScript/CSS中，你将使用// prettier-ignore。

总结

为了在Prettier中实现对单属性HTML标签的精细格式化控制，我们推荐采取以下策略：首先，通过合理配置printWidth来建立一个全局的格式化基线，以适应大多数代码场景。当遇到特定且不希望被Prettier自动拆分为多行的简单HTML标签时，可以灵活运用<!-- prettier-ignore -->注释进行局部豁免。这种结合全局配置与局部覆盖的方法，能够有效地平衡代码格式化的一致性与特定场景下的灵活性，确保代码既保持整洁专业，又符合开发者的特定视觉偏好。

以上就是如何避免Prettier将单属性HTML标签格式化为多行的详细内容，更多请关注php中文网其它相关文章！