React网站集成AMP及VSCode中amp-img标签验证失败问题求助

我之前在开发AMP兼容的React PWA时，也踩过VSCode这个自动格式化的坑！明明严格按照AMP文档写了闭合标签，编辑器转头就给改成自闭合，直接导致AMP验证红叉，图片还加载不出来。下面给你几个靠谱的解决办法：

原因分析 #

AMP规范明确要求<amp-img>这类自定义元素必须使用完整的闭合标签（<amp-img></amp-img>），不能用自闭合格式（<amp-img />）。但VSCode的默认格式化工具（不管是内置HTML formatter还是Prettier）会把没有子元素的标签自动转成自闭合，这就和AMP的规则直接冲突了。

具体解决方案 #

方案1：修改VSCode内置HTML格式化设置 #

如果你的项目用的是VSCode自带的HTML格式化工具：

• 打开VSCode设置（快捷键Ctrl+, / Cmd+,）
• 在搜索框输入html.format.selfClosingTags
• 取消这个选项的勾选（设置为false）
• 保存设置后，再格式化代码，<amp-img>就会保持完整的闭合标签了

注意：这个设置是全局的，会影响所有HTML/JSX标签的自闭合行为，如果其他标签你还是想保持自闭合，建议用下面的方案。

方案2：配置Prettier（React项目常用） #

如果你的项目用Prettier做代码格式化，修改项目根目录的.prettierrc（或.prettierrc.json）配置文件：

{
  "selfClosingHtml": false,
  "htmlWhitespaceSensitivity": "ignore"
}

添加这两项后，Prettier就不会把<amp-img>转成自闭合标签了，同时也能保证其他HTML/JSX代码的格式化正常。

方案3：临时跳过单个标签的格式化 #

如果你不想修改全局或项目级的格式化配置，只想针对单个<amp-img>标签保留闭合格式，可以在标签上方添加<!-- prettier-ignore -->注释（针对Prettier）：

<!-- prettier-ignore -->
<amp-img src="/path/to/your-image.jpg" alt="图片描述文本"></amp-img>

这样Prettier就会跳过这个标签的格式化，保持你手动写的闭合格式。

额外提示 #

修改完设置后，记得重新格式化你的代码（快捷键Shift+Alt+F / Shift+Option+F），然后再用AMP验证工具检查，应该就能通过验证，图片也能正常显示了。

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