如何使用Prettier强制删除HTML自闭合标签前的多余空格？

Prettier官方目前确实没有内置配置项支持关闭HTML自闭合标签/>前的空格生成行为，你可以通过以下三种方式实现需求：

这是改动最小的实现方式，直接通过插件扩展Prettier的格式化逻辑即可：

• 安装对应插件作为开发依赖：
  npm i prettier-plugin-no-trailing-space-before-self-closing-tag -D
• 在项目的Prettier配置文件中引入插件：

{
  "plugins": ["prettier-plugin-no-trailing-space-before-self-closing-tag"]
}

• 后续正常执行Prettier格式化命令，就会自动去掉自闭合标签前的多余空格。

如果项目已经接入ESLint，可以直接通过规则做二次格式化修正：

• 依赖安装：
  • 普通HTML项目：安装eslint、eslint-plugin-html
  • Vue/React项目：安装对应框架的ESLint插件（如eslint-plugin-vue、eslint-plugin-react）
• 添加ESLint规则：
  普通HTML项目规则：

  {
    "rules": {
      "html/self-closing-tag-spacing": ["error", "never"]
    }
  }
  

  Vue项目规则：

  {
    "rules": {
      "vue/html-closing-bracket-spacing": ["error", {
        "selfClosingTag": "never"
      }]
    }
  }
  

  React项目规则：

  {
    "rules": {
      "react/jsx-tag-spacing": ["error", {
        "beforeSelfClosing": "never"
      }]
    }
  }
  

• 调整格式化脚本，先执行Prettier格式化，再执行ESLint修复：

{
  "scripts": {
    "format": "prettier --write . && eslint --fix ."
  }
}

如果不想引入额外依赖，可以直接修改Prettier的内置逻辑并持久化修改：

• 安装patch-package作为开发依赖
• 找到路径node_modules/prettier/parser-html.js，搜索自闭合标签拼接的逻辑，删除硬编码的空格字符
• 执行npx patch-package prettier生成补丁文件，后续项目重新安装依赖时补丁会自动生效，不需要重复修改。

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