ESlint / Prettier : how do I disable a certain function parentheses parameter?

Question

I have a Nuxt3 code

I have set ESlint and Prettier, and they began forcing parentheses in arrow function bodies. NOT the arguments, NOT the operators, but function bodies.

Example :

<VInputText
 ref="legalFormTypeLabel"
 placeholder="Entrer le nom du formulaire à remplir"
 :hide-check-mark="true"
 @input="value => (legalFormName = value)"
/>

I can't find the rule for this. I extended :

• eslint:recommended
• plugin:@typescript-eslint/recommended
• plugin:vue/vue3-strongly-recommended
• @vue/eslint-config-typescript/recommended
• plugin:nuxt/recommended
• @nuxtjs/eslint-config-typescript
• prettier

Whatever I do, the parentheses come back. Does anyone have an idea ?

I tried

typescript-eslint no-extra-parens typescript-eslint func-call-spacing eslint wrap-iife eslint no-extra-parens

none seemed to work

Answer 1

In order to detect excess parentheses on vue expressions you need to use the rule vue/no-extra-parens. Vue expressions are a special case, hence the standard rules don't work on them.

However if you're using prettier to format the expressions, then you cannot use that rule at the same time because you will have an unresolvable formatting conflict - prettier will always add the parentheses back (as is the style it enforces), and the lint rule will always remove those parentheses as it deems them unnecessary. Thus you're stuck in a loop.

There are options like prettier-eslint that can let you do some limited customisation of prettier by running ESLint after prettier, however from my experience this is a lot more clunky and difficult to get right, and it can lead to some edge cases and problems.

My suggestion would be to take a step back and understand that prettier adds the parentheses to enforce consistent and clear code and remove ambiguity - x => a = x can be seen by many as a "hard to read" as you need to read the entire expression of a = x AND understand the precedence of = is lower than => (i.e. the = is part of the function body, and not a separate expression).