ESLint Config Fans

Opinionated and flexible ESLint config with TypeScript, Vue, Astro support and oxlint integration.

• Modern: ESLint flat config with pregenerated TypeScript definitions
• Strict: Opinionated and rigorous linting rules for better code quality
• Flexible: Framework-agnostic with optional plugins
• Zero-config: Works out of the box, customize as needed
• Fast: Optional oxlint integration (50-100x faster)
• Actively maintained and production-tested across diverse client projects at FANS — both new and existing

Default plugins: @eslint/js, import-x, promise, n, de-morgan, unicorn

Optional plugins: @typescript-eslint, vue, astro, vitest, prettier, @stylistic, perfectionist, vuejs-accessibility, eslint-plugin-query

Inspect rules · View oxlint unsupported rules

Table of Contents

• Table of Contents
• Usage
• Customization
  • Available Options
  • Ignores
  • Strict Mode
  • Formatting (Prettier and Stylistic)
  • Custom Configurations and Overrides
• Framework Support
  • Vue
  • Nuxt
  • Astro
• Oxlint Support
• Inspect
• Inspired By
• Contributing

Usage

Install the package:

pnpm add -D eslint-config-fans eslint

Create eslint.config.js in your project root:

import { defineConfig } from 'eslint-config-fans'

export default defineConfig({
  // Enable features based on your project
  typescript: true,
  vue: true,
  prettier: true,
})

Customization

Available Options

interface DefineConfigOptions {
  // Custom ignore patterns
  ignores?: string[]

  // Control strictness level
  strict?: boolean // default: true

  // Enable TypeScript support
  typescript?: boolean // default: false

  // Enable Vue.js support
  vue?: boolean | VueOptions // default: false

  // Enable Astro support
  astro?: boolean // default: false

  // Enable test files support (Vitest)
  test?: boolean // default: false

  // Enable stylistic formatting rules
  stylistic?: boolean | StylisticOptions // default: false

  // Enable Prettier integration
  prettier?: boolean // default: false

  // Enable unicorn rules (opinionated best practices)
  unicorn?: boolean // default: true

  // Enable import/export sorting
  perfectionist?: boolean // default: false

  // Enable oxlint support for better performance
  oxlint?: boolean | OxlintOptions // default: false

  // Enable TanStack Query support
  query?: boolean // default: false
}

Ignores

By default, the config ignores common directories and files, and automatically respects your .gitignore patterns. You can extend the ignore patterns:

export default defineConfig({
  ignores: [
    'custom-dist/**',
    'legacy-code/**',
  ]
})

Strict Mode

By default, the config operates in strict mode, which enables more opinionated linting rules for better code quality. When disabled, the configuration becomes less strict and more permissive:

export default defineConfig({
  strict: false,
})

For new projects, we recommend keeping strict mode enabled. For legacy codebases or gradual adoption, you may want to start with strict: false and enable it later.

Formatting

Prettier vs Stylistic

You can choose between Prettier and ESLint Stylistic for code formatting:

• Prettier (prettier: true): Uses Prettier for formatting, disables conflicting stylistic rules
• Stylistic (stylistic: true): Uses ESLint Stylistic rules for formatting (ignored when Prettier is enabled)

Stylistic Options

When using stylistic: true, you can customize formatting rules. See StylisticOptions for all available options:

export default defineConfig({
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  }
})

Prettier Configuration

Prettier can be configured through standard .prettierrc files or prettier.config.js. The ESLint config will automatically detect and respect your Prettier settings.

Custom Configurations and Overrides

You can extend the configuration with additional ESLint configs and use exported globs for precise file targeting:

import { defineConfig, GLOB_TS } from 'eslint-config-fans'

export default defineConfig(
  {
    typescript: true,
  },
  {
    files: [GLOB_TS],
    rules: {
      '@typescript-eslint/no-misused-promises': 'off',
    },
  }
)

Available globs

Framework Support

Vue

Full support for Vue projects with vue-accessibility and TypeScript integration:

export default defineConfig({
  typescript: true,
  vue: {
    // Enable vue-a11y rules
    a11y: true,

    // Ignore undefined components for the `vue/no-undef-components` rule
    extendUndefComponents: ['CustomComponent'],
  }
})

This enables linting for .vue files with proper TypeScript support and Vue-specific rules.

Nuxt

Full compatibility with Nuxt ESLint:

import { defineConfig } from 'eslint-config-fans'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  defineConfig(
    {
      typescript: true,
      vue: {
        a11y: true,
      },
    },
  ),
)

Astro

Full support for Astro projects with TypeScript integration:

export default defineConfig({
  typescript: true,
  astro: true,
})

This enables linting for .astro files with proper TypeScript support and Astro-specific rules.

Oxlint Support

This config includes built-in support for oxlint — a blazing-fast JavaScript linter written in Rust by void(0). Oxlint is 50-100 times faster than ESLint and designed for performance-critical workflows, making it perfect for large codebases and CI environments.

Note: Oxlint doesn’t support all ESLint rules yet. Check the generated list of unsupported rules to see which rules from this config are not available in oxlint.

Enabling Oxlint

1. Install oxlint:

   pnpm add -D oxlint
   

2. Create your ESLint config as described above

3. Generate oxlint configuration from your ESLint config:

   pnpx @oxlint/migrate ./eslint.config.js
   

4. Enable oxlint in your configuration:

   export default defineConfig({
     typescript: true,
     vue: true,
     oxlint: true, // Enable oxlint support
   })
   

   For TypeScript projects, you might want to enable DTS checking:

   export default defineConfig({
     typescript: true,
     oxlint: {
       dts: true, // Check .d.ts files with TypeScript rules
     },
   })
   

Inspect

You can inspect your ESLint configuration using the interactive configuration inspector:

pnpx @eslint/config-inspector --config eslint.config.js

Or add it as a script to your package.json:

{
  "scripts": {
    "lint:inspect": "pnpx @eslint/config-inspector --config eslint.config.js"
  }
}

Inspired By

This configuration is inspired by and builds upon the excellent work of:

• @logux/eslint-config
• @sxzz/eslint-config
• @antfu/eslint-config

Contributing

This package can be installed directly from the repository, thanks to our pure JavaScript implementation with TypeScript definitions provided via .d.ts files — no compilation step required.

pnpm add -D github:fandsdev/eslint-config-fans

All versions follow Semantic Versioning.