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

Posted 2023-03-27

【中文标题】代码格式：在 JSX 代码中的二元运算符周围添加空格

【英文标题】：Code Formatting: Add space around binary operators in JSX code

【发布时间】：2021-07-13 03:57:56

【问题描述】：

我注意到我文件中的所有 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 中的运算符之间添加空格。或者扩展或任何其他方式来解决这样的格式不一致？

【参考方案1】：

如果你需要使用 Prettier，这似乎是不可能的。但是，如果您愿意放弃 Prettier，eslint-plugin-react 提供了一个 ESLint 规则，允许您在等号周围使用空格：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md。

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

【讨论】：

不过，为了补充我的答案，我认为我从未见过在那种情况下等号周围的空格是 JSX 或 html 的首选。如果你打算让其他人参与这个项目，我会重新考虑这是否是你真正想要的风格规则。

这正是我想要的，所以谢谢！但是这个属性似乎与 prettier 冲突（我使用eslint-config-prettier 命令检查）。现在我无法弄清楚它与哪个属性冲突。但是您确定在 JSX 中围绕运算符等设置空格不是最佳做法吗？

@Pranav_m7 在代码风格方面没有“最佳实践”之类的东西，只有一致性问题。我同意 Unlocked，我从未见过在 JSX 或 HTML 属性中更喜欢 = 周围的空格的代码样式，这不是先例。

就像帕特里克所说，最终归结为风格，但我以前从未见过人们在那里使用空间。在实际创建了一个项目并亲自测试之后，我相信 prettier 有一个 non-configurable 规则，它在 JSX 中强制等号周围没有空格，所以如果你真的想要这个规则，你唯一真正的选择就是放弃 prettier。我会将其添加到答案中。

@Pranav_m7 你见过有这样空间的项目吗？