Compare ESLint Configurations Online
Paste two ESLint configuration files. See which rules changed, what plugins were added or removed, and how settings differ.
🔒 100% private — runs entirely in your browseror try sample data
Paste two ESLint configuration files. See which rules changed, what plugins were added or removed, and how settings differ.
🔒 100% private — runs entirely in your browseror try sample data
ESLint Config Diff compares two ESLint configuration files and shows you exactly which rules changed severity, what plugins were added or removed, and how parser options and environment settings differ. Whether you are standardizing linting across projects, migrating from legacy .eslintrc to flat config, or reviewing a teammate's rule changes, this tool gives you a clear, color-coded view of every difference.
ESLint configurations grow complex quickly. Between shared configs, plugin rules, overrides, and parser options, a single project can have dozens of interacting settings. When configurations diverge across teams or repositories, inconsistencies creep in — one project enforces no-console as an error while another treats it as a warning. Comparing configs manually means scrolling through deeply nested JSON objects, which is slow and error-prone.
Paste your ESLint configuration JSON (from .eslintrc.json, .eslintrc, or the rules section of eslint.config.js). The comparison runs entirely in your browser — your configuration data is never sent to any server. The tool performs deep structural diffing, walking through nested rule arrays, plugin lists, and parser option objects to surface every change.
// Before: using recommended preset
"extends": [ "plugin:@typescript-eslint/recommended"
],
"rules": { "@typescript-eslint/no-explicit-any": "warn"
} // After: upgrading to strict preset
"extends": [ "plugin:@typescript-eslint/strict"
],
"rules": { "@typescript-eslint/no-explicit-any": "error"
} // The diff highlights the extends change and
// the severity bump from "warn" to "error".Upgrading from recommended to strict enables additional rules beyond what the diff shows. Check the TypeScript ESLint documentation for the full list of newly enabled rules.
// Before: React plugin only
"plugins": ["react", "@typescript-eslint"],
"rules": { "react/prop-types": "error", "react/react-in-jsx-scope": "error"
} // After: Adding hooks enforcement, disabling legacy rules
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": { "react/prop-types": "off", "react/react-in-jsx-scope": "off", "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"
}Disabling prop-types and react-in-jsx-scope is standard when using TypeScript and React 17+. The diff makes it clear which legacy rules were turned off and which new rules were added.
// Package A config
{ "rules": { "no-console": "warn", "no-unused-vars": "error", "semi": ["error", "always"], "quotes": ["error", "double"] }
} // Package B config
{ "rules": { "no-console": "error", "no-unused-vars": "error", "semi": ["error", "always"], "quotes": ["error", "single"] }
} // Diff reveals: no-console severity mismatch and
// quotes style disagreement (double vs single).Use the diff output to build a shared base config that all packages extend, eliminating inconsistencies across the monorepo.
ESLint accepts both numeric (0, 1, 2) and string ("off", "warn", "error") severity levels. A change from 2 to "error" is semantically identical but will show as a modification in the diff. Standardize on one format before comparing if you want to reduce noise.
The order of items in the extends array determines rule precedence — later configs override earlier ones. Reordering ["eslint:recommended", "plugin:react/recommended"] to ["plugin:react/recommended", "eslint:recommended"] can change which rules are active even though the same items are present. Disable "Ignore array order" to catch these changes.
ESLint 9+ uses a flat config format (eslint.config.js) that is structurally different from the legacy .eslintrc JSON format. The flat config uses JavaScript arrays of config objects instead of extends, plugins, and overrides. When comparing across formats, focus on the rules objects rather than the top-level structure.
Paste your ESLint configuration JSON into the two panels and click Compare. The tool highlights added, removed, and modified rules, plugins, and settings with color-coded diffs. You can paste content from .eslintrc.json, .eslintrc, or extract the configuration object from JavaScript-based config files.
You can compare the JSON structure of both formats side by side. While the overall structure differs (flat config uses arrays of config objects), the diff highlights every field-level change to help you track what rules and settings carried over during migration.
Rule severity changes are highlighted as modified values in the diff. Whether a rule changed from "error" to "warn" or from a simple string to an array with options like ["error", { "argsIgnorePattern": "^_" }], the modification is clearly visible.
Yes. The tool compares the entire JSON structure including plugins arrays, extends arrays, env settings, parserOptions, overrides, and all nested rule configurations.
Yes. This tool runs entirely in your browser using client-side JavaScript. Your ESLint configurations are never sent to any server.
Yes. Paste the config from one project in the left panel and another project in the right. The diff reveals rule inconsistencies, missing plugins, and configuration drift between projects, making it easy to standardize linting across your organization.