🛡️ ESLint-Config

Enterprise-grade ESLint configuration system with 27+ plugin integrations for modern JavaScript/TypeScript projects

• Description
• Features
• Installation
• Usage
• Roadmap
• FAQ
• License

ESLint-Config by ElsiKora is a comprehensive, battle-tested ESLint configuration system designed to enforce consistent code quality across enterprise JavaScript and TypeScript applications. Built with modularity at its core, it provides seamless integration with popular frameworks like React, Next.js, Vue.js, and NestJS, while supporting advanced architectural patterns like Feature-Sliced Design. The configuration system goes beyond basic linting by incorporating security scanning for secrets, internationalization enforcement, accessibility checks, and performance optimizations. With support for 27+ carefully curated plugins, it handles everything from CSS-in-JS to GraphQL, from Storybook stories to TanStack Query patterns. Whether you're building a startup MVP or maintaining a large-scale enterprise application, this configuration adapts to your needs while maintaining strict quality standards that catch bugs before they reach production.

• ✨ 🔧 Modular Architecture - Pick only what you need with 27+ optional plugins that can be enabled/disabled independently
• ✨ 🏗️ Framework Support - First-class support for React, Vue.js, Next.js, NestJS, and more with framework-specific best practices
• ✨ 🔐 Security First - Built-in secret detection prevents accidental credential exposure with customizable pattern matching
• ✨ 🌍 i18n Enforcement - Automatically detect hardcoded strings that should be internationalized in your React/Vue components
• ✨ ♿ Accessibility Checks - JSX accessibility rules ensure your applications are usable by everyone
• ✨ 🎨 Style Consistency - Prettier integration with automatic conflict resolution between formatting and linting rules
• ✨ 📁 File Organization - Enforce consistent file/folder naming conventions and architectural patterns like Feature-Sliced Design
• ✨ 🚀 Performance Rules - Catch performance anti-patterns in React hooks, TanStack Query, and other libraries
• ✨ 📝 Documentation Linting - Validate JSDoc comments, Markdown files, and ensure proper code documentation
• ✨ 🧪 Testing Support - Special configurations for Storybook, Jest, Vitest, and other testing frameworks
• ✨ 🔄 CI/CD Ready - GitHub Actions, GitLab CI, and other CI providers supported with semantic versioning
• ✨ 🛠️ Developer Experience - Extensive TypeScript support with strict type checking and intelligent auto-fixes

# Using npm
npm install --save-dev @elsikora/eslint-config eslint

# Using yarn
yarn add --dev @elsikora/eslint-config eslint

# Using pnpm
pnpm add -D @elsikora/eslint-config eslint

# Using bun
bun add -d @elsikora/eslint-config eslint

# Quick setup with all recommended plugins
npx @elsikora/eslint-config init

# Manual setup - create eslint.config.js
echo "import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withJavascript: true,
  withTypescript: true,
  withPrettier: true
});" > eslint.config.js

Create an eslint.config.js file in your project root:

import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withJavascript: true,
  withTypescript: true,
  withPrettier: true
});

import { createConfig } from '@elsikora/eslint-config';

const config = {
  ignores: ['dist', 'coverage', '.next']
};

export default [
  config,
  ...(await createConfig({
    withTypescript: true,
    withReact: true,
    withJsx: true,
    withTailwindCss: true,
    withPrettier: true,
    withSonar: true,
    withUnicorn: true
  }))
];

import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withTypescript: true,
  withReact: true,
  withNext: true,
  withNode: true,
  withTailwindCss: true,
  withI18next: true,
  withNoSecrets: true,
  withPrettier: true
});

import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withTypescript: true,
  withNest: true,
  withNode: true,
  withTypeorm: true,
  withSonar: true,
  withNoSecrets: true,
  withPrettier: true
});

import { createConfig } from '@elsikora/eslint-config';

export default await createConfig({
  withTypescript: true,
  withReact: true,
  withFsd: true,
  withPerfectionist: true,
  withCheckFile: true,
  withPrettier: true
});

import { createConfig } from '@elsikora/eslint-config';

const baseConfig = await createConfig({
  withTypescript: true,
  withReact: true
});

const customRules = {
  rules: {
    // Override specific rules
    'no-console': 'warn',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'react/prop-types': 'off'
  }
};

export default [...baseConfig, customRules];

import { createConfig } from '@elsikora/eslint-config';

const isDevelopment = process.env.NODE_ENV === 'development';

export default await createConfig({
  withTypescript: true,
  withReact: true,
  withNoSecrets: !isDevelopment, // Disable in development
  withSonar: !isDevelopment,
  withPrettier: true
});

interface ConfigOptions {
  // Language Support
  withJavascript?: boolean;      // JavaScript ES2022+ rules
  withTypescript?: boolean;      // TypeScript with type checking
  withTypescriptStrict?: boolean; // Strict TypeScript rules
  
  // Framework Support
  withReact?: boolean;           // React best practices
  withNext?: boolean;            // Next.js specific rules
  withNest?: boolean;            // NestJS decorators & patterns
  
  // Code Quality
  withSonar?: boolean;           // SonarJS code quality rules
  withUnicorn?: boolean;         // Unicorn best practices
  withPerfectionist?: boolean;   // Import/export sorting
  withRegexp?: boolean;          // RegExp optimization
  
  // Security
  withNoSecrets?: boolean;       // Detect hardcoded secrets
  
  // Styling
  withPrettier?: boolean;        // Prettier integration
  withStylistic?: boolean;       // Code style rules
  withTailwindCss?: boolean;     // TailwindCSS class sorting
  
  // Architecture
  withFsd?: boolean;             // Feature-Sliced Design
  withCheckFile?: boolean;       // File naming conventions
  
  // Documentation
  withJsDoc?: boolean;           // JSDoc validation
  withMarkdown?: boolean;        // Markdown linting
  
  // Testing
  withStorybook?: boolean;       // Storybook best practices
  
  // Other
  withNode?: boolean;            // Node.js environment
  withI18next?: boolean;         // i18n enforcement
  withJson?: boolean;            // JSON file linting
  withYaml?: boolean;            // YAML file linting
  withPackageJson?: boolean;     // package.json sorting
  withTanstack?: boolean;        // TanStack Query/Router
  withTypeorm?: boolean;         // TypeORM entities
  withJsx?: boolean;             // JSX accessibility
  withCss?: boolean;             // CSS file linting
}

# Run linting
eslint .

# Auto-fix issues
eslint . --fix

# Lint specific files
eslint "src/**/*.{js,ts,jsx,tsx}"

# Show only errors (no warnings)
eslint . --quiet

# Output results as JSON
eslint . --format json -o eslint-report.json

# Check if files are ignored
eslint . --debug

Add to .vscode/settings.json:

{
  "eslint.experimental.useFlatConfig": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "jsonc",
    "yaml",
    "markdown"
  ]
}

1. Go to Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
2. Select "Automatic ESLint configuration"
3. Check "Run eslint --fix on save"

ESLint flat config (eslint.config.js) is the future of ESLint configuration. It provides better performance through lazy loading, improved TypeScript support with full type checking, and more explicit configuration that's easier to debug. All new ESLint features are being developed exclusively for flat config.

First, install this package and create a new eslint.config.js file. Start with a minimal configuration and gradually enable features that match your existing setup. You can run both configurations side-by-side during migration by using different file patterns. The modular nature of this config makes migration straightforward.

This configuration system supports 27+ different plugins, but you only install what you actually use. Each plugin is marked as an optional peer dependency, so npm/yarn/pnpm will only prompt you to install the ones you've enabled in your configuration. This keeps your node_modules lean while providing maximum flexibility.

Simply enable withPrettier: true in your configuration. This automatically includes eslint-config-prettier which disables all ESLint rules that would conflict with Prettier formatting. You should run Prettier first, then ESLint, which is typically handled by your IDE or git hooks.

Yes! For Next.js, use withNext: true which includes all Next.js specific rules. For Create React App, you'll need to eject or use a tool like CRACO to customize the ESLint configuration, as CRA doesn't support flat config natively yet.

The withNoSecrets option enables pattern matching for common secret formats (API keys, passwords, tokens) and high-entropy string detection. It scans your code for patterns like apiKey = 'abc123' and strings that look like tokens. You can customize the patterns and sensitivity in the configuration.

FSD is an architectural pattern for frontend applications that enforces strict boundaries between features, shared code, and different layers of your application. When you enable withFsd: true, the linter ensures imports follow FSD rules, preventing architectural violations.

Run ESLint with the --debug flag to see which config files and rules are being loaded. You can also use --print-config path/to/file.js to see the exact configuration being applied to a specific file. Each rule error includes the rule name, making it easy to disable or modify specific rules.

Absolutely! Create a root eslint.config.js that uses createConfig() with your base settings, then extend it in each package with additional package-specific rules. The flat config system makes monorepo setups much cleaner than the old cascade configuration.

Yes, the flat config system with lazy loading means only the necessary plugins are loaded when needed. The configuration also excludes common directories like node_modules, dist, and coverage by default. For very large codebases, you can further optimize by limiting the file patterns each plugin processes.

This project is licensed under **MIT License

Copyright (c) 2025 ElsiKora

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.**.