Error arrow function used ambiguously with a conditional expression

3


0

🔧 Fixable

Some problems reported by this rule are automatically fixable by the --fix command line option

/*eslint no-confusing-arrow: "error"*/
/*eslint-env es6*/

var x = a => 1 ? 2 : 3;
var x = (a) => 1 ? 2 : 3;

/*eslint no-confusing-arrow: "error"*/
/*eslint-env es6*/
var x = a => (1 ? 2 : 3);
var x = (a) => (1 ? 2 : 3);
var x = (a) => {
    return 1 ? 2 : 3;
};
var x = a => { return 1 ? 2 : 3; };

/*eslint no-confusing-arrow: ["error", {"allowParens": false}]*/
/*eslint-env es6*/
var x = a => (1 ? 2 : 3);
var x = (a) => (1 ? 2 : 3);

/*eslint no-confusing-arrow: ["error", {"onlyOneSimpleParam": true}]*/
/*eslint-env es6*/
() => 1 ? 2 : 3;
(a, b) => 1 ? 2 : 3;
(a = b) => 1 ? 2 : 3;
({ a }) => 1 ? 2 : 3;
([a]) => 1 ? 2 : 3;
(...a) => 1 ? 2 : 3;

не могу проверить, но если память не изменяет;

${(props) => (props.hidden ? 'hidden' : 'visible')}

избавится от этого сообщения о ворсинах

Это, безусловно, одно из тех правил ESLint, которые могут действовать вам на нервы! Обычно я делаю именно то, что предлагал @GGAlanSmithee , но для этого потребуется, чтобы для параметра ESLint allowParens установлено значение true, например:

/* eslint no-confusing-arrow: ["error", {allowParens: true}] */

export const ProgressBarWrapper = styled.div`
  ...
  visibility: ${(props) => (props.hidden ? 'hidden' : 'visible')};
  ...

Другой вариант — отключить правило, а затем оставить код как есть:
/* eslint no-confusing-arrow: ["off"] */

Если вы хотите применить эти правила ко всему проекту, добавьте их в свой package.json разделе eslintConfig .

Возможно, этот шаблон может добавить одно из вышеперечисленных правил глобально, я бы предложил ["error", {allowParens: true}] .
Что думают все ???

http://eslint.org/docs/rules/no-confusing-arrow

Давайте просто отключим это правило, потому что это стиль, который мы поощряем со стороны styled-components , так что это не должно быть проблемой в шаблоне.

@GGAlanSmithee Ваше решение работало без установки {allowParens: true} . Нам все еще нужно глобально отключить это правило? Копия: @mxstbr @ samit4me

Это должно зависеть от того, какой плагин / редактор ESLint вы используете, потому что в документации указано, что для allowParens по умолчанию установлено значение false. Я использую VSCode, и если я не укажу allowParens: true он показывает ошибки в круглых скобках.

Я согласен с Максом в отключении этого правила, обычно оно причиняет больше боли, чем пользы.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.

🛠 Fixable

Некоторые проблемы, о которых сообщает это правило, автоматически устраняются с помощью параметра командной строки --fix .

var x = a => 1 ? 2 : 3;var x = (a) => 1 ? 2 : 3;

var x = a => (1 ? 2 : 3);var x = (a) => (1 ? 2 : 3);var x = (a) => {    return 1 ? 2 : 3;};var x = a => { return 1 ? 2 : 3; };

var x = a => (1 ? 2 : 3);var x = (a) => (1 ? 2 : 3);

() => 1 ? 2 : 3;(a, b) => 1 ? 2 : 3;(a = b) => 1 ? 2 : 3;({ a }) => 1 ? 2 : 3;([a]) => 1 ? 2 : 3;(...a) => 1 ? 2 : 3;

Моя кодовая база заполнена файлами .js, и я использую eslint для определенного файла. Я получаю следующие ошибки:

 1:8   error  'React' is defined but never used
                              no-unused-vars
1:27  error  Trailing spaces not allowed
                              no-trailing-spaces
2:1   error  'prop-types' should be listed in the project's dependencies. Run
'npm i -S prop-types' to add it  import/no-extraneous-dependencies
7:13  error  Arrow function used ambiguously with a conditional expression
                              no-confusing-arrow
11:3   error  Prop type `array` is forbidden
                              react/forbid-prop-types

Мой .eslintrc.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  extends: [
    'airbnb',
    "plugin:react/recommended"
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
  },
  plugins: [
    'react'
  ],
  rules: {
    "react/jsx-uses-react": 1,
  },
};

Мой Package.json

"devDependencies": {
    "@commitlint/cli": "^8.1.0",
    "@commitlint/config-conventional": "^8.1.0",
    "babel-cli": "6.18.0",
    "babel-plugin-dynamic-import-node": "1.0.0",
    "babel-plugin-react-intl": "2.2.0",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-react-inline-elements": "6.8.0",
    "babel-plugin-transform-react-remove-prop-types": "0.2.11",
    "babel-preset-latest": "6.16.0",
    "babel-preset-react-hmre": "1.1.1",
    "circular-dependency-plugin": "2.0.0",
    "coveralls": "2.11.15",
    "css-loader": "^0.23.1",
    "enzyme": "^2.7.0",
    "eslint": "3.11.1",
    "eslint-config-airbnb": "13.0.0",
    "eslint-config-airbnb-base": "10.0.1",
    "eslint-import-resolver-webpack": "0.8.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.7.1",
    "eslint-plugin-redux-saga": "0.1.5",
    "eventsource-polyfill": "0.9.6",
    "exports-loader": "0.6.3",
    "file-loader": "^0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.1",
    "husky": "^3.0.5",
    "lint-staged": "^3.2.1",
    "ngrok": "2.2.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.18.2",
    "standard-version": "^7.0.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-hot-middleware": "^2.18.0"
}

Я пробовал использовать различные решения ниже:

/*eslint-disable no-unused-vars*/
var React = require('react');
/*eslint-enable no-unused-vars*/

А также:

var React = require('react');    // eslint-disable-line no-unused-vars

Но не может этого сделать почти для 300-500 файлов.

Ожидания заключается в устранении всех ошибок, возникающих в файлах .js.

Заранее спасибо.

npm install eslint-plugin-react --save-dev

В разделе расширений .eslintrc.json включите следующий плагин:

{
 "plugins": [
    "react"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Вот что означает каждая из этих ошибок и как их исправить:

1:8 error 'React' is defined but never used:

Правило Eslint no-unused-vars не распознает переменные, используемые в JSX. Измените свои правила eslint следующим образом:

rules: {
    "react/jsx-uses-react": 1,
},

К этому:

rules: {
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1
},

1:27 error Trailing spaces not allowed

У вас есть конечный пробел где-то в строке 27 в конце вашей строки, удалите его, и ошибка должна исчезнуть.

Ошибка 2: 1 "prop-types" должна быть указана в зависимостях проекта. Запустить "npm i -S prop-types", чтобы добавить его

prop-types не указан в вашем package.json как зависимость. Это довольно просто исправить, как и предполагает ошибка. Запустите npm i -S prop-types в своем терминале, чтобы добавить его в свой package.json.

7:13 error Arrow function used ambiguously with a conditional expression

Это довольно сложно исправить, не видя строку кода, из которой возникает эта ошибка. Но я предполагаю, что вы используете conditional expression в arrow function, примерно так:

const arrow = (boolean) => boolean ? true : false

Оберните свою функцию скобками, чтобы исправить эту проблему следующим образом:

const arrow = (boolean) => ( boolean ? true : false )

Или это:

const arrow = (boolean) => { return boolean ? true : false }

11:3 error Prop type массив is forbidden

Eslint хочет, чтобы вы использовали arrayOf вместо array в своем prop-types:

Что-то вроде этого: arrayOf(string)