如何用ESLint/Prettier去除React中className的无用空格？

在React项目中，Prettier无法修复className属性内的多余空格问题，例如：

<img
    className='hidden  lg:block '
    src='./images/image-product-desktop.jpg'
    alt='product'
/>

我尝试使用prettier-plugin-tailwindcss插件，也修改了tailwindCSS.includeLanguages配置，但都无法去除这些无用空格。

相关配置 #

VS Code settings.json 部分 #

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": true,
"tailwindCSS.includeLanguages": {
    "typescript": "typescript",
    "javascript": "javascript",
    "html": "HTML",
    "javascriptreact": "javascriptreact",
    "typescriptreact": "typescriptreact"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Prettier 配置 #

{
    "semi": false,
    "useTabs": true,
    "tabWidth": 2,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "arrowParens": "avoid",
    "trailingComma": "es5",
    "printWidth": 120,
    "singleAttributePerLine": true,
    "plugins": ["prettier-plugin-tailwindcss"]
}

ESLint 配置 #

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "plugin:tailwindcss/recommended"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": ["react", "@typescript-eslint", "react-hooks", "tailwindcss", "prettier"],
    "rules": {
        "react/function-component-definition": [
            2,
            {
                "namedComponents": "function-declaration",
                "unnamedComponents": "arrow-function"
            }
        ],
    }
}

已知该插件开发者曾尝试修复此问题但后续回滚，请问有没有可行的解决方法？感谢任何帮助。

内容的提问来源于stack exchange，提问作者j-0-n-e-z