ESLint `no-confusing-arrow` "--fix" formatting conflict on save, with Prettier?

Question

There seem to be a few rules where my config letting system know to use ESLint doesn't always work. I have "auto format" on save enabled in VSCode.

For example this has an ESLint error of no-confusing-arrow:

getOptionSelected={option =>
   typeof option === 'string' ? option : option.description
}

if I run eslint --fix it updates to wrap parens around as expression:

getOptionSelected={option =>
   (typeof option === 'string' ? option : option.description)
}

However, if I save, it undoes the change and goes back to error.

My ESLint is as follows:

{
  "root": true,
  "parser": "@babel/eslint-parser",
  "extends": [
    "plugin:prettier/recommended",
    "plugin:jest/recommended",
    "plugin:testing-library/react",
    "airbnb",
    "eslint:recommended",
    "next"
  ],
  "plugins": ["prettier", "simple-import-sort"],
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "alias": {
        "map": [["@", "./"]],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "arrow-parens": "off",
    "camelcase": "error",
    "comma-dangle": "off",
    "consistent-return": "off",
    "function-paren-newline": "off",
    "implicit-arrow-linebreak": "off",
    "indent": "off",
    "jsx-a11y/alt-text": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-noninteractive-element-interactions": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "no-restricted-globals": "off",
    "no-return-assign": "off",
    "no-console": ["error", { "allow": ["warn", "error", "dir", "debug"] }],
    "no-unused-vars": "error",
    "object-curly-newline": "off",
    "operator-linebreak": "off",
    "prefer-arrow-callback": "error",

    // Jest
    "jest/expect-expect":"error",

    // React
    "react/destructuring-assignment": "error",
    "react/forbid-prop-types": "off",
    "react/jsx-curly-newline": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/jsx-wrap-multilines": "off",
    "react/no-array-index-key": "warn",
    "react/require-default-props": "warn",
    // "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",

    // Sorting autofix overrides
    "import/order": "off",
    "sort-imports": "off",
    "import/extensions": "off",
    "import/prefer-default-export": "off",
    "import/no-named-as-default": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
  },
}

Prettierrc:

module.exports = {
  bracketSpacing: true,
  printWidth: 80,
  singleQuote: true,
  trailingComma: 'es5',
  arrowParens: 'avoid',
};

As you can see I include prettier to display prettier errors as ESLint errors.

What could be toggling the parens off on save?

EDIT: I tried looking into other ESLint rules like no-extra-parens, without success

EDIT 2: I disabled Prettier in my VSCode and the save is correctly persisted, so it seems like a verified conflict with Prettier. What setting can I change to keep Prettier on without this conflict?

Answer 1

According to this answer, you ought to just disable no-confusing-arrow, since the benefit of that rule is already captured by Prettier's formatting, making it redundant.