7

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?

Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
  • 1
    I did find this change to the expression works: ```getOptionSelected={option => (option instanceof 'string' && option) || option.description }``` – Phil Lucks Dec 08 '21 at 20:44
  • Hey, did you ever find a solution to this problem? Running into the same issue and I don't want to turn off prettier. For the moment I am disabling the rule inline like `// eslint-disable-next-line implicit-arrow-linebreak` which I've only had to do one time in my codebase. Another solution that I am doing is breaking up my code so that it isn't as long and it fits but this is annoying – Juan Hurtado May 23 '22 at 22:26
  • no solution found as far as I remember...either turning off the rule or disabling for a specific line like you did since it's the "exception" – Phil Lucks May 27 '22 at 14:40

1 Answers1

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.

Garrett
  • 4,007
  • 2
  • 41
  • 59