JSX 中的 ESLint 额外括号答案

【问题标题】：ESLint Extra Parentheses In JSXJSX 中的 ESLint 额外括号
【发布时间】：2019-02-13 15:12:37
【问题描述】：

我注意到在我的 jsx 文件中使用逻辑与 (&&) 将额外的括号添加到我的多行条件渲染中。例如，来自 React 文档的这段代码...

{unreadMessages.length > 0 &&
  <h2>
    You have {unreadMessages.length} unread messages.
  </h2>
}

...将被修改如下：

{unreadMessages.length > 0 && (
  <h2>
    You have {unreadMessages.length} unread messages.
  </h2>
)}

Here is my ESLint config:

"eslintConfig": {
  "root": true,
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "impliedStrict": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "computed-property-spacing": [
      "error"
    ],
    "indent": [
      "error",
      2
    ],
    "jsx-quotes": [
      "error"
    ],
    "key-spacing": [
      "error"
    ],
    "no-case-declarations": [
      "off"
    ],
    "no-console": [
      "off"
    ],
    "no-var": [
      "error"
    ],
    "object-curly-spacing": [
      "error",
      "always"
    ],
    "prefer-const": [
      "error"
    ],
    "quotes": [
      "error",
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "react/no-children-prop": "off",
    "react/prop-types": "off",
    "semi": [
      "error",
      "never"
    ]
  }
}

这是我无意造成的，还是有充分的理由？如果没有，我该如何防止这种情况？ disallow unnecessary parentheses 似乎有点矫枉过正。

【问题讨论】：

标签： reactjs jsx eslint

【解决方案1】：

这似乎是由react/jsx-wrap-multilines 引起的，可以通过将logical 语法类型设置为"ignore" 来防止。

【讨论】：