如何解决Prettier在JS文件中格式化HTML标签的异常问题？

以下是几种彻底修复的方法，按需选择：

• 忽略特定代码块
  在不想被Prettier格式化的HTML代码前后添加注释，强制跳过格式化：

  {/* prettier-ignore */}
  <div class="custom-html">
    <!-- 你的HTML代码 -->
  </div>
  {/* prettier-ignore-end */}
  

  单行HTML可以直接在标签前加<!-- prettier-ignore -->注释。

• 修改Prettier配置文件
  在项目根目录的.prettierrc（或.prettier.config.js）中添加规则，调整嵌入HTML的格式化行为：

  {
    "embeddedLanguageFormatting": "off",
    "overrides": [
      {
        "files": ["*.js"],
        "options": {
          "parser": "babel"
        }
      }
    ]
  }
  

  embeddedLanguageFormatting: 'off'会关闭对JS中嵌入的其他语言（比如HTML）的格式化，指定parser: 'babel'能让Prettier更准确识别JS中的HTML片段。

• 关闭JS文件的自动格式化
  如果不需要Prettier自动格式化JS文件，在VS Code的settings.json中添加：

  "[javascript]": {
    "editor.formatOnSave": false
  }
  

  这样保存JS文件时就不会触发Prettier自动格式化。

• 切换文件扩展名（针对JSX场景）
  如果你的代码是JSX语法（React组件等），把文件扩展名从.js改成.jsx，Prettier会自动使用JSX解析器，正确格式化HTML标签，不会出现损坏问题。

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