深入解析antfu/eslint-config项目中Prettier的printWidth配置问题

在antfu/eslint-config这个流行的ESLint配置项目中，存在一个关于Prettier格式化CSS代码时printWidth配置不生效的细节问题。这个问题虽然不大，但对于追求完美代码格式化的开发者来说值得关注。

问题本质

问题的核心在于Prettier格式化CSS代码时没有正确应用120字符的宽度限制，而是回退到了默认的80字符宽度。这会导致较长的CSS属性值（如字体族列表）被强制换行，影响代码的可读性和美观性。

技术背景

Prettier作为代码格式化工具，其printWidth参数控制着代码行的最大宽度。当一行代码超过这个宽度时，Prettier会自动将其换行。在antfu/eslint-config的默认配置中，原本期望所有代码都使用120字符的宽度限制，但实际上这个配置只对Markdown和Slidev文件生效，其他文件类型（包括CSS）则使用了Prettier的默认值80。

问题表现

具体表现为：当CSS代码中包含较长的属性值时，例如一个包含多个字体名称的font-family声明，Prettier会在80字符处强制换行，即使总长度并未达到预期的120字符限制。

解决方案

修复方案相对简单：需要确保在所有文件类型的Prettier配置中都明确指定printWidth为120。这可以通过修改Prettier的配置对象来实现，确保没有文件类型会回退到默认值。

更深层次的意义

这个问题提醒我们，在配置代码格式化工具时需要注意：

1. 不同文件类型的配置可能需要分别指定
2. 默认值有时会与预期不符
3. 配置的继承和覆盖关系需要仔细检查

对于团队项目而言，一致的代码格式化风格非常重要，这有助于提高代码的可读性和维护性。因此，即使是这样一个看似小的配置问题，也值得关注和修复。

最佳实践建议

在实际项目中配置Prettier时，建议：

1. 明确为所有支持的文件类型指定printWidth
2. 针对不同语言特性考虑是否需要特殊的宽度限制
3. 在项目文档中记录这些格式化决策
4. 定期检查格式化效果是否符合预期

通过这种方式，可以确保整个项目的代码风格保持一致，提高团队协作效率。