代码格式：在 JSX 代码中的二元运算符周围添加 space

Question

我注意到我文件中的任何 JavaScript 格式都正确（Prettier 在运算符之间正确插入了空格）但是对于 JSX 代码，空格没有正确插入。

示例-

这是我的.eslintrc.json文件-

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["react-app", "prettier"],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": ["react", "prettier"],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "trailingComma": "es5",
                "jsxBracketSameLine": true,
                "useTabs": true,
                "endOfLine": "auto",
                "jsxSingleQuote": true
            }
        ],
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "quotes": ["error", "single"],
        "space-infix-ops": ["warn", { "int32Hint": false }],
        "space-unary-ops": [
            "warn",
            {
                "words": true,
                "nonwords": false,
                "overrides": {
                    "++": true
                }
            }
        ]
    }
}

我可以为 Prettier 或 Eslint 添加任何属性以允许我在 JSX 中的运算符之间添加空格。或者扩展或任何其他方式来解决像这样的格式不一致问题？

Answer 1

如果你需要使用 Prettier，这似乎是不可能的。但是，如果您愿意放弃 Prettier，eslint-plugin-react provides an ESLint rule which allows you to require spaces around the equals sign: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md.

"react/jsx-equals-spacing": ["error", "always"]

代码格式：在 JSX 代码中的二元运算符周围添加 space

Code Formatting: Add space around binary operators in JSX code

javascript

jsx

reactjs

eslint

prettier