🛡️ ESLint-Config

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

📚 Table of Contents

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

📖 Description

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.

🚀 Features

• ✨ 🔧 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

🛠 Installation

1# Using npm
2npm install --save-dev @elsikora/eslint-config eslint
3
4# Using yarn
5yarn add --dev @elsikora/eslint-config eslint
6
7# Using pnpm
8pnpm add -D @elsikora/eslint-config eslint
9
10# Using bun
11bun add -d @elsikora/eslint-config eslint
12
13# Quick setup with all recommended plugins
14npx @elsikora/eslint-config init
15
16# Manual setup - create eslint.config.js
17echo "import { createConfig } from '@elsikora/eslint-config';
18
19export default await createConfig({
20  withJavascript: true,
21  withTypescript: true,
22  withPrettier: true
23});" > eslint.config.js

💡 Usage

🚀 Basic Usage

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

1import { createConfig } from '@elsikora/eslint-config';
2
3export default await createConfig({
4  withJavascript: true,
5  withTypescript: true,
6  withPrettier: true
7});

📋 Configuration Examples

React + TypeScript Project

1import { createConfig } from '@elsikora/eslint-config';
2
3const config = {
4  ignores: ['dist', 'coverage', '.next']
5};
6
7export default [
8  config,
9  ...(await createConfig({
10    withTypescript: true,
11    withReact: true,
12    withJsx: true,
13    withTailwindCss: true,
14    withPrettier: true,
15    withSonar: true,
16    withUnicorn: true
17  }))
18];

Next.js Full-Stack Application

1import { createConfig } from '@elsikora/eslint-config';
2
3export default await createConfig({
4  withTypescript: true,
5  withReact: true,
6  withNext: true,
7  withNode: true,
8  withTailwindCss: true,
9  withI18next: true,
10  withNoSecrets: true,
11  withPrettier: true
12});

NestJS Backend API

1import { createConfig } from '@elsikora/eslint-config';
2
3export default await createConfig({
4  withTypescript: true,
5  withNest: true,
6  withNode: true,
7  withTypeorm: true,
8  withSonar: true,
9  withNoSecrets: true,
10  withPrettier: true
11});

Feature-Sliced Design Architecture

1import { createConfig } from '@elsikora/eslint-config';
2
3export default await createConfig({
4  withTypescript: true,
5  withReact: true,
6  withFsd: true,
7  withPerfectionist: true,
8  withCheckFile: true,
9  withPrettier: true
10});

🔧 Advanced Configuration

Custom Rule Overrides

1import { createConfig } from '@elsikora/eslint-config';
2
3const baseConfig = await createConfig({
4  withTypescript: true,
5  withReact: true
6});
7
8const customRules = {
9  rules: {
10    // Override specific rules
11    'no-console': 'warn',
12    '@typescript-eslint/explicit-function-return-type': 'off',
13    'react/prop-types': 'off'
14  }
15};
16
17export default [...baseConfig, customRules];

Environment-Specific Configuration

1import { createConfig } from '@elsikora/eslint-config';
2
3const isDevelopment = process.env.NODE_ENV === 'development';
4
5export default await createConfig({
6  withTypescript: true,
7  withReact: true,
8  withNoSecrets: !isDevelopment, // Disable in development
9  withSonar: !isDevelopment,
10  withPrettier: true
11});

📝 Configuration Options Reference

1interface ConfigOptions {
2  // Language Support
3  withJavascript?: boolean;      // JavaScript ES2022+ rules
4  withTypescript?: boolean;      // TypeScript with type checking
5  withTypescriptStrict?: boolean; // Strict TypeScript rules
6  
7  // Framework Support
8  withReact?: boolean;           // React best practices
9  withNext?: boolean;            // Next.js specific rules
10  withNest?: boolean;            // NestJS decorators & patterns
11  
12  // Code Quality
13  withSonar?: boolean;           // SonarJS code quality rules
14  withUnicorn?: boolean;         // Unicorn best practices
15  withPerfectionist?: boolean;   // Import/export sorting
16  withRegexp?: boolean;          // RegExp optimization
17  
18  // Security
19  withNoSecrets?: boolean;       // Detect hardcoded secrets
20  
21  // Styling
22  withPrettier?: boolean;        // Prettier integration
23  withStylistic?: boolean;       // Code style rules
24  withTailwindCss?: boolean;     // TailwindCSS class sorting
25  
26  // Architecture
27  withFsd?: boolean;             // Feature-Sliced Design
28  withCheckFile?: boolean;       // File naming conventions
29  
30  // Documentation
31  withJsDoc?: boolean;           // JSDoc validation
32  withMarkdown?: boolean;        // Markdown linting
33  
34  // Testing
35  withStorybook?: boolean;       // Storybook best practices
36  
37  // Other
38  withNode?: boolean;            // Node.js environment
39  withI18next?: boolean;         // i18n enforcement
40  withJson?: boolean;            // JSON file linting
41  withYaml?: boolean;            // YAML file linting
42  withPackageJson?: boolean;     // package.json sorting
43  withTanstack?: boolean;        // TanStack Query/Router
44  withTypeorm?: boolean;         // TypeORM entities
45  withJsx?: boolean;             // JSX accessibility
46  withCss?: boolean;             // CSS file linting
47}

🎯 CLI Commands

1# Run linting
2eslint .
3
4# Auto-fix issues
5eslint . --fix
6
7# Lint specific files
8eslint "src/**/*.{js,ts,jsx,tsx}"
9
10# Show only errors (no warnings)
11eslint . --quiet
12
13# Output results as JSON
14eslint . --format json -o eslint-report.json
15
16# Check if files are ignored
17eslint . --debug

🔌 IDE Integration

VS Code

Add to .vscode/settings.json:

1{
2  "eslint.experimental.useFlatConfig": true,
3  "editor.codeActionsOnSave": {
4    "source.fixAll.eslint": true
5  },
6  "eslint.validate": [
7    "javascript",
8    "javascriptreact",
9    "typescript",
10    "typescriptreact",
11    "json",
12    "jsonc",
13    "yaml",
14    "markdown"
15  ]
16}

WebStorm / IntelliJ IDEA

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

🛣 Roadmap

Task / Feature	Status
Core ESLint flat config support	✅ Done
TypeScript strict mode configuration	✅ Done
React 18+ hooks and patterns	✅ Done
Next.js 14+ App Router support	✅ Done
Vue.js 3 Composition API	🚧 In Progress
NestJS decorators and patterns	✅ Done
Feature-Sliced Design architecture	✅ Done
Secret detection with AI patterns	✅ Done
i18next translation enforcement	✅ Done
Storybook 7+ CSF3 format	✅ Done
TanStack Query v5 patterns	✅ Done
Monorepo configuration support	🚧 In Progress
Auto-fix suggestions with AI	🚧 In Progress
Visual config builder UI	🚧 In Progress
Performance profiling rules	🚧 In Progress
GraphQL schema linting	🚧 In Progress
Docker and container files	🚧 In Progress
Svelte/SvelteKit support	🚧 In Progress
Astro framework integration	🚧 In Progress
Bun runtime specific rules	🚧 In Progress

❓ FAQ

❓ Frequently Asked Questions

Why use flat config instead of .eslintrc?

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.

How do I migrate from an existing .eslintrc configuration?

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.

Why are there so many peer dependencies?

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.

How do I handle conflicts between Prettier and ESLint?

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.

Can I use this with Create React App or Next.js?

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.

How does secret detection work?

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.

What's Feature-Sliced Design (FSD)?

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.

How do I debug which rules are causing issues?

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.

Can I use this in a monorepo?

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.

Is this configuration performant for large codebases?

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.

🔒 License

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.**.