🛡️ ESLint-Config

ESLint configuration vision of ElsiKora

📚 Table of Contents

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

📖 Description

ESLint-Config by ElsiKora is a comprehensive and highly customizable ESLint configuration system designed to enforce coding standards across various JavaScript and TypeScript projects. It provides a modular approach to linting with support for multiple frameworks including React, Next.js, NestJS, and more. The configuration is built with modern JavaScript/TypeScript applications in mind, supporting various file types (JS, TS, JSX, TSX, JSON, YAML, CSS) and integrating seamlessly with popular tools like Prettier. By using this configuration, teams can maintain consistent code quality, catch potential bugs early, and enforce best practices across their entire codebase.

🚀 Features

• ✨ Modular configuration system with support for 27+ different plugins
• ✨ Customizable TypeScript naming conventions and strict type checking
• ✨ Advanced React, Next.js and NestJS rule sets with best practices enforced
• ✨ Secret detection to prevent accidental credential exposure in code
• ✨ Integration with Prettier for consistent code formatting
• ✨ Feature-Sliced Design architectural pattern support
• ✨ TanStack Query and Router optimization rules
• ✨ Internationalization (i18next) support for proper translation usage
• ✨ Storybook testing standards enforcement
• ✨ File and folder naming conventions with automatic enforcement
• ✨ Comprehensive documentation and example configurations

🛠 Installation

## Quick Start


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


Or if you prefer using yarn:


yarn add --dev @elsikora/eslint-config


Or with pnpm:


pnpm add -D @elsikora/eslint-config


## Required Dependencies

You'll need to install ESLint:


npm install --save-dev eslint


## Optional Dependencies

Some configurations require additional dependencies. Install them based on your needs:


# For React projects
npm install --save-dev eslint-plugin-react @eslint-react/eslint-plugin

# For TypeScript projects
npm install --save-dev typescript typescript-eslint

# For Next.js projects
npm install --save-dev @next/eslint-plugin-next

# For Prettier integration
npm install --save-dev eslint-plugin-prettier prettier

💡 Usage

Basic Configuration

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

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

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

Comprehensive TypeScript Configuration

Set up a more advanced configuration with TypeScript, React, and code quality plugins:

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

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

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

CLI Usage

Lint your code using the standard ESLint CLI:

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

# Lint and fix automatically
eslint "src/**/*.{js,ts,jsx,tsx}" --fix

Usage with Next.js

For Next.js projects, include the Next.js specific rules:

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

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

Usage with NestJS

For NestJS backend applications:

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

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

Feature-Sliced Design Architecture

Support for Feature-Sliced Design architectural pattern:

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

export default await createConfig({
    withTypescript: true,
    withReact: true,
    withFsd: true,
    withPerfectionist: true, // Will automatically configure for FSD imports ordering
    withPrettier: true
});

Secret Detection

Enable rules to detect potential secrets in your code:

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

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

Advanced Usage: Custom Rule Configuration

You can extend the configuration with your own custom rules:

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

const customRules = {
    rules: {
        'no-console': 'warn',
        '@elsikora/typescript/naming-convention': ['error', {
            // Custom naming convention overrides
        }]
    }
};

export default [
    ...(await createConfig({
        withTypescript: true,
        withReact: true,
        withPrettier: true
    })),
    customRules
];

Configuration Options

Here's a complete list of available configuration options:

interface IConfigOptions {
    withCheckFile?: boolean;       // File naming conventions
    withCss?: boolean;            // CSS linting
    withFsd?: boolean;            // Feature-Sliced Design
    withI18next?: boolean;        // Internationalization
    withJavascript?: boolean;     // JavaScript rules
    withJsDoc?: boolean;          // JSDoc documentation
    withJson?: boolean;           // JSON files
    withJsx?: boolean;            // JSX accessibility
    withMarkdown?: boolean;       // Markdown files
    withNest?: boolean;           // NestJS framework
    withNext?: boolean;           // Next.js framework
    withNode?: boolean;           // Node.js environment
    withNoSecrets?: boolean;      // Secret detection
    withPackageJson?: boolean;    // package.json files
    withPerfectionist?: boolean;  // Code organization
    withPrettier?: boolean;       // Prettier integration
    withReact?: boolean;          // React framework
    withRegexp?: boolean;         // Regular expressions
    withSonar?: boolean;          // SonarJS rules
    withStorybook?: boolean;      // Storybook integration
    withStylistic?: boolean;      // Code style
    withTailwindCss?: boolean;    // TailwindCSS
    withTanstack?: boolean;       // TanStack Query/Router
    withTypeorm?: boolean;        // TypeORM
    withTypescript?: boolean;     // TypeScript
    withUnicorn?: boolean;        // Unicorn rules
    withYaml?: boolean;           // YAML files
}

🛣 Roadmap

❓ FAQ

Frequently Asked Questions

Which ESLint version is supported?

This configuration requires ESLint v8.0.0 or higher and is built for the ESLint flat config system. It is not compatible with older ESLint configurations using .eslintrc files.

How do I use this with TypeScript?

Install typescript and typescript-eslint as dev dependencies, then enable the withTypescript option in your configuration.

Can I use this with Create React App?

Yes, but you'll need to configure it to use ESLint's flat config system. CRA typically uses the older config format, so you might need to eject or use a custom setup.

How do I resolve rule conflicts with Prettier?

Enable the withPrettier option to automatically handle rule conflicts between ESLint and Prettier. This ensures that formatting rules defer to Prettier's configuration.

What's the difference between withStylistic and withPrettier?

withStylistic enforces stylistic code conventions through ESLint rules, while withPrettier integrates with the Prettier formatter and disables ESLint rules that might conflict with Prettier's formatting.

How can I customize the rules?

You can extend the configuration by adding your own rules after the ones from this package. Place your custom rules after the generated config in the array to override specific rules.

How do I handle false positives in the secret detection?

The secret detection (withNoSecrets) might sometimes flag strings that aren't actually secrets. You can customize the sensitivity threshold or add specific exceptions in your configuration.

Why use flat config instead of traditional .eslintrc?

ESLint's flat config system is the future of ESLint configuration. It's more performant, more explicit, and provides better typing support for TypeScript users. It also allows for more flexible configuration composition.

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

📋 Changelog

See CHANGELOG.md for details.