Phoenix LiveView 格式化问题：`mix format` 导致脚本标签内新增空行问题分析

问题现象描述

在 Phoenix LiveView 项目中使用 mix format 命令格式化包含 JavaScript 代码的 HEEx 模板时，发现了一个异常行为：每次运行格式化工具都会在脚本标签(<script>)内插入额外的空行。这种问题会导致多次格式化后代码中出现大量冗余空行，严重影响代码可读性。

问题复现条件

该问题出现在以下环境中：

• Elixir 1.16.3
• Phoenix LiveView 0.20.15 版本
• 当模板中包含嵌套的 EEx 标签和 JavaScript 代码时

典型的问题代码模式如下：

<script nonce={@csp_nonce}>
  window.appConfig = window.appConfig || {}
  <%= if @type == :files_client do %>
    window.appConfig.clientUpload.client = ...
  <% end %>
</script>

问题根源分析

通过 Git bisect 工具定位，这个问题源于 Phoenix LiveView 0.20.15 版本中的一个特定提交。该提交改进了 HEEx 模板的格式化逻辑，但在处理脚本标签内混合 JavaScript 和 EEx 代码时出现了边界条件处理不当的情况。

核心问题在于格式化引擎在处理以下情况时：

1. 脚本标签内的纯文本内容（JavaScript 代码）
2. 嵌入的 EEx 标签（如条件判断）
3. 两者混合时的缩进和对齐逻辑

格式化引擎错误地将 EEx 标签周围的上下文视为需要额外空行分隔的块，导致每次格式化都添加新的空行。

影响范围

这个问题主要影响：

1. 在 HEEx 模板中使用 <script> 标签嵌入 JavaScript 代码的场景
2. 当 JavaScript 代码中包含 EEx 模板标签时（特别是条件判断和变量插值）
3. 使用 mix format 命令进行代码格式化的开发流程

临时解决方案

对于遇到此问题的开发者，可以采取以下临时措施：

1. 暂时降级到 Phoenix LiveView 0.20.14 版本
2. 对于关键文件，在 .formatter.exs 中配置排除这些文件的自动格式化
3. 手动维护脚本标签内的格式，避免多次运行格式化工具

最佳实践建议

为避免此类问题，建议开发者：

1. 将复杂的 JavaScript 逻辑提取到外部 .js 文件中
2. 尽量减少在脚本标签内直接使用复杂的 EEx 逻辑
3. 使用 Phoenix 的静态资源管道管理客户端 JavaScript
4. 对于必须内联的脚本，考虑使用更简单的数据属性传递配置，而不是复杂的模板逻辑

问题修复状态

该问题已被确认并标记为已关闭，预计会在后续版本中得到修复。开发者可以关注项目更新日志获取修复版本信息。