使用Angular 15.1自闭合标签时Prettier 2.7.1报错求助

问题原因 #

Prettier 2.7.1的HTML解析逻辑仍遵循传统HTML标准，仅允许void元素（如<br>、<img>）和外部元素使用自闭合语法，未适配Angular 15.1新增的自定义组件自闭合特性，因此抛出错误：

Only void and foreign elements can be self closed

解决办法 #

• 升级Prettier版本：Prettier 2.8.0及以上版本已适配Angular 15的自定义组件自闭合特性，执行以下命令升级：

  npm install prettier@latest --save-dev
  # 或使用yarn
  yarn add prettier@latest --dev
  

• 临时规避（不升级版本时）：将自定义组件的自闭合标签改为成对标签，例如把 <app-custom-component /> 修改为 <app-custom-component></app-custom-component>。

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