Recommended Addons

This config covers TypeScript, React, Node.js, testing, and code quality — but intentionally stops at the framework boundary. Everything below works alongside @effective/eslint-config — just append it to the flat config array:

// eslint.config.ts
import { getEslintConfig } from "@effective/eslint-config"
import someAddon from "some-addon-plugin"

export default [
  ...(await getEslintConfig({ react: true })),
  ...someAddon.configs.recommended,
]

Next.js

Next.js ships eslint-config-next, but it bundles older versions of plugins this config already includes (import-x, react, jsx-a11y). Using the plugin directly avoids version conflicts:

Plugin	Purpose
`@next/eslint-plugin-next`	Image optimization, metadata, font loading, script placement, App Router conventions

TIP

Use the plugin (@next/eslint-plugin-next), not the full config (eslint-config-next). The full config re-adds plugins you already have — with potentially different versions and rule settings.

TanStack Query

Plugin	Purpose
`@tanstack/eslint-plugin-query`	Query key conventions, exhaustive deps for queries, stable query function references

CSS & Styling

Plugin	Purpose
`eslint-plugin-tailwindcss`	Tailwind class ordering, contradicting class detection, enforcing utility classes over custom CSS
`@unocss/eslint-plugin`	UnoCSS class ordering and blocklist enforcement
`@pandacss/eslint-plugin`	Panda CSS — validates style props, detects invalid tokens, enforces atomic patterns
`@stylexjs/eslint-plugin`	StyleX (Meta's CSS-in-JS) — validates style definitions and prop usage

Internationalization

Plugin	Purpose
`eslint-plugin-i18next`	Detects hardcoded user-facing strings in JSX and enforces translation function usage (`t()`, `<Trans>`)

Config File Linting

This config already lints JSON via @eslint/json. For other config file formats, ESLint can serve as a unified linter — one tool, one config, inline directives (# eslint-disable), and editor integration for free. All three plugins below are from the same author (ota-meshi), actively maintained, and support ESLint flat config.

Plugin	Rules	Downloads/week	Formats
`eslint-plugin-jsonc`	50	~1M	JSON, JSONC, JSON5 — more comprehensive than `@eslint/json`, with comment and trailing comma support
`eslint-plugin-yml`	27	~272K	YAML — CI configs, Docker Compose, Kubernetes manifests, pnpm-workspace.yaml
`eslint-plugin-toml`	23	~67K	TOML — primarily relevant for Rust (Cargo.toml) and Python (pyproject.toml) projects

TIP

The alternative is dedicated format-specific tools: yamllint for YAML, taplo for TOML. These are faster and more format-aware, but require separate tool setup and configuration. ESLint plugins trade depth for consolidation.

Barrel Files

Barrel files (index.ts that re-export from many modules) hurt tree-shaking, slow down tests, and amplify circular dependencies. This config doesn't enforce a stance on them because many codebases use barrels intentionally — especially for public API surfaces of libraries.

Plugin	Purpose
`eslint-plugin-barrel-files`	Detects barrel files, flags imports from them (with module graph analysis via `oxc-resolver`), prevents `export *` patterns

Monorepo Hygiene

In monorepos, it's easy to accidentally import from another package's internals or forget to declare a dependency in package.json. This config doesn't include monorepo rules because workspace setups vary too much — pnpm strict, yarn PnP, npm hoisted — and the right boundaries are project-specific.

Plugin	Purpose
`eslint-plugin-workspaces`	Prevents cross-package internal imports, phantom dependencies, and wrong relative/absolute paths across workspace boundaries
`eslint-plugin-pnpm`	pnpm catalog validation — enforces catalog usage, detects unused/duplicate catalog items, validates workspace patterns. Requires `jsonc-eslint-parser` and `yaml-eslint-parser`.
`@nx/eslint-plugin`	Nx workspace constraints — enforce module boundaries, dependency rules between projects, and project tag-based access control

Markdown Structure

This config lints code blocks inside Markdown and MDX files via eslint-plugin-mdx. It does not lint Markdown structure itself (heading levels, link syntax, list formatting). For that, use a dedicated tool:

Tool	Purpose
`markdownlint-cli2`	Structural Markdown linting — heading hierarchy, link validation, list consistency, trailing whitespace

Other Frameworks

The base config — TypeScript, imports, security, code quality, sorting, spelling — is fully framework-agnostic. If you use Vue, Svelte, Astro, or Solid, skip the react: true flag and add your framework's ESLint plugin on top.

Note that jsx-a11y accessibility rules currently only activate with react: true. If you use JSX outside of React, you'll need to add eslint-plugin-jsx-a11y manually. Storybook rules activate automatically for *.stories.* files regardless of framework.