Laravel项目中Prettier格式化破坏Mailable邮件排版的问题

在Laravel项目中使用Prettier做代码格式化时，执行npm run lint:fix（对应命令prettier --write ./resources/views）会自动给邮件视图里的@component标签后添加空行，导致邮件显示出现多余空白，破坏原本的排版。

格式化前后代码对比 #

格式化前：

@component("mail::message")
    You have been invited to join the {{ $invitation->project->name }} team! If you do not have an account, you may
    create one by clicking the button below. After creating an account, you may click the invitation acceptance button
    in this email to accept the team invitation:
    @component("mail::button", ["url" => route("register")])
        {{ __("Create Account") }}
    @endcomponent
    If you already have an account, you may accept this invitation by clicking the button below:
    @component("mail::button", ["url" => $acceptUrl])
        {{ __("Accept Invitation") }}
    @endcomponent
    If you did not expect to receive an invitation to this team, you may discard this email.
@endcomponent

格式化后：

@component("mail::message")
    You have been invited to join the {{ $invitation->project->name }} team! If you do not have an account, you may
    create one by clicking the button below. After creating an account, you may click the invitation acceptance button
    in this email to accept the team invitation:
    @component("mail::button", ["url" => route("register")])
        {{ __("Create Account") }}
    @endcomponent

    If you already have an account, you may accept this invitation by clicking the button below:
    @component("mail::button", ["url" => $acceptUrl])
        {{ __("Accept Invitation") }}
    @endcomponent
    If you did not expect to receive an invitation to this team, you may discard this email.
@endcomponent

新增的空行导致邮件显示出现多余空白：

解决办法 #

1. 让Prettier忽略邮件视图文件

在项目根目录的.prettierignore文件中添加邮件视图的路径，示例：

resources/views/emails/**/*.blade.php

这样Prettier会跳过这些文件的格式化操作，避免自动插入空行。

2. 调整Prettier的HTML格式化规则

在项目的.prettierrc（或.prettierrc.json）配置文件中，针对Blade模板调整空白敏感度规则：

{
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "overrides": [
    {
      "files": "*.blade.php",
      "options": {
        "htmlWhitespaceSensitivity": "strict"
      }
    }
  ]
}

将htmlWhitespaceSensitivity设为strict后，Prettier会严格保留原有空白结构，减少不必要的空行插入。

3. 局部禁用Prettier格式化

在邮件视图中，用注释包裹不需要格式化的代码段，告诉Prettier跳过该区域：

@component("mail::message")
    You have been invited to join the {{ $invitation->project->name }} team! If you do not have an account, you may
    create one by clicking the button below. After creating an account, you may click the invitation acceptance button
    in this email to accept the team invitation:
    @component("mail::button", ["url" => route("register")])
        {{ __("Create Account") }}
    @endcomponent
<!-- prettier-ignore -->
    If you already have an account, you may accept this invitation by clicking the button below:
    @component("mail::button", ["url" => $acceptUrl])
        {{ __("Accept Invitation") }}
    @endcomponent
<!-- prettier-ignore-end -->
    If you did not expect to receive an invitation to this team, you may discard this email.
@endcomponent

内容的提问来源于stack exchange，提问作者Syed Abdur Rehman Kazmi