Expected parentheses around arrow function argument arrow-parens

# Table of Contents

1. Expected parentheses around arrow function argument arrow-parens
2. Only using parentheses when they are required
3. Disabling the arrow-parens ESLint rule

# Expected parentheses around arrow function argument arrow-parens

The ESLint warning "Expected parentheses around arrow function argument. (arrow-parens)" is shown when you don't wrap an arrow function argument in parentheses.

To resolve the issue, wrap the argument in parentheses or update your ESLint config.

Here is an example of when the warning is shown.

Copied!
// ⛔️ Expected parentheses around arrow function argument. (arrow-parens)
const increment = num => {
  return num + 1;
};

When an arrow function has a single parameter, you aren't syntactically required to wrap the parameter in parentheses.

However, if you want to enforce this, leave the rule as is and wrap the parameter.

Copied!
// ✅ No ESLint warnings
const increment = (num) => {
  return num + 1;
};

If you write your code in TypeScript, you have to wrap the parameter in parentheses to specify the type.

Copied!
const increment = (num: number) => {
  return num + 1;
};

If your function takes two or more parameters, they also have to be wrapped in parentheses.

Copied!
const sum = (a, b) => {
  return a + b;
};

However, you can also configure the rule to discourage the use of parentheses when they are not required.

For example, syntactically, the following two arrow functions are equivalent.

Copied!
// ✅ Functions are equivalent
const funcA = x => x + 1

const funcB = (x) => x + 1

However, if your function takes two or more parameters, you are required to wrap them in parentheses.

Copied!
// ✅ Works
const funcA = (a, b) => {
  return a + b;
};

// ⛔️ Error (multiple arguments not wrapped in parentheses)
const funcA = a, b => {
  return a + b;
};

# Only using parentheses when they are required

By default, the arrow-parens rule is set to always require parentheses around arguments.

However, you can set the value of the rule to as-needed to enforce that parentheses should only be used when needed.

Open your .eslintrc.js file and make the following change.

Copied!
module.exports = {
    rules: {
      'arrow-parens': ["error", "as-needed"]
    },
};

The following code causes no warnings when the arrow-parens rule is set to as-needed.

Copied!
// ✅ No warnings
const greet = name => {
  return `hello ${name}`;
};

The as-needed rule enforces that no parentheses should be used where they can be omitted.

If you use a .eslintrc or .eslintrc.json file, make sure to double-quote the properties and values.

Copied!
{
  "rules": {
     "arrow-parens": ["error", "as-needed"]
  }
}

# Disabling the arrow-parens ESLint rule

If you simply want to disable the arrow-parens ESLint rule, edit your .eslintrc.js file as follows.

Copied!
module.exports = {
    rules: {
      'arrow-parens': 'off'
    },
};

If you use a .eslintrc or .eslintrc.json file, make sure to double-quote the properties and values.

Copied!
{
  "rules": {
     "arrow-parens": "off"
  }
}

After you disable the rule, you won't get any ESLint warnings or errors as it relates to wrapping function parameters in parentheses.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• [eslint] Delete CR eslint(prettier/prettier) issue
• React ESLint Error: X is missing in props validation
• eslint is not recognized as an internal or external command
• Plugin "react" was conflicted between package.json » eslint-config-react-app
• React: Unexpected use of 'X' no-restricted-globals in ESLint
• TypeScript ESLint: Unsafe assignment of an any value [Fix]