Skip to main content
The @zayne-labs/eslint-config package provides a comprehensive ESLint configuration that works out-of-the-box with TypeScript, JSX, Vue, JSON, YAML, TOML, Markdown, and more. Built on ESLint Flat Config for easy composition and customization.

​
Features

Zero Config Setup

One-line setup with reasonable defaults and best practices

Framework Support

Optional support for React, Vue, Svelte, Astro, and Solid

Interactive CLI

Guided setup with automatic dependency installation

Highly Customizable

Fine-grained control when you need it

​
Installation

Use the interactive CLI to set up your config: 
pnpx @zayne-labs/eslint-config@latest
The CLI will guide you through:
  • Framework selection (React, Vue, Svelte, Astro)
  • Additional integrations (TailwindCSS, etc.)
  • Automatic dependency installation

​
Manual Installation

pnpm add -D eslint @zayne-labs/eslint-config
Create eslint.config.js in your project root:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne();

​
Requirements

  • ESLint v9.5.0+
  • Node.js v20+

​
Package Scripts

Add these scripts to your package.json:
package.json
{
  "scripts": {
    "lint:eslint": "eslint .",
    "lint:eslint-fix": "eslint . --fix"
  }
}

​
IDE Support

Install the ESLint extension and add to .vscode/settings.json:
.vscode/settings.json
{
  // Auto fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

​
Configuration

​
Basic Options

The config works out of the box with zero configuration. Customize it when needed:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  // Custom ignores (extends default ignores, doesn't override)
  ignores: [
    "**/fixtures",
    "**/coverage",
  ],

  // Parse .gitignore file (enabled by default)
  gitignore: true,

  // Project type: 'app' (default) or 'lib'
  type: "app",

  // Disable all optional configs at once
  withDefaults: false,

  // Enable stylistic formatting rules
  stylistic: true,

  // TypeScript and React are auto-detected
  typescript: true,
  react: true,

  // Disable specific language support
  jsonc: false,
  yaml: false,
});

​
Stylistic Rules

Enable and customize stylistic formatting:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  stylistic: {
    jsx: true,
    quotes: "single", // or 'double'
  },
});
The .eslintignore file is no longer supported in Flat Config. Use the ignores option instead. Ignores in the first argument are treated as global ignores and extend (not override) the default ignores.

​
Custom Rules

Pass additional configs as extra arguments:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne(
  {
    // Configuration for zayne's config
  },
  // Additional ESLint Flat Configs
  {
    files: ["**/*.ts"],
    rules: {
      "@typescript-eslint/no-explicit-any": "off",
    },
  },
  {
    rules: {
      "no-console": "warn",
    },
  }
);

​
Framework Support

​
React

Auto-detected in most cases, or enable explicitly:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  react: true,
});
Install peer dependencies: 
pnpm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh

​
Vue

eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  vue: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-vue vue-eslint-parser

​
Svelte

eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  svelte: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-svelte

​
Astro

eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  astro: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-astro

​
Solid

eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  solid: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-solid

​
Integration Support

​
TailwindCSS

Uses the enhanced eslint-plugin-better-tailwindcss for improved class sorting and validation:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  tailwindcssBetter: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-better-tailwindcss

​
Expo (React Native)

eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  expo: true,
});
Install peer dependencies: 
pnpm i -D eslint-config-expo

​
TanStack

Support for TanStack Query and Router:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  tanstack: {
    query: true,
    router: true,
  },
});
Install peer dependencies: 
pnpm i -D @tanstack/eslint-plugin-query @tanstack/eslint-plugin-router

​
PNPM Catalogs

Lint PNPM catalog protocol usage:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  pnpm: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-pnpm

​
Dependency Management

Enforce dependency rules with eslint-plugin-depend:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  depend: true,
});
Install peer dependencies: 
pnpm i -D eslint-plugin-depend

​
Type-Aware Rules

Type-aware linting is automatically enabled when TypeScript is detected. It uses the nearest tsconfig.json by default.

​
Single Custom TSConfig

Specify a custom tsconfig location:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  typescript: {
    tsconfigPath: "./config/tsconfig.json",
  },
});

​
Multiple TSConfigs

For projects with multiple tsconfig files:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  typescript: {
    tsconfigPath: ["./tsconfig.json", "./tsconfig.node.json"],
  },
});
Only specify tsconfigPath when you need to point to a tsconfig in a different location or use multiple tsconfigs. The default behavior works for most projects.

​
Advanced Composition

For advanced use cases, import and compose fine-grained configs directly:
eslint.config.js
import {
  astro,
  comments,
  depend,
  expo,
  ignores,
  imports,
  javascript,
  jsdoc,
  jsonc,
  jsx,
  markdown,
  node,
  perfectionist,
  pnpm,
  react,
  solid,
  sortPackageJson,
  sortTsconfig,
  stylistic,
  tailwindcssBetter,
  tanstack,
  toml,
  typescript,
  unicorn,
  vue,
  yaml,
} from "@zayne-labs/eslint-config";
import { FlatConfigComposer } from "eslint-flat-config-utils";

export default new FlatConfigComposer().append(
  ignores(),
  javascript(),
  typescript(),
  jsx(),
  comments(),
  node(),
  jsdoc(),
  imports(),
  unicorn(),
  perfectionist(),
  stylistic(),
  react(),
  vue(),
  jsonc(),
  yaml(),
  toml(),
  markdown()
);
This low-level approach is for advanced use cases only. The zayne() factory handles option coordination automatically. Only use this if you need granular control over config composition.

​
Combining with Legacy Config

If you have existing eslintrc configs, use @eslint/eslintrc to convert them:
eslint.config.js
import { FlatCompat } from "@eslint/eslintrc";
import { zayne } from "@zayne-labs/eslint-config";

const compat = new FlatCompat();

export default zayne(
  {
    ignores: [],
  },
  ...compat.config({
    extends: [
      "eslint:recommended",
      // Other extends...
    ],
  })
  // Other flat configs...
);

​
Inspecting Configuration

View active rules using the ESLint Config Inspector: 
pnpx @eslint/config-inspector@latest
This opens an interactive UI showing all enabled rules, their configurations, and which files they apply to.

​
Versioning Policy

Follows Semantic Versioning with config-specific considerations:

​
Breaking Changes (Major)

  • Node.js version requirements
  • Major refactors affecting setup
  • Plugin updates with significant behavior changes
  • Changes affecting most codebases

​
Non-Breaking Changes (Minor/Patch)

  • Rule additions, removals, or option changes
  • Dependency updates
  • Stricter linting (considered improvements)

​
FAQ

Override any rules locally using the customization options. For extensive changes, consider forking the repository.
The package uses modern JavaScript features and follows ESLint’s recommended Node.js version support policy.
Yes! This config is designed to work alongside Prettier. Use @zayne-labs/prettier-config for complementary formatting.
Use the Combining with Legacy Config approach or manually recreate your config using the Flat Config format.

​
Contributing

Contributions welcome! See our contribution guidelines for details.

​
License

MIT © Ryan Zayne

​
Credits

Inspired by antfu/eslint-config

Build docs developers (and LLMs) love

Get started for freeTalk to us