Skip to main content

​
Overview

While @zayne-labs/eslint-config works out of the box with zero configuration, it offers extensive customization options when you need them. This guide covers all the ways you can tailor the configuration to your project’s needs.

​
Factory Options

The zayne() factory function accepts an options object to control which features are enabled and how they behave.

​
Basic Configuration

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

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

  // Enable stylistic formatting rules
  stylistic: true,

  // TypeScript and React are auto-detected, but can be explicit
  typescript: true,
  react: true,
});

​
Ignore Patterns

.eslintignore is no longer supported in Flat config. Use the ignores option instead.
The ignores option in the factory is treated as global ignores and extends the config’s default ignores: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  ignores: [
    "**/fixtures",
    "**/temp",
    "**/generated",
    // ...more globs
  ],
});
You can also pass a function to modify the default ignores: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  ignores: (defaultIgnores) => [
    ...defaultIgnores,
    "custom-folder/**",
  ],
});

​
Gitignore Integration

By default, ESLint will parse your .gitignore file to determine what to ignore: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  // Parse .gitignore file (enabled by default)
  gitignore: true,
});
Disable if you want to manage ignores manually: 
export default zayne({
  gitignore: false,
});

​
Stylistic Rules

Enable stylistic formatting rules for code consistency: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  stylistic: true,
});

​
Disabling Optional Configs

Disable all optional configs at once, keeping only essentials: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  // Disable all optional configs
  withDefaults: false,
});

​
Language Support

Selectively enable or disable language support: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  // Disable specific language support
  jsonc: false,
  yaml: false,
  toml: false,
  markdown: false,
});

​
Custom Rules

Pass additional configs as extra arguments to override or extend rules: 
import { zayne } from "@zayne-labs/eslint-config";

export default zayne(
  {
    // Factory options
  },
  // Additional flat configs
  {
    files: ["**/*.ts"],
    rules: {
      "@typescript-eslint/no-explicit-any": "off",
    },
  }
);

​
Type-Aware Rules

Type-aware linting is automatically enabled when TypeScript is detected. It uses the nearest tsconfig.json by default.
Only specify tsconfigPath when you need to point to a different location or use multiple tsconfigs.
import { zayne } from "@zayne-labs/eslint-config";

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

​
Advanced Composition

This low-level approach is for advanced use cases only. The zayne() factory handles option coordination automatically. Use this only if you need granular control over config composition.
Import and compose fine-grained configs directly: 
import {
  astro,
  comments,
  depend,
  ignores,
  imports,
  javascript,
  jsdoc,
  jsonc,
  jsx,
  markdown,
  node,
  perfectionist,
  react,
  stylistic,
  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(),
    markdown()
  );
Available config modules:
  • astro - Astro framework support
  • comments - ESLint directive comments
  • depend - Dependency management rules
  • expo - React Native/Expo support
  • ignores - Global ignore patterns
  • imports - Import/export rules
  • javascript - JavaScript rules
  • jsdoc - JSDoc comment rules
  • jsonc - JSON/JSONC support
  • jsx - JSX rules
  • markdown - Markdown file support
  • node - Node.js rules
  • perfectionist - Code organization rules
  • pnpm - PNPM catalog rules
  • react - React framework rules
  • solid - Solid.js framework rules
  • sortPackageJson - package.json sorting
  • sortTsconfig - tsconfig.json sorting
  • stylistic - Stylistic formatting rules
  • tailwindcssBetter - Tailwind CSS rules
  • tanstack - TanStack Query/Router rules
  • toml - TOML file support
  • typescript - TypeScript rules
  • unicorn - Additional best practices
  • vue - Vue framework rules
  • yaml - YAML file support
See the configs directory for implementation details.

​
Example Configurations

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

export default zayne(
  {
    type: "lib",
    typescript: {
      tsconfigPath: [
        "./packages/*/tsconfig.json",
      ],
    },
  },
  {
    files: ["packages/**/*.ts"],
    rules: {
      "no-console": "error",
    },
  }
);

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

export default zayne(
  {
    typescript: true,
  },
  {
    files: ["**/*.ts", "**/*.tsx"],
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-non-null-assertion": "error",
      "@typescript-eslint/strict-boolean-expressions": "error",
    },
  }
);

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

export default zayne(
  {},
  {
    files: ["**/*.test.ts", "**/*.spec.ts"],
    rules: {
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      "no-console": "off",
    },
  }
);

​
Next Steps

Framework Setup

Configure ESLint for React, Vue, Astro, Solid, and more

API Reference

View complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us