\n\n## ๐ Table of Contents\n\n- [Description](#-description)\n- [Features](#-features)\n- [Installation](#-installation)\n- [Usage](#-usage)\n- [Roadmap](#-roadmap)\n- [FAQ](#-faq)\n- [License](#-license)\n\n## ๐ Description\n\nESLint-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.\n\n## ๐ Features\n\n- โจ **๐ง **Modular Architecture** - Pick only what you need with 27+ optional plugins that can be enabled/disabled independently**\n- โจ **๐๏ธ **Framework Support** - First-class support for React, Vue.js, Next.js, NestJS, and more with framework-specific best practices**\n- โจ **๐ **Security First** - Built-in secret detection prevents accidental credential exposure with customizable pattern matching**\n- โจ **๐ **i18n Enforcement** - Automatically detect hardcoded strings that should be internationalized in your React/Vue components**\n- โจ **โฟ **Accessibility Checks** - JSX accessibility rules ensure your applications are usable by everyone**\n- โจ **๐จ **Style Consistency** - Prettier integration with automatic conflict resolution between formatting and linting rules**\n- โจ **๐ **File Organization** - Enforce consistent file/folder naming conventions and architectural patterns like Feature-Sliced Design**\n- โจ **๐ **Performance Rules** - Catch performance anti-patterns in React hooks, TanStack Query, and other libraries**\n- โจ **๐ **Documentation Linting** - Validate JSDoc comments, Markdown files, and ensure proper code documentation**\n- โจ **๐งช **Testing Support** - Special configurations for Storybook, Jest, Vitest, and other testing frameworks**\n- โจ **๐ **CI/CD Ready** - GitHub Actions, GitLab CI, and other CI providers supported with semantic versioning**\n- โจ **๐ ๏ธ **Developer Experience** - Extensive TypeScript support with strict type checking and intelligent auto-fixes**\n\n## ๐ Installation\n\n```bash\n# Using npm\nnpm install --save-dev @elsikora/eslint-config eslint\n\n# Using yarn\nyarn add --dev @elsikora/eslint-config eslint\n\n# Using pnpm\npnpm add -D @elsikora/eslint-config eslint\n\n# Using bun\nbun add -d @elsikora/eslint-config eslint\n\n# Quick setup with all recommended plugins\nnpx @elsikora/eslint-config init\n\n# Manual setup - create eslint.config.js\necho \"import { createConfig } from '@elsikora/eslint-config';\n\nexport default await createConfig({\n withJavascript: true,\n withTypescript: true,\n withPrettier: true\n});\" > eslint.config.js\n```\n\n## ๐ก Usage\n\n## ๐ Basic Usage\n\nCreate an `eslint.config.js` file in your project root:\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nexport default await createConfig({\n\twithJavascript: true,\n\twithTypescript: true,\n\twithPrettier: true,\n});\n```\n\n## ๐ Configuration Examples\n\n### React + TypeScript Project\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nconst config = {\n\tignores: [\"dist\", \"coverage\", \".next\"],\n};\n\nexport default [\n\tconfig,\n\t...(await createConfig({\n\t\twithTypescript: true,\n\t\twithReact: true,\n\t\twithJsx: true,\n\t\twithTailwindCss: true,\n\t\twithPrettier: true,\n\t\twithSonar: true,\n\t\twithUnicorn: true,\n\t})),\n];\n```\n\n### Next.js Full-Stack Application\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nexport default await createConfig({\n\twithTypescript: true,\n\twithReact: true,\n\twithNext: true,\n\twithNode: true,\n\twithTailwindCss: true,\n\twithI18next: true,\n\twithNoSecrets: true,\n\twithPrettier: true,\n});\n```\n\n### NestJS Backend API\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nexport default await createConfig({\n\twithTypescript: true,\n\twithNest: true,\n\twithNode: true,\n\twithTypeorm: true,\n\twithSonar: true,\n\twithNoSecrets: true,\n\twithPrettier: true,\n});\n```\n\n### Feature-Sliced Design Architecture\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nexport default await createConfig({\n\twithTypescript: true,\n\twithReact: true,\n\twithFsd: true,\n\twithPerfectionist: true,\n\twithCheckFile: true,\n\twithPrettier: true,\n});\n```\n\n## ๐ง Advanced Configuration\n\n### Custom Rule Overrides\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nconst baseConfig = await createConfig({\n\twithTypescript: true,\n\twithReact: true,\n});\n\nconst customRules = {\n\trules: {\n\t\t// Override specific rules\n\t\t\"no-console\": \"warn\",\n\t\t\"@typescript-eslint/explicit-function-return-type\": \"off\",\n\t\t\"react/prop-types\": \"off\",\n\t},\n};\n\nexport default [...baseConfig, customRules];\n```\n\n### Environment-Specific Configuration\n\n```javascript\nimport { createConfig } from \"@elsikora/eslint-config\";\n\nconst isDevelopment = process.env.NODE_ENV === \"development\";\n\nexport default await createConfig({\n\twithTypescript: true,\n\twithReact: true,\n\twithNoSecrets: !isDevelopment, // Disable in development\n\twithSonar: !isDevelopment,\n\twithPrettier: true,\n});\n```\n\n## ๐ Configuration Options Reference\n\n```typescript\ninterface ConfigOptions {\n\t// Language Support\n\twithJavascript?: boolean; // JavaScript ES2022+ rules\n\twithTypescript?: boolean; // TypeScript with type checking\n\twithTypescriptStrict?: boolean; // Strict TypeScript rules\n\n\t// Framework Support\n\twithReact?: boolean; // React best practices\n\twithNext?: boolean; // Next.js specific rules\n\twithNest?: boolean; // NestJS decorators & patterns\n\n\t// Code Quality\n\twithSonar?: boolean; // SonarJS code quality rules\n\twithUnicorn?: boolean; // Unicorn best practices\n\twithPerfectionist?: boolean; // Import/export sorting\n\twithRegexp?: boolean; // RegExp optimization\n\n\t// Security\n\twithNoSecrets?: boolean; // Detect hardcoded secrets\n\n\t// Styling\n\twithPrettier?: boolean; // Prettier integration\n\twithStylistic?: boolean; // Code style rules\n\twithTailwindCss?: boolean; // TailwindCSS class sorting\n\n\t// Architecture\n\twithFsd?: boolean; // Feature-Sliced Design\n\twithCheckFile?: boolean; // File naming conventions\n\n\t// Documentation\n\twithJsDoc?: boolean; // JSDoc validation\n\twithMarkdown?: boolean; // Markdown linting\n\n\t// Testing\n\twithStorybook?: boolean; // Storybook best practices\n\n\t// Other\n\twithNode?: boolean; // Node.js environment\n\twithI18next?: boolean; // i18n enforcement\n\twithJson?: boolean; // JSON file linting\n\twithYaml?: boolean; // YAML file linting\n\twithPackageJson?: boolean; // package.json sorting\n\twithTanstack?: boolean; // TanStack Query/Router\n\twithTypeorm?: boolean; // TypeORM entities\n\twithJsx?: boolean; // JSX accessibility\n\twithCss?: boolean; // CSS file linting\n}\n```\n\n## ๐ฏ CLI Commands\n\n```bash\n# Run linting\neslint .\n\n# Auto-fix issues\neslint . --fix\n\n# Lint specific files\neslint \"src/**/*.{js,ts,jsx,tsx}\"\n\n# Show only errors (no warnings)\neslint . --quiet\n\n# Output results as JSON\neslint . --format json -o eslint-report.json\n\n# Check if files are ignored\neslint . --debug\n```\n\n## ๐ IDE Integration\n\n### VS Code\n\nAdd to `.vscode/settings.json`:\n\n```json\n{\n\t\"eslint.experimental.useFlatConfig\": true,\n\t\"editor.codeActionsOnSave\": {\n\t\t\"source.fixAll.eslint\": true\n\t},\n\t\"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"typescriptreact\", \"json\", \"jsonc\", \"yaml\", \"markdown\"]\n}\n```\n\n### WebStorm / IntelliJ IDEA\n\n1. Go to Settings โ Languages & Frameworks โ JavaScript โ Code Quality Tools โ ESLint\n2. Select \"Automatic ESLint configuration\"\n3. Check \"Run eslint --fix on save\"\n\n## ๐ฃ Roadmap\n\n| Task / Feature | Status |\n| ------------------------------------ | -------------- |\n| Core ESLint flat config support | โ Done |\n| TypeScript strict mode configuration | โ Done |\n| React 18+ hooks and patterns | โ Done |\n| Next.js 14+ App Router support | โ Done |\n| Vue.js 3 Composition API | ๐ง In Progress |\n| NestJS decorators and patterns | โ Done |\n| Feature-Sliced Design architecture | โ Done |\n| Secret detection with AI patterns | โ Done |\n| i18next translation enforcement | โ Done |\n| Storybook 7+ CSF3 format | โ Done |\n| TanStack Query v5 patterns | โ Done |\n| Monorepo configuration support | ๐ง In Progress |\n| Auto-fix suggestions with AI | ๐ง In Progress |\n| Visual config builder UI | ๐ง In Progress |\n| Performance profiling rules | ๐ง In Progress |\n| GraphQL schema linting | ๐ง In Progress |\n| Docker and container files | ๐ง In Progress |\n| Svelte/SvelteKit support | ๐ง In Progress |\n| Astro framework integration | ๐ง In Progress |\n| Bun runtime specific rules | ๐ง In Progress |\n\n## โ FAQ\n\n## โ Frequently Asked Questions\n\n### Why use flat config instead of .eslintrc?\n\nESLint 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.\n\n### How do I migrate from an existing .eslintrc configuration?\n\nFirst, 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.\n\n### Why are there so many peer dependencies?\n\nThis 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.\n\n### How do I handle conflicts between Prettier and ESLint?\n\nSimply 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.\n\n### Can I use this with Create React App or Next.js?\n\nYes! 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.\n\n### How does secret detection work?\n\nThe `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.\n\n### What's Feature-Sliced Design (FSD)?\n\nFSD 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.\n\n### How do I debug which rules are causing issues?\n\nRun 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.\n\n### Can I use this in a monorepo?\n\nAbsolutely! 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.\n\n### Is this configuration performant for large codebases?\n\nYes, 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.\n\n## ๐ License\n\nThis project is licensed under \\*\\*MIT License\n\nCopyright (c) 2025 ElsiKora\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\\*\\*.\n","readmeFilename":"README.md"}
![\"project-logo\"](\"https://6jft62zmy9nx2oea.public.blob.vercel-storage.com/eslint-config-WPPCbc2Zwdy2RQfrjXbSRHiORNYogb.png\")
\n![\"ElsiKora\"](\"https://img.shields.io/badge/MADE%20BY%20ElsiKora-333333.svg?style=for-the-badge\"){kind=icon}
\n ![\"TypeScript\"](\"https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge&logo=typescript&logoColor=white\"){kind=icon}
![\"JavaScript\"](\"https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black\"){kind=icon}
![\"ESLint\"](\"https://img.shields.io/badge/ESLint-4B32C3.svg?style=for-the-badge&logo=eslint&logoColor=white\"){kind=icon}
![\"Node.js\"](\"https://img.shields.io/badge/Node.js-339933.svg?style=for-the-badge&logo=node.js&logoColor=white\"){kind=icon}
![\"React\"](\"https://img.shields.io/badge/React-61DAFB.svg?style=for-the-badge&logo=react&logoColor=black\"){kind=icon}
![\"Next.js\"](\"https://img.shields.io/badge/Next.js-000000.svg?style=for-the-badge&logo=next.js&logoColor=white\"){kind=icon}
![\"Vue.js\"](\"https://img.shields.io/badge/Vue.js-4FC08D.svg?style=for-the-badge&logo=vue.js&logoColor=white\"){kind=icon}
![\"NestJS\"](\"https://img.shields.io/badge/NestJS-E0234E.svg?style=for-the-badge&logo=nestjs&logoColor=white\"){kind=icon}
![\"Prettier\"](\"https://img.shields.io/badge/Prettier-F7B93E.svg?style=for-the-badge&logo=prettier&logoColor=black\"){kind=icon}
![\"Jest\"](\"https://img.shields.io/badge/Jest-C21325.svg?style=for-the-badge&logo=jest&logoColor=white\"){kind=icon}
![\"Vitest\"](\"https://img.shields.io/badge/Vitest-6E9F18.svg?style=for-the-badge&logo=vitest&logoColor=white\"){kind=icon}
![\"Rollup\"](\"https://img.shields.io/badge/Rollup-EC4A3F.svg?style=for-the-badge&logo=rollup&logoColor=white\"){kind=icon}
![\"pnpm\"](\"https://img.shields.io/badge/pnpm-F69220.svg?style=for-the-badge&logo=pnpm&logoColor=white\"){kind=icon}
![\"npm\"](\"https://img.shields.io/badge/npm-CB3837.svg?style=for-the-badge&logo=npm&logoColor=white\"){kind=icon}
![\"Yarn\"](\"https://img.shields.io/badge/Yarn-2C8EBB.svg?style=for-the-badge&logo=yarn&logoColor=white\"){kind=icon}
\n