Skip to main content

​
Overview

@zayne-labs/eslint-config provides first-class support for popular JavaScript frameworks. This guide covers how to enable and configure framework-specific linting rules.

​
React

React support is auto-detected in most cases, but you can enable it explicitly.
1

Enable React support

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

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

Install peer dependencies

ESLint will prompt you to install these dependencies when you run it:
pnpm i -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
3

Start linting

Your React project is now configured with ESLint rules for:
  • React best practices
  • Hooks rules
  • React Refresh/Fast Refresh compatibility

​
Next.js

For Next.js projects, use the dedicated configuration:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  react: true,
  // Add Next.js specific rules as needed
});
Next.js automatically detects React, so you may not need to explicitly enable it.

​
Expo (React Native)

For React Native and Expo projects:
1

Enable Expo support

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

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

Install peer dependencies

pnpm i -D eslint-config-expo

​
Vue

Vue support includes Vue 3 template linting and composition API rules.
1

Enable Vue support

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

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

Install peer dependencies

pnpm i -D eslint-plugin-vue vue-eslint-parser

​
Vue Configuration Options

Customize Vue linting behavior:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne(
  {
    vue: true,
  },
  // Override Vue-specific rules
  {
    files: ["**/*.vue"],
    rules: {
      "vue/multi-word-component-names": "off",
      "vue/require-default-prop": "warn",
    },
  }
);

​
Astro

Astro support includes Astro component linting and framework integration.
1

Enable Astro support

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

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

Install peer dependencies

pnpm i -D eslint-plugin-astro

​
Astro with React/Vue

Astro supports multiple frameworks in the same project:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

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

​
Solid

Solid.js support includes reactive patterns and JSX linting.
1

Enable Solid support

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

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

Install peer dependencies

pnpm i -D eslint-plugin-solid

​
Additional Integrations

​
TailwindCSS

Uses the enhanced eslint-plugin-better-tailwindcss for improved class sorting:
1

Enable Tailwind support

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

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

Install peer dependencies

pnpm i -D eslint-plugin-better-tailwindcss

​
TanStack Query & Router

Support for TanStack Query and Router best practices:
1

Enable TanStack support

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

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

Install peer dependencies

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

​
PNPM Catalogs

Lint PNPM catalog protocol usage:
1

Enable PNPM support

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

export default zayne({
  pnpm: true,
});
2

Install peer dependencies

pnpm i -D eslint-plugin-pnpm

​
Dependency Management

Enforce dependency rules with eslint-plugin-depend:
1

Enable dependency rules

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

export default zayne({
  depend: true,
});
2

Install peer dependencies

pnpm i -D eslint-plugin-depend

​
Multi-Framework Projects

You can enable multiple frameworks in the same project:
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  // Enable multiple frameworks
  react: true,
  vue: true,
  astro: true,
  
  // Enable integrations
  tailwindcssBetter: true,
  tanstack: {
    query: true,
  },
});

​
Example Configurations

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

export default zayne({
  react: true,
  typescript: true,
  tailwindcssBetter: true,
});
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

export default zayne({
  astro: true,
  react: true,
  vue: true,
  solid: true,
  tailwindcssBetter: true,
});
eslint.config.js
import { zayne } from "@zayne-labs/eslint-config";

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

​
Troubleshooting

If auto-detection fails, explicitly enable the framework:
export default zayne({
  react: true, // Force enable
});
ESLint will prompt you to install missing peer dependencies. Follow the installation instructions provided in the terminal.For manual installation, refer to the framework-specific sections above.
Use file-specific overrides to resolve conflicts:
export default zayne(
  {
    react: true,
    vue: true,
  },
  {
    files: ["**/*.jsx", "**/*.tsx"],
    rules: {
      // React-specific overrides
    },
  },
  {
    files: ["**/*.vue"],
    rules: {
      // Vue-specific overrides
    },
  }
);

​
Next Steps

Customization

Learn how to customize rules and override defaults

API Reference

View complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us