Skip to main content
This guide covers the installation and basic setup for all three Zayne Labs config packages.

​
Prerequisites

Before installing, ensure you have:
  • Node.js 18.x or higher (20.x+ for ESLint config)
  • A package manager: pnpm (recommended), npm, or yarn

​
Quick Start

The fastest way to get started with ESLint config is using the interactive CLI:
pnpx @zayne-labs/eslint-config@latest
The CLI will guide you through:
  • Framework selection (React, Vue, Astro, Solid)
  • Additional integrations (TailwindCSS, TanStack, etc.)
  • Automatic dependency installation

​
Package Installation

​
ESLint Config

1

Install the package

pnpm add -D eslint @zayne-labs/eslint-config
Required peer dependency: ESLint 9.x.x is required. Node.js 20.x or higher is also required.
2

Create configuration file

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

export default zayne();
This zero-config setup works out of the box with TypeScript, JSX, JSON, YAML, TOML, Markdown, and more.
3

Add npm scripts

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

​
Framework-Specific Dependencies

Install additional peer dependencies based on your framework: 
pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
React support is auto-detected in most cases, but you can enable it explicitly:
import { zayne } from "@zayne-labs/eslint-config";

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

pnpm add -D eslint-plugin-vue vue-eslint-parser
Enable in your config:
import { zayne } from "@zayne-labs/eslint-config";

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

pnpm add -D eslint-plugin-astro astro-eslint-parser
Enable in your config:
import { zayne } from "@zayne-labs/eslint-config";

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

pnpm add -D eslint-plugin-solid
Enable in your config:
import { zayne } from "@zayne-labs/eslint-config";

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

​
Optional Integrations

For enhanced Tailwind class sorting and validation:
pnpm add -D eslint-plugin-better-tailwindcss

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

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

pnpm add -D @tanstack/eslint-plugin-query @tanstack/eslint-plugin-router

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

export default zayne({
  tanstack: {
    query: true,
    router: true,
  },
});

pnpm add -D eslint-config-expo

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

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

​
Prettier Config

1

Install the package

pnpm add -D @zayne-labs/prettier-config prettier
Required peer dependency: Prettier 3.x.x is required.
2

Install core plugins

The import sorting plugin is required for the default configuration:
pnpm add -D @ianvs/prettier-plugin-sort-imports
3

Create configuration file

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

export default zayne({
  base: true,        // Enabled by default
  sortImports: true, // Enabled by default
});

​
Optional Plugins

For Tailwind class sorting and multi-line formatting:
pnpm add -D prettier-plugin-tailwindcss prettier-plugin-classnames prettier-plugin-merge
Enable in your config:
import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: true,
});
Advanced configuration:
import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  tailwindcss: {
    customAttributes: ["classNames", "classes"],
    customFunctions: ["cn", "tv", "tw"],
    tailwindStylesheet: "./src/styles/tailwind.css",
  },
});
For Astro component formatting:
pnpm add -D prettier-plugin-astro
Enable in your config:
import { zayne } from "@zayne-labs/prettier-config";

export default zayne({
  astro: true,
});
Auto-Installation: When you enable a feature that requires additional plugins, the config will prompt you to install them automatically when you run prettier --write .

​
TypeScript Config

1

Install the package

pnpm add -D @zayne-labs/tsconfig
2

Choose your configuration

Select the appropriate config based on your project type:Using a bundler (Vite, Webpack, etc.):
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app"
}
Using tsc to compile:
{
  "extends": "@zayne-labs/tsconfig/tsc/dom/app"
}
3

Override compiler options (optional)

You can extend the base config with your own options:
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

​
Available Configurations

For projects using external bundlers (Vite, Webpack, Rollup, etc.):
// DOM-based applications
"@zayne-labs/tsconfig/bundler/dom/app"
"@zayne-labs/tsconfig/bundler/dom/library"
"@zayne-labs/tsconfig/bundler/dom/library-monorepo"

// Non-DOM environments (Node.js, etc.)
"@zayne-labs/tsconfig/bundler/no-dom/app"
"@zayne-labs/tsconfig/bundler/no-dom/library"
"@zayne-labs/tsconfig/bundler/no-dom/library-monorepo"

// Next.js
"@zayne-labs/tsconfig/bundler/next"

​
Interactive CLI Guide

The ESLint config includes an interactive CLI that simplifies setup:
1

Run the CLI

pnpx @zayne-labs/eslint-config@latest
2

Select your framework

Choose from:
  • React
  • Vue
  • Astro
  • Solid
  • None (base configuration)
3

Choose integrations

Select additional tools:
  • TailwindCSS (better-tailwindcss plugin)
  • TanStack Query
  • TanStack Router
4

Install dependencies

The CLI will automatically install all required peer dependencies.
5

Configuration file created

The CLI generates eslint.config.js with your selected options.

​
CLI Options

Skip prompts and use default values: 
pnpx @zayne-labs/eslint-config@latest --yes
Specify framework template: 
pnpx @zayne-labs/eslint-config@latest --template react
Add extra integrations: 
pnpx @zayne-labs/eslint-config@latest --extra tailwindcss

​
Verification

After installation, verify your setup: 
pnpm lint:eslint

​
Next Steps

ESLint Setup

Complete guide for ESLint configuration and IDE setup

ESLint Customization

Customize rules and advanced configuration options

Framework Support

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

Prettier Setup

Configure Prettier with smart import sorting

​
Troubleshooting

If you see warnings about missing peer dependencies, install them manually:
pnpm add -D <package-name>
All peer dependencies are listed as optional, so you only need to install the ones for frameworks and integrations you’re using.
Ensure you’ve installed the required plugins for features you’ve enabled. For example, if tailwindcss: true, you need:
pnpm add -D prettier-plugin-tailwindcss prettier-plugin-classnames prettier-plugin-merge
The config will prompt you to install missing plugins when you run Prettier.
Make sure you’re using the correct import path. All TypeScript configs are exported from specific paths:
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app"
}
Check the Available Configurations section for the complete list.
Each package has specific Node.js requirements:
  • ESLint config: Node.js 20.x or higher
  • Prettier config: Node.js 18.x or higher
  • TypeScript config: Any recent Node.js version
Upgrade your Node.js version if you encounter compatibility issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us