ESLint Дополнительные круглые скобки в JSX

Я заметил, что к моим многострочным условным рендерингам добавляются дополнительные круглые скобки с использованием логического И (&&) в моих файлах jsx. Например, этот код из документации React ...

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

... будет изменен следующим образом:

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

Вот моя конфигурация ESLint:

"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"
    ]
  }
}

Я вызвал это непреднамеренно или для этого есть веская причина? Если нет, как я могу это предотвратить? Похоже на перебор для запретить ненужные скобки.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
873
1

Ответы 1

Похоже, это вызвано реагировать / jsx-обертка-мультилиний и может быть предотвращено установкой типа синтаксиса logical на "ignore".

Другие вопросы по теме