WebStorm格式化EJS代码时自动添加多余换行，如何解决？

问题场景 #

原本EJS代码：

<h1>
    written by "<span class='accent'><%= params.user %></span>"
</h1>

页面渲染结果为 written by "Salmon"，但使用WebStorm格式化快捷键Ctrl+Alt+L后，代码被拆分为：

<h1>
    written by "
    <span class='accent'><%= params.user %></span>
    "
</h1>

导致页面渲染出多余空格：written by " Salmon "。

解决方案 #

方案1：调整WebStorm格式化规则（推荐）

1. 打开WebStorm设置（快捷键Ctrl+Alt+S）
2. 进入Editor > Code Style > HTML（EJS默认继承HTML的格式化规则）
3. 切换到Other标签页
4. 在Inline elements列表中添加<span>，确保该元素被识别为内联元素，格式化时不会强制拆行
5. 若仍有问题，可进入Wrap and Braces标签页，调整Wrap text的阈值为更大数值，或勾选Keep line breaks选项（针对短文本）

方案2：临时禁用局部代码格式化

在需要保留格式的代码段前后添加格式化控制注释，让WebStorm跳过这段代码的格式化：

<h1>
    <!--@formatter:off-->
    written by "<span class='accent'><%= params.user %></span>"
    <!--@formatter:on-->
</h1>

方案3：修改代码结构规避问题

通过EJS变量拼接的方式，避免HTML文本与内联元素的拆分：

<h1>
    written by <%= `"${params.user}"` %>
</h1>

或保持代码为一行（若可读性可接受）：

<h1>written by "<span class='accent'><%= params.user %></span>"</h1>

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