WoofMeow ESLint config

A modular ESLint Flat Config containing multiple configurations for modern JavaScript and TypeScript projects.

Table of contents:

• Getting started
• How it works
• Available Configs
  • Core Configs
  • Frameworks
  • Styling
  • Architecture & Imports
  • Data & Configuration
• Usage Examples
  • Using the configure function (Recommended)
  • Manual Composition (Without configure)
• Included Plugins (Out of the box)

🚀 Getting started

Install eslint-config-woofmeow as a dev dependency. Note: This package requires eslint ^9.0.0 as a peer dependency.

npm install eslint-config-woofmeow --save-dev
# or
pnpm install eslint-config-woofmeow --save-dev
# or
yarn add eslint-config-woofmeow --dev

💡 Tip: File Extensions ESLint Flat Config requires ES Modules (import/export). If your project does not have "type": "module" in its package.json, name your configuration file eslint.config.mjs instead of eslint.config.js to avoid module errors.

⚙️ How it works

This package exports a configs object containing all available configurations, and an optional smart configure helper function.

When using the configure function, it automatically injects the recommended configuration at the very beginning of the array. This ensures that fundamental rules (like base JS rules and strict core plugins) are always applied in the correct order without duplication.

🧩 Available Configs

You can mix and match the following configs from the configs object to suit your stack:

Core Configs

• recommended: The foundation. A configuration compatible with most projects, including best practices and unicorn rules. (Injected automatically if you use the configure helper).
• typescript: Specific rules and parser settings for projects using TypeScript.

Frameworks

• react: Configuration for React projects (Hooks, JSX accessibility, etc.).
• next: Specific configuration for Next.js projects. Includes the react config.

Styling

• tailwindcss: Enforces class sorting and best practices using eslint-plugin-tailwindcss.

Architecture & Imports

• import/base: Basic import configuration (sorting, removing unused imports).
• import/atomic: Specific configuration for Atomic Design architecture. Includes the import/base config.
• import/fsd: Specific configuration for Feature-Sliced Design (up to v2.x.x). Includes the import/base config.

Data & Configuration

• json: Configuration for .json, .jsonc and .json5 files. It applies the appropriate parser and safely validates editor settings without breaking your JavaScript rules.

📖 Usage Examples

Using the configure function (Recommended)

You can combine any number of configs to create a robust configuration. The recommended config is applied automatically. You can also easily override specific rules (like those from unicorn) by appending your own configuration object at the end.

// eslint.config.js
import { configure, configs } from 'eslint-config-woofmeow';

export default configure(
  configs.typescript,
  configs.next,
  configs.tailwindcss,
  configs['import/fsd'],

  // Custom overrides (optional)
  {
    rules: {
      'no-console': 'warn',
      'unicorn/prefer-string-slice': 'off',
    },
  },
);

Manual Composition (Without configure)

If you prefer full control over the array structure, you can bypass the configure helper and manually spread the configs. Note: When doing this, you must explicitly include configs.recommended if you want the base rules applied.

// eslint.config.js
import { configs } from 'eslint-config-woofmeow';

export default [
  ...configs.recommended,
  ...configs.typescript,
  ...configs.react,

  {
    rules: {
      'no-console': 'warn',
    },
  },
];

📦 Included Plugins (Out of the box)

You do not need to install these plugins separately; they are already bundled and managed by this configuration:

• Core: @eslint/js, eslint-plugin-unicorn
• TypeScript: typescript-eslint
• React & Next.js: eslint-plugin-react, eslint-plugin-react-hooks, eslint-config-next
• Imports Management: eslint-plugin-import, eslint-plugin-simple-import-sort, eslint-plugin-unused-imports, eslint-plugin-no-relative-import-paths
• Architecture: eslint-plugin-import-fsd
• Styling: eslint-plugin-tailwindcss
• Data & Config: eslint-plugin-jsonc