How to Fix `prefer-const` Violations Using the Airbnb JavaScript Style Guide

Run ESLint with the --fix flag to automatically convert let and var declarations to const where variables are never reassigned, or manually update declarations flagged by the rule configured in packages/eslint-config-airbnb-base/rules/es6.js.

The Airbnb JavaScript Style Guide enforces the prefer-const ESLint rule to ensure immutable bindings are declared with const rather than let or var. Fixing these violations in existing code improves readability and prevents accidental reassignments. This guide shows you how to locate and resolve these warnings using the exact configuration defined in the Airbnb base rules.

Understand the Airbnb prefer-const Configuration

Airbnb ships the prefer-const rule in packages/eslint-config-airbnb-base/rules/es6.js with strict settings designed to catch unnecessary mutable declarations:

'prefer-const': ['error', {
  destructuring: 'any',
  ignoreReadBeforeAssign: true,
}],

The destructuring: 'any' option ensures the rule applies to variables created via destructuring patterns, flagging let { name } = user when name is never reassigned. The ignoreReadBeforeAssign: true setting prevents false positives for variables that are read before their first assignment (a relaxation introduced in v4.0.0 according to the CHANGELOG.md), allowing patterns like:

let x;
if (condition) {
  x = compute();
}
use(x);

Locate Violations in Your Codebase

To find all prefer-const violations across your project, run ESLint with the Airbnb configuration:

npx eslint . --ext .js,.jsx --config node_modules/eslint-config-airbnb-base

Violations appear in the output as:

/path/to/file.js:10:7  Unexpected let, use const instead  prefer-const

Manual Fix Strategies

Convert Simple Variable Declarations

Replace let or var with const when the identifier is never reassigned after initialization:

// Before
let url = 'https://api.example.com';
fetch(url);

// After
const url = 'https://api.example.com';
fetch(url);

Note that mutating the contents of an object or array declared with const is still permitted; only reassignment of the binding is blocked.

Fix Destructuring Assignments

Because of the destructuring: 'any' setting, you must apply the same logic to destructured bindings:

// Before
let { width, height } = dimensions;

// After
const { width, height } = dimensions;

Preserve let for Legitimate Mutability

Keep let for variables that are intentionally reassigned, such as loop counters:

// Correct - loop counters are reassigned
for (let i = 0; i < items.length; i++) {
  process(items[i]);
}

Automate Fixes with ESLint

For bulk remediation, use ESLint’s auto-fix capability:

npx eslint . --ext .js,.jsx --fix --config node_modules/eslint-config-airbnb-base

The --fix flag safely rewrites eligible let and var declarations to const without changing program logic. Always review the resulting diff to ensure no intentional mutability was accidentally removed.

Handle Exceptions and Edge Cases

If a specific line requires intentional mutability that ESLint cannot detect, disable the rule locally:

/* eslint-disable-next-line prefer-const */
let legacyCounter = 0;

Avoid modifying the shared Airbnb configuration unless absolutely necessary; instead, override in your project’s .eslintrc or use inline comments for rare exceptions.

Enforce Compliance in CI/CD

Prevent regressions by adding the lint check to your continuous integration pipeline:

- name: Lint code
  run: npx eslint . --ext .js,.jsx --max-warnings=0

Setting --max-warnings=0 ensures that prefer-const violations fail the build.

Summary

• Run npx eslint with Airbnb’s config to identify all prefer-const violations in packages/eslint-config-airbnb-base/rules/es6.js
• Convert let and var to const when variables are never reassigned, respecting the destructuring: 'any' option
• Use eslint --fix for automatic bulk conversion, then manually review the changes
• Preserve let for legitimate mutable state like loop counters and accumulators
• Integrate lint checks into CI with --max-warnings=0 to prevent future violations

Frequently Asked Questions

What does the ignoreReadBeforeAssign option do in Airbnb’s prefer-const config?

The ignoreReadBeforeAssign: true setting, as implemented in packages/eslint-config-airbnb-base/rules/es6.js, prevents the rule from flagging variables that are referenced before their first assignment. This allows safe initialization patterns where a variable is declared at the top of a scope but assigned conditionally later, avoiding false positives while still enforcing const for truly immutable bindings.

Should I use const for for...of loop variables in Airbnb style?

Yes, use const for for...of and for...in loops because the loop variable is rebound on each iteration rather than reassigned. However, use let for traditional for loops with increment counters (e.g., for (let i = 0; i < n; i++)) because the counter variable i is reassigned during the loop execution.

How do I disable prefer-const for a single line in Airbnb projects?

Add an ESLint disable comment immediately before the line: /* eslint-disable-next-line prefer-const */ or // eslint-disable-next-line prefer-const. Use this sparingly and only when the mutability is intentional and clearly justified, as the Airbnb style guide strongly discourages unnecessary mutable references.

Does Airbnb’s prefer-const rule apply to destructured variables?

Yes, the rule applies to destructured variables due to the destructuring: 'any' configuration in packages/eslint-config-airbnb-base/rules/es6.js. This means that even if only one binding in a destructuring pattern is reassigned, the rule will flag the others that remain constant, requiring you to either use const for the immutable bindings or restructure the code to separate mutable from immutable declarations.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}