Remove `no-confusing-arrow` because of the deprecation of formatting rules

[ybiquitous]

Which issue, if any, is this issue related to?

None.

Is there anything in the PR that needs further explanation?

First, this rule was deprecated in ESLint v8.53.0. The alternative is the third-party plugin @stylistic/eslint-plugin-js.

Second, I sometimes feel annoyed by this rule. For example, see:

const result = () => (type === 'foo' ? foo() : bar());
/*             ^^ Arrow function used ambiguously with a conditional expression [no-confusing-arrow] */

In this case, I think it's readable enough, thanks to () around the function body. So, I think this rule is no longer necessary for this shared config.

Ref:

• https://eslint.org/docs/latest/rules/no-confusing-arrow
• https://eslint.org/blog/2023/10/deprecating-formatting-rules
• https://eslint.style/packages/js

[!NOTE] This rule was added in #74.

[Mouvedia]

My problem is that it conflicts with prettier.

thanks to () around the function body

There's an option for that: { "allowParens": true }

[ybiquitous]

@Mouvedia Can you tell me how to reproduce the conflict with Prettier?

[Mouvedia]

Try

            const fix = () =>
                (messageType === 'expected' ? fontFamilyNode.addQuotes() : fontFamilyNode.removeQuotes());

It will be reformatted.

[ybiquitous]

@Mouvedia Sorry, I didn't understand what you meant. The example code you posted is a problem of Prettier, not no-confusing-arrow, right?

[Mouvedia]

If you were using { "allowParens": true } instead of removing the rule then it would conflict with prettier because prettier removes the parentheses. If you remove the rule, it's irrelevant.

[ybiquitous]

Ah, I now understand. Assuming the following example:

/*eslint-disable no-unused-vars, no-undef*/

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

const fix = () =>
    (messageType === 'expected' ? fontFamilyNode.addQuotes() : fontFamilyNode.removeQuotes());

Prettier removes (...) from the arrow function body:

const fix = () =>
-   (messageType === 'expected' ? fontFamilyNode.addQuotes() : fontFamilyNode.removeQuotes());
+   messageType === 'expected' ? fontFamilyNode.addQuotes() : fontFamilyNode.removeQuotes();

Then, ESLint emits an error:

const fix = () =>
/*          ^^ Arrow function used ambiguously with a conditional expression */
    messageType === 'expected' ? fontFamilyNode.addQuotes() : fontFamilyNode.removeQuotes();

By the way, if an arrow function is within a single line, Prettier doesn't format the code:

const fix2 = () => (type === 'expected' ? addQuotes() : removeQuotes());

In summary, I think removing no-confusing-arrow is better to prevent any confusion.

[Mouvedia]

By the way, if an arrow function is within a single line, Prettier doesn't format the code

Good to know.