ESLint Configs for Modern JavaScript Projects

Welcome to the ultimate ESLint setup — no fluff, just what you need to write clean, bug-free code. Say goodbye to unnecessary stress and hello to a smooth dev experience! 🎉

Why This ESLint Config?

• As simple as flat configs can be — without re-inventing the classic nested config,
• Keeps your codebase clean while reducing friction 🧘,
• Focuses on catching bugs, not dictating your coding style 🐛,
• Minimal but configurable — use only what you need 🔧,
• Bundled support for TypeScript, React.js, Playwright, Storybook, Vitest, and more,
• DOES NOT enforce import sorting or stylistic formatting (that's a job for Prettier 😉),
• Works with eslint v9+

Usage

Note

Starting from @zemd/eslint-flat-config@v3.2.0, the package was split into multiple packages. Pick what suits your project best! 🛠️

Available Packages

Package	Registry	Description
@zemd/eslint-js		JavaScript-only rules.
@zemd/eslint-ts		TypeScript rules (includes JS rules from @zemd/eslint-js).
@zemd/eslint-react		React rules (includes TS rules from @zemd/eslint-ts and JS rules from @zemd/eslint-js).
@zemd/eslint-rock-stack		Rules for Fullstack projects that include React.js, GraphQL, Playwright, Tailwind(optional), Turbo, Vitest, and Storybook.
@zemd/eslint-next		Rules for Next.js projects (inherits from @zemd/eslint-rock-stack).

Installation

npm install --save-dev eslint @zemd/eslint-rock-stack

Configuration

Basic Setup

// eslint.config.js
import { typescript, storybook } from "@zemd/eslint-rock-stack";

export default [
  ...typescript(),
  ...storybook({
    filesMain: ["./packages/storybook/.storybook/main.js"],
    filesStories: ["./packages/storybook/**/*.{stories,story}.{js,jsx,ts,tsx}"],
  }),
];

More Advanced Setup

Want to remove specific rules? Just filter them out! 🔥

// eslint.config.js
import rock from "@zemd/eslint-rock-stack";

export default rock().filter((feature) => !feature.name.startsWith("zemd/graphql"));

Or cherry-pick only what you need:

// eslint.config.js
import { javascript, typescript, vitest } from "@zemd/eslint-rock-stack";

export default [...javascript(), ...typescript(), ...vitest()];

Add script for package.json

npm pkg set scripts.lint="eslint ."
npm pkg set scripts.lint:fix="eslint . --fix"

or manually:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Debug your rules

Use @eslint/config-inspector to debug your ESLint setup.

npx @eslint/config-inspector@latest
# or
bunx @eslint/config-inspector@latest

Vision

This monorepo is all about making your life easier — less tool stress, more confidence. Here’s the philosophy behind it:

• 💠 No tool should block you from using language features,
• 💠 Minimal warnings, just meaningful errors that help (not annoy) you.
• 💠 No formatting rules — Prettier handles that so you don’t have to debate semicolons,
• 💠 Simple configuration — just native JS arrays, no unnecessary abstractions,
• 💠 Batteries included 🔋: Enable only what you need (TypeScript, React, Next.js, Tailwind, Vitest, Playwright, Storybook, etc.).
• 💠 Rules guide you to write better code, not force a rigid style.

Inspirations and alternatives

• Sheriff -- Great, but includes some stylistic restrictions,
• Antfu config -- Another solid choice,
• XO -- Flat version of xo, but still in beta.

License

All packages in this monorepo are licensed under Apache-2.0 license 😇.

💙 💛 Donate