Smart ESLint Production Config Blueprint

Production-grade ESLint configuration setting with strict rules for code quality, security scanning, and consistent formatting.

When to Use This Setting

Apply this setting when you need to:

• Apply battle-tested ESLint rules optimized for production JavaScript and TypeScript codebases
• Enforce security-focused linting rules that catch common vulnerabilities like prototype pollution and XSS vectors
• Standardize code formatting and style across a team with opinionated, auto-fixable rule presets Consider alternatives when:
• Your project uses a different linter like Biome or Rome that replaces ESLint entirely
• You are in rapid prototyping phase where strict linting rules slow down experimental development

Quick Start

Configuration

Copy
name: smart-eslint-production-config-blueprint
type: setting
category: code-review

Example Application

Copy
claude setting:apply smart-eslint-production-config-blueprint

Example Output

Setting applied. Changes:
- eslint.config: production-strict ruleset
- extends: eslint:recommended + security + imports
- rules.no-console: error (production)
- rules.no-unused-vars: error
- security.detect-non-literal-regexp: warn

Core Concepts

Production ESLint Overview

Aspect	Details
Rule Severity	Production rules set to error level for CI enforcement, not just warnings
Security Rules	Includes eslint-plugin-security for detecting injection, prototype pollution, and eval usage
Import Rules	Enforces ordered imports, no circular dependencies, and no unresolved module paths
Console Restriction	Blocks console.log in production code, allowing console.error and console.warn only
Auto-fix Support	Most formatting and import ordering rules are auto-fixable via eslint --fix

ESLint Production Architecture

+-------------------+     +---------------------+     +-------------------+
| Source Files      |---->| ESLint Engine       |---->| Rule Evaluator    |
| .js, .ts, .tsx    |     | flat config loaded  |     | recommended +     |
|                   |     | plugin chain        |     | security + import |
+-------------------+     +---------------------+     +-------------------+
                                   |                          |
                                   v                          v
                          +---------------------+    +-------------------+
                          | Auto-fixer          |    | CI Reporter       |
                          | --fix for style     |    | error = build fail|
                          | import ordering     |    | warn = annotation |
                          +---------------------+    +-------------------+

Configuration

Parameter	Type	Default	Description
no_console	string	"error"	Severity for console.log usage; set to warn for staged migration
no_unused_vars	string	"error"	Severity for declared but unused variables
import_order	boolean	true	Enforce alphabetical import ordering with auto-fix
security_plugin	boolean	true	Enable eslint-plugin-security for vulnerability scanning
max_complexity	integer	10	Maximum cyclomatic complexity per function before error

Best Practices

1. Roll out severity levels gradually - Start with all production rules set to warn, then promote to error once the team has cleared existing violations. This prevents CI from blocking all PRs immediately after adoption.
2. Use auto-fix in pre-commit hooks - Add eslint --fix to your pre-commit hook via husky or lint-staged so formatting and import ordering corrections are applied automatically before code reaches review.
3. Customize security rules for your framework - The security plugin may flag patterns that are safe in your framework. Create override rules for framework-specific idioms like React's dangerouslySetInnerHTML where you have XSS mitigations in place.
4. Set max-complexity appropriately - A complexity threshold of 10 is a good default, but some utility functions legitimately need higher complexity. Use per-file overrides rather than raising the global limit.
5. Integrate with your IDE - Configure your editor's ESLint extension to show production rule violations in real-time. This catches issues during development rather than at commit or CI time.

Common Issues

1. Hundreds of console.log errors - The no-console rule is set to error by default. Use eslint-disable comments for legitimate debugging during development, or downgrade to warn until you clean up existing console usage.
2. Import ordering conflicts with Prettier - If you use Prettier alongside ESLint, import ordering rules can conflict. Use eslint-config-prettier to disable formatting rules that overlap with Prettier.
3. Security plugin flags false positives - Some security rules like detect-non-literal-regexp produce false positives for safe patterns. Add specific rule overrides for confirmed false positives rather than disabling the entire security plugin.