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)

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.

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.

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

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

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

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

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

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

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',
    },
  },
);

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',
    },
  },
];

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