VS Code如何配置实现PHP文件中HTML单属性每行单独格式化

当前PHP文件默认使用Intelephense作为格式化工具，它仅处理PHP原生语法的格式调整，不会对文件内嵌入的HTML标签应用singleAttributePerLine规则。你之前配置的prettier.singleAttributePerLine仅对Prettier接管的文件生效，html.format.wrapAttributes是VS Code内置HTML格式化器的专属规则，二者都不会在Intelephense格式化PHP文件时触发，所以HTML部分的属性始终不会按单行单属性排版。

使用Prettier搭配官方PHP插件作为PHP文件的格式化器，既能保持现有PHP代码的格式化效果，又能自动让嵌入的HTML遵循单属性独占一行规则：

• 在项目终端执行命令，安装所需依赖：

  npm install --save-dev prettier @prettier/plugin-php
  

• 替换项目.vscode/settings.json里的相关配置，删除无效的Intelephense、内置HTML格式化相关配置项，调整后完整配置如下：

  {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[PHP]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleAttributePerLine": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.printWidth": 80,
    // 对齐原有PHP格式化规则，保持PHP代码格式和之前一致
    "prettier.phpVersion": "8.1",
    "prettier.braceStyle": "psr-12",
    "cSpell.words": ["gematriya", "roadmap", "WPAPI"]
  }
  

• 重启VS Code生效，之后保存PHP文件时，多属性HTML标签会自动调整为单属性独占一行的格式，PHP代码部分会保持PSR规范排版，和你之前的预期效果完全一致。

如果不想替换PHP默认格式化器，可以安装支持识别PHP文件内嵌入HTML片段的格式化扩展，配置保存时先调用Intelephense处理PHP语法，再调用内置HTML格式化器处理HTML部分，同时将html.format.wrapAttributes参数修改为"force-aligned"。但这个方案兼容性较差，容易在PHP和HTML的代码边界出现格式错乱。

配置生效后，原代码中写在一行的多属性标签：

<div class="small-button" data-post-type="<?= $post_type ?>" data-type="<?= esc_attr($type) ?>" role="button" data-value="<?= esc_attr($value) ?>">

会自动格式化为目标效果：

<div 
  class="small-button"
  data-post-type="<?= $post_type ?>"
  data-type="<?= esc_attr($type) ?>"
  role="button"
  data-value="<?= esc_attr($value) ?>"
>

所有PHP逻辑、短标签输出部分都不会被改动。

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