Skip to main content

How to Resolve the "Unary operator '++' used (no-plusplus)" ESLint Error in JavaScript

The ESLint error Unary operator '++' used (no-plusplus) is a stylistic rule that flags the use of the unary increment (++) and decrement (--) operators. While these operators are a standard part of JavaScript, this rule is often enabled in strict configurations (like Airbnb's style guide) to prevent potential bugs related to semicolon insertion and to encourage a more declarative style.

This guide will explain why the no-plusplus rule exists and walk you through the various ways to resolve this error, from refactoring your code to configuring the rule for your project.

Why Does the no-plusplus Rule Exist?​

The primary reason this rule is enforced is to avoid subtle bugs caused by Automatic Semicolon Insertion (ASI). The meaning of ++ or -- can change depending on the whitespace and newlines around it, which can lead to unexpected behavior.

Consider this code, which works as expected:

let a = 1;
let b = 2;

a++
b

// Result: a becomes 2, b remains 2

However, a simple change in line breaks can alter the logic completely:

let a = 1;
let b = 2;

a
++
b

// Result: a remains 1, b becomes 3

While this is an extreme example, it illustrates the ambiguity the no-plusplus rule is designed to prevent. Using more explicit assignments like i += 1 removes this ambiguity.

The simplest and most direct way to resolve this error is to replace the unary operators with their more explicit equivalents.

Example of code with errors:

// ⛔️ Unary operator '++' used. (no-plusplus)
for (let i = 0; i < 5; i++) {
  console.log(i);
}

let count = 0;
// ⛔️ Unary operator '++' used. (no-plusplus)
count++;

Solution: replace ++ with += 1 and -- with -= 1.

// ✅ Corrected for loop
for (let i = 0; i < 5; i += 1) {
  console.log(i);
}

let count = 0;
// ✅ Corrected increment
count += 1;
note

This is the recommended best practice as it respects the linting rule and makes your code more explicit and less prone to ASI-related bugs.

Solution 2: Configure the .eslintrc File​

If you and your team find the no-plusplus rule to be too restrictive, you can disable or modify it for your entire project in your ESLint configuration file (e.g., .eslintrc.js).

Option A: Completely Disable the Rule​

// In .eslintrc.js
module.exports = {
  // ... other ESLint config
  rules: {
    'no-plusplus': 'off',
  },
};

Option B (Recommended Compromise): Allow ++ in for Loops​

The most common and arguably least risky place to use ++ is in the final expression of a for loop. You can configure the rule to allow this specific use case.

// In .eslintrc.js
rules: {
  'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
},

This configuration will still flag i++ on its own line but will permit its use inside a for loop's update expression, which is a very popular and pragmatic compromise.

Solution 3 (For Specific Lines): Using ESLint Disable Comments​

If you want to keep the rule active but need to make an exception for a specific line, you can use an ESLint disable comment.

As solution, place a special comment on the line before the one that uses the ++ or -- operator.

let i = 0;

// eslint-disable-next-line no-plusplus
i++;
note

This should be used sparingly, as it's generally better to either refactor the code or adjust the project-wide rule.

Conclusion​

The no-plusplus ESLint rule encourages a safer and more explicit coding style by disallowing the ++ and -- operators.

  • The recommended solution is to refactor your code by replacing i++ with the more explicit i += 1.
  • A very good project-level compromise is to modify the rule in your .eslintrc.js file to allow the operator in for loops: ['error', { allowForLoopAfterthoughts: true }].
  • For rare exceptions, you can use an inline disable comment: // eslint-disable-next-line no-plusplus.

Table of Contents