eslint-plugin-immutable

1.0.0 verified Sat Apr 25 auth: no javascript

This ESLint plugin enforces immutability in JavaScript by providing three rules: no-let (forces use of const instead of let/var), no-this (disallows this in favor of functional components), and no-mutation (prevents assignment to member expressions, blocking object mutation even with const). Version 1.0.0 is stable. It integrates with Redux+React workflows, using Babel's object-rest-spread plugin for immutable updates. Differentiates from general eslint rules by specifically targeting Redux/React patterns, with no runtime cost compared to Object.freeze().

Common errors

error ESLint: Unexpected let or var, use const. (immutable/no-let) ↓

cause Using let or var declaration in code.

fix

Replace 'let' with 'const' or refactor to use array methods.

error ESLint: No object mutation allowed. (immutable/no-mutation) ↓

cause Assigning a value to a property of an object.

fix

Use object spread: const newObj = { ...oldObj, prop: newValue };

error ESLint: No this allowed. (immutable/no-this) ↓

cause Using 'this' in a React component class or other context.

fix

Convert to a stateless functional component using props parameter.

Warnings

gotcha Disabling 'no-this' rule may still allow 'this' in arrow functions if used in class contexts. ↓

fix Use only functional components and avoid classes entirely.

gotcha The 'no-mutation' rule does not prevent array mutations via methods like push, splice, or sort. It only blocks member expression assignment (e.g., obj.prop = value). ↓

fix Supplement with eslint-plugin-immutable's no-array-mutation rule or use array spread/immutable library.

gotcha The 'no-let' rule does not cover for-in loops where 'let' is implicit? Actually for-in with 'let' is caught, but for-of loops still require 'let' for iteration variable, which will be flagged. Use forEach or map instead. ↓

fix Replace for-loops with array methods like map, filter, reduce, or forEach.

Install

npm install eslint-plugin-immutable

yarn add eslint-plugin-immutable

pnpm add eslint-plugin-immutable

Imports

no-let

wrong

"rules": { "no-let": 2 }

correct

/* ESLint config: */
"rules": { "immutable/no-let": 2 }

Must prefix with 'immutable/' in ESLint rules.

no-this

wrong

"rules": { "no-this": 2 }

correct

/* ESLint config: */
"rules": { "immutable/no-this": 2 }

Must prefix with 'immutable/' in ESLint rules.

no-mutation

wrong

"rules": { "no-mutation": 2 }

correct

/* ESLint config: */
"rules": { "immutable/no-mutation": 2 }

Must prefix with 'immutable/' in ESLint rules.

Quickstart

Shows installation, configuration, and examples of code that violates each rule.

// Install
npm install eslint-plugin-immutable --save-dev

// .eslintrc.json
{
  "plugins": ["immutable"],
  "rules": {
    "immutable/no-let": 2,
    "immutable/no-this": 2,
    "immutable/no-mutation": 2
  }
}

// Example file: index.js
const add = (a, b) => a + b; // Works
let x = 5; // Error: Unexpected let or var, use const
class MyComponent extends React.Component { // Error: no this allowed
  render() {
    return <div>{this.props.message}</div>; // Error: no this allowed
  }
}
const point = { x: 1 };
point.x = 2; // Error: No object mutation allowed