OXC Config Fans

Opinionated and flexible oxlint and oxfmt configs with TypeScript, Vue, React, Next.js support — the OXC counterpart of eslint-config-fans.

• Modern: Rust-powered toolchain 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: 50–100x faster linting and formatting than ESLint/Prettier
• Actively maintained and production-tested across diverse client projects at FANS — both new and existing

oxlint default plugins: javascript, unicorn, promise, node, de-morgan, e18e

oxlint optional plugins: typescript, vue, react, nextjs, vitest, perfectionist, vuejs-accessibility, @tanstack/query

View unsupported rules

Table of Contents

• oxfmt
  • Usage
  • Customization
    • Available Options
    • Ignores
    • Sort Imports
    • Sort Tailwind CSS Classes
    • Overrides
• oxlint
  • Usage
  • Customization
    • Available Options
    • Ignores
    • Rule Categories
    • TypeScript
    • TypeScript Type-Aware Linting
    • Ecosystem Performance
    • Named Import and Export Sorting
    • Opinionated Mode
    • Custom Configurations and Overrides
  • Framework Support
    • Vue
    • React
    • Next.js
    • Not Supported Frameworks
• Not Supported
• Inspired By
• Contributing

oxfmt

oxfmt is a Rust-based code formatter by void(0) — a significantly faster alternative to Prettier.

This config ships with opinionated formatting defaults and import sorting out of the box.

Usage

Install the packages:

pnpm add -D oxc-config-fans oxfmt

Create oxfmt.config.ts in your project root:

import { defineConfig } from 'oxc-config-fans/oxfmt'

export default defineConfig()

Customization

Available Options

interface DefineConfigOptions {
	// Glob patterns for files and directories to ignore
	ignorePatterns?: string[] // default: []

	// Sort imports — true uses package defaults, object shallow-merges with them
	sortImports?: boolean | SortImportsConfig // default: true

	// Sort Tailwind CSS classes — true uses package defaults ({ functions: ['clsx'] })
	sortTailwindcss?: boolean | SortTailwindcssConfig // default: false
}

Ignores

You can specify files and directories to skip formatting:

export default defineConfig({
	ignorePatterns: ['legacy/**', 'generated/**'],
})

Sort Imports

Import sorting is enabled by default using a group order compatible with eslint-plugin-perfectionist:

export default defineConfig({
	sortImports: true, // default
})

You can also pass a partial SortImportsConfig to shallow-merge with the defaults:

export default defineConfig({
	sortImports: {
		newlinesBetween: true,
	},
})

Sort Tailwind CSS Classes

Tailwind CSS class sorting is disabled by default. When enabled, it sorts classes in clsx() calls by default:

export default defineConfig({
	sortTailwindcss: true,
})

You can extend the default functions list:

export default defineConfig({
	sortTailwindcss: {
		functions: ['clsx', 'cn', 'cva'],
	},
})

Overrides

Use the second argument to pass raw OxfmtConfig overrides:

export default defineConfig({ sortImports: true }, { printWidth: 100 })

oxlint

oxlint is a Rust-based linter by void(0) — 50–100x faster than ESLint, 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 eslint-config-fans are not available.

Usage

Install the packages:

pnpm add -D oxc-config-fans oxlint @e18e/eslint-plugin eslint-plugin-de-morgan

Create oxlint.config.ts in your project root:

import { defineConfig } from 'oxc-config-fans/oxlint'

export default defineConfig()

Customization

Available Options

interface DefineConfigOptions {
	// Glob patterns for files and directories to ignore
	ignorePatterns?: string[] // default: []

	// Enable or configure lint rule categories
	categories?: OxlintConfig['categories'] // default: { correctness: 'error', suspicious: 'error' }

	// Global linter options (e.g. typeAware, typeCheck)
	options?: OxlintConfig['options'] // default: { typeAware: true, typeCheck: true }

	// Enable TypeScript-specific lint rules
	typescript?: boolean // default: false

	// Enable Vue-specific lint rules
	vue?: boolean | { a11y?: boolean } // default: false

	// Enable React-specific lint rules
	react?: boolean | { compiler?: boolean } // default: false

	// Enable Next.js-specific lint rules (also enables React rules)
	nextjs?: boolean | { compiler?: boolean } // default: false

	// Enable TanStack Query lint rules
	query?: boolean // default: false

	// Enable Vitest lint rules
	vitest?: boolean // default: false

	// Enable ecosystem performance (e18e) rules
	e18e?: boolean // default: true

	// Enable Perfectionist rules for sorting named imports/exports and export statements
	perfectionist?: boolean // default: false

	// Enable opinionated style rules
	opinionated?: boolean // default: false

	// Merge additional raw OxlintConfig objects into the final config
	extends?: OxlintConfig[]
}

Ignores

You can extend the ignore patterns to skip specific files:

export default defineConfig({
	ignorePatterns: ['legacy/**', 'generated/**'],
})

Rule Categories

By default, the config enables correctness and suspicious rule categories as errors. You can override the severity of any category:

export default defineConfig({
	categories: {
		correctness: 'error',
		suspicious: 'warn',
		perf: 'warn',
	},
})

See the oxlint config reference for all available categories.

TypeScript

Enable TypeScript-specific lint rules. Requires oxlint-tsgolint:

pnpm add -D oxlint-tsgolint

export default defineConfig({
	typescript: true,
})

This enables type-aware linting (typeAware and typeCheck) for .ts and .vue files, including rules like typescript/no-explicit-any, typescript/consistent-type-definitions, and typescript/no-misused-promises.

TypeScript Type-Aware Linting

When TypeScript is enabled, type-aware linting rules are active by default (typeAware: true and typeCheck: true). You can disable them via the options field:

export default defineConfig({
	typescript: true,
	options: {
		typeAware: false,
		typeCheck: false,
	},
})

For new projects, we recommend keeping type-aware mode enabled. For legacy codebases or gradual adoption, you may want to start with it disabled and enable it later.

Ecosystem Performance

The e18e plugin enforces modernization, module replacement, and performance improvement rules. It is enabled by default and can be disabled if needed:

export default defineConfig({
	e18e: false,
})

Note: Unlike eslint-config-fans, fine-grained control over individual rule sets (modernization, moduleReplacements, performanceImprovements) is not yet supported.

Named Import and Export Sorting

Perfectionist rules for sorting named imports/exports and export statements are disabled by default (eslint-plugin-perfectionist required):

pnpm add -D eslint-plugin-perfectionist

export default defineConfig({
	perfectionist: true,
})

Note: For sorting import statement order, use oxfmt's built-in sortImports — it handles that at the formatter level with zero runtime cost.

Opinionated Mode

Opinionated rules are disabled by default. When enabled, they add stricter conventions such as filename casing and Array.forEach restrictions:

export default defineConfig({
	opinionated: true,
})

Custom Configurations and Overrides

You can merge additional raw OxlintConfig objects into the final config using the extends option:

import { defineConfig } from 'oxc-config-fans/oxlint'
import type { OxlintConfig } from 'oxlint'

const overrides: OxlintConfig = {
	rules: {
		'no-console': 'warn',
	},
}

export default defineConfig({
	typescript: true,
	extends: [overrides],
})

Framework Support

Vue

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

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

With vuejs-accessibility rules (eslint-plugin-vuejs-accessibility required):

pnpm add -D eslint-plugin-vuejs-accessibility

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

React

Enable React and React Compiler lint rules (eslint-plugin-react-hooks required):

pnpm add -D eslint-plugin-react-hooks

export default defineConfig({
	react: true,
})

React Compiler rules are enabled by default when React is active. You can opt out:

export default defineConfig({
	react: { compiler: false },
})

Next.js

Full compatibility with Next.js, automatically enabling React rules alongside Next.js-specific rules (eslint-plugin-react-hooks required):

pnpm add -D eslint-plugin-react-hooks

export default defineConfig({
	nextjs: true,
})

React Compiler rules are enabled by default when Next.js is active. You can opt out:

export default defineConfig({
	nextjs: { compiler: false },
})

Not Supported Frameworks

Nuxt and Astro from eslint-config-fans are not yet supported.

Not Supported

oxlint doesn't support all ESLint rules from eslint-config-fans. See the full list of unsupported rules.

We recommend running oxlint alongside eslint-config-fans — oxlint for fast feedback during development, ESLint for comprehensive checks in CI. See the official guide on running both together.

Inspired By

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

• @logux/oxc-configs
• @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/oxc-config-fans

All versions follow Semantic Versioning.