### Full-Stack Example: Install Dependencies

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Install necessary dependencies for a full-stack Next.js, React, TypeScript project using oxc-config-fans.

```bash
pnpm add -D \
  oxc-config-fans oxfmt oxlint \
  oxlint-tsgolint \
  eslint-plugin-react-hooks \
  @tanstack/eslint-plugin-query \
  eslint-plugin-perfectionist
```

--------------------------------

### Install Dependencies

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Install oxc-config-fans, oxfmt, and oxlint as development dependencies.

```bash
pnpm add -D oxc-config-fans oxfmt oxlint
```

--------------------------------

### Install Plugins for Full-Featured Next.js

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Installs necessary plugins for a full-featured Next.js setup, including React Hooks, TanStack Query, and Vitest testing rules.

```bash
pnpm add -D eslint-plugin-react-hooks @tanstack/eslint-plugin-query
```

--------------------------------

### Install Packages

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Install the necessary packages for oxc-config-fans and its related tools.

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

--------------------------------

### Install Dependencies

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Install oxc-config-fans, oxfmt, oxlint, and oxlint-tsgolint as development dependencies.

```bash
pnpm add -D oxc-config-fans oxfmt oxlint oxlint-tsgolint
```

--------------------------------

### Minimal oxlint Configuration Setup

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Sets up a minimal configuration for oxlint using the defineConfig function. This is a good starting point for most projects.

```typescript
import { defineConfig } from 'oxc-config-fans/oxlint'
export default defineConfig()
```

--------------------------------

### Install Git Hooks Dependencies

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Install simple-git-hooks and nano-staged for pre-commit checks.

```bash
pnpm add -D simple-git-hooks nano-staged
```

--------------------------------

### Install oxc-config-fans from Repository

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Install the oxc-config-fans package directly from its GitHub repository.

```bash
pnpm add -D github:fandsdev/oxc-config-fans
```

--------------------------------

### Usage Example for OxfmtConfig and DefineConfigOptions

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Demonstrates how to import and use `OxfmtConfig` and `DefineConfigOptions` from `oxc-config-fans/oxfmt`. Shows setting sorting options and a basic configuration.

```typescript
import type { OxfmtConfig, DefineConfigOptions } from 'oxc-config-fans/oxfmt'

const options: DefineConfigOptions = {
  sortImports: true,
}

const config: OxfmtConfig = { semi: false }
```

--------------------------------

### Install TypeScript Plugin for oxlint

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Install the necessary TypeScript plugin for oxlint.

```bash
pnpm add -D oxlint-tsgolint
```

--------------------------------

### Example oxlint Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

A minimal example of an `oxlint.config.ts` file using `defineConfig` from `oxc-config-fans/oxlint`.

```typescript
// oxlint.config.ts
import { defineConfig } from 'oxc-config-fans/oxlint'
export default defineConfig()
```

--------------------------------

### Example oxfmt Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

A minimal example of an `oxfmt.config.ts` file using `defineConfig` from `oxc-config-fans/oxfmt`.

```typescript
// oxfmt.config.ts
import { defineConfig } from 'oxc-config-fans/oxfmt'
export default defineConfig()
```

--------------------------------

### Full-Stack Example: package.json Scripts

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Define npm scripts in package.json for running oxlint and oxfmt commands, including linting, formatting, and checking.

```json
{
  "scripts": {
    "lint": "oxlint",
    "format": "oxfmt",
    "format:check": "oxfmt --check",
    "check": "pnpm run format:check && pnpm run lint"
  }
}
```

--------------------------------

### Install Plugin as Peer Dependency

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Use this command to install a plugin as a development dependency when encountering a 'Plugin Not Found' error.

```bash
pnpm add -D plugin-name
```

--------------------------------

### Install React Hooks Plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Install the required plugin for React hooks linting.

```bash
pnpm add -D eslint-plugin-react-hooks
```

--------------------------------

### Install Vue Accessibility Plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Install the necessary plugin for Vue accessibility linting.

```bash
pnpm add -D eslint-plugin-vuejs-accessibility
```

--------------------------------

### Install @e18e/eslint-plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Install the @e18e/eslint-plugin using pnpm. This plugin focuses on ecosystem performance and modernization.

```bash
pnpm add -D @e18e/eslint-plugin
```

--------------------------------

### Full-Stack Example: oxfmt Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure oxfmt for a full-stack project, including sorting imports, Tailwind CSS classes, and ignoring specific directories.

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

export default defineConfig({
  sortImports: true,
  sortTailwindcss: {
    functions: ['clsx', 'cn'],
  },
  ignorePatterns: [
    '.next/**',
    'dist/**',
    'coverage/**',
    'node_modules/**',
  ],
})
```

--------------------------------

### Install Oxc VS Code Extension

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Install the Oxc extension for VS Code to enable format on save.

```bash
code --install-extension OxcDev.oxc-vscode
```

--------------------------------

### Custom oxfmt Configuration Example

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/configuration.md

Demonstrates how to customize oxfmt settings, including ignore patterns, import sorting, and Tailwind CSS functions, along with overriding raw oxfmt config.

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

export default defineConfig(
  {
    ignorePatterns: ['dist/**', 'build/**'],
    sortImports: {
      newlinesBetween: true, // Add blank lines between import groups
    },
    sortTailwindcss: {
      functions: ['clsx', 'cn', 'cva'], // Extend default functions
    },
  },
  {
    printWidth: 120, // Raw OxfmtConfig override
  }
)
```

--------------------------------

### Install oxc-config-fans and oxfmt

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Install the necessary packages for oxfmt configuration. This command is used to add oxc-config-fans and oxfmt as development dependencies.

```bash
pnpm add -D oxc-config-fans oxfmt
```

--------------------------------

### Usage Example for Oxlint DefineConfigOptions

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Illustrates importing and using `DefineConfigOptions` from `oxc-config-fans/oxlint`. Shows enabling TypeScript and React compiler, and defining rule overrides.

```typescript
import type { DefineConfigOptions } from 'oxc-config-fans/oxlint'
import type { OxlintConfig } from 'oxlint'

const options: DefineConfigOptions = {
  typescript: true,
  react: { compiler: true },
}

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

--------------------------------

### Install @tanstack/eslint-plugin-query

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Install the @tanstack/eslint-plugin-query using pnpm. This plugin enforces TanStack Query hook patterns and best practices.

```bash
pnpm add -D @tanstack/eslint-plugin-query
```

--------------------------------

### Full-Stack Example: oxlint Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure oxlint for a full-stack project, enabling TypeScript, Next.js, TanStack Query, Vitest, and other features. Also ignores specific directories.

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

export default defineConfig({
  typescript: true,
  nextjs: true,
  query: true,
  vitest: true,
  perfectionist: true,
  e18e: true,
  ignorePatterns: [
    '.next/**',
    'dist/**',
    'coverage/**',
    'node_modules/**',
    'generated/**',
  ],
})
```

--------------------------------

### Install de-morgan Plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Install the de-morgan ESLint plugin using pnpm. This plugin simplifies De Morgan's law expressions.

```bash
pnpm add -D eslint-plugin-de-morgan
```

--------------------------------

### ESLint and Prettier Configuration for Import Sorting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Example of configuring ESLint with perfectionist and Prettier with import sorting plugin.

```javascript
// .eslintrc.js
{
  extends: ['plugin:perfectionist/recommended'],
}

// .prettierrc
{ "plugins": ["prettier-plugin-sort-imports"] }
```

--------------------------------

### Configure perfectionist Plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Example configuration for the perfectionist ESLint plugin, which sorts named imports and exports. Ensure you have installed the plugin separately.

```typescript
{
  order: 'asc',
  type: 'natural',
}
```

--------------------------------

### Enable React with Compiler Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-defineconfig.md

Enables React linting rules, including compiler optimizations. Requires installing `eslint-plugin-react-hooks`.

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

export default defineConfig({
  typescript: true,
  react: true,
})
```

```bash
pnpm add -D eslint-plugin-react-hooks
```

--------------------------------

### Install perfectionist Plugin

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Install the perfectionist ESLint plugin using pnpm. This plugin is used for sorting named imports and exports.

```bash
pnpm add -D eslint-plugin-perfectionist
```

--------------------------------

### Enable TypeScript Linting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-defineconfig.md

Enables TypeScript support and type-aware linting. Requires installing `oxlint-tsgolint`.

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

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

```bash
pnpm add -D oxlint-tsgolint
```

--------------------------------

### Define defineConfig for oxlint

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Use `defineConfig` from `oxc-config-fans/oxlint` to configure oxlint. Example shown with TypeScript support enabled.

```typescript
import { defineConfig } from 'oxc-config-fans/oxlint'
export default defineConfig({ typescript: true })
```

--------------------------------

### Define oxlint Configuration with Framework Plugins

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Example of using oxlint's defineConfig to enable various framework plugins like TypeScript, Vue, React, Next.js, and query, along with other features.

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

export default defineConfig({
  typescript: true,
  vue: { a11y: true },
  react: { compiler: true },
  nextjs: true,
  query: true,
  vitest: true,
  perfectionist: true,
  opinionated: false,
  e18e: true,
})
```

--------------------------------

### Define oxfmt Configuration with Overrides

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Example of using oxfmt's defineConfig with both options and overrides to customize import sorting, Tailwind CSS sorting, ignore patterns, and print width.

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

export default defineConfig(
  {
    sortImports: true,
    sortTailwindcss: { functions: ['clsx', 'cn'] },
    ignorePatterns: ['.next/**'],
  },
  { printWidth: 100 }
)
```

--------------------------------

### Enable Vue with Accessibility Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-defineconfig.md

Enables Vue.js linting with accessibility rules. Requires installing `eslint-plugin-vuejs-accessibility`.

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

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

```bash
pnpm add -D eslint-plugin-vuejs-accessibility
```

--------------------------------

### Full-Featured Next.js Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Enables a comprehensive setup for Next.js projects, including TypeScript, Next.js rules, TanStack Query, Vitest testing rules, and import/export sorting.

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

export default defineConfig({
  typescript: true,
  nextjs: true,
  query: true,
  vitest: true,
  perfectionist: true,
})
```

--------------------------------

### Define defineConfig for oxfmt

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Use `defineConfig` from `oxc-config-fans/oxfmt` to configure oxfmt. Example shown with `sortImports` enabled.

```typescript
import { defineConfig } from 'oxc-config-fans/oxfmt'
export default defineConfig({ sortImports: true })
```

--------------------------------

### Apply Raw Overrides to oxfmt Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Pass raw `OxfmtConfig` overrides to the `defineConfig` function to fine-tune formatting options. This example sets a custom print width.

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

--------------------------------

### Enable TanStack Query Plugin for Data Fetching

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure oxlint to enable the TanStack Query plugin for enforcing patterns in data fetching logic. Ensure @tanstack/eslint-plugin-query is installed.

```bash
pnpm add -D @tanstack/eslint-plugin-query
```

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

export default defineConfig({
  typescript: true,
  react: true,
  query: true,
})
```

--------------------------------

### Sort Imports and Exports with Perfectionist and oxfmt

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Example demonstrating the effect of combining oxfmt for import statement sorting and Perfectionist for member sorting within statements.

```typescript
// Before
import { z, a, m } from 'zod'
import { Router, Request, Response } from 'express'
export { Handler, Request, Router }

// After (with perfectionist)
import { a, m, z } from 'zod'
import { Request, Response, Router } from 'express'
export { Handler, Request, Router } // Already sorted in this case
```

--------------------------------

### Basic Configuration Files

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Create these configuration files for oxfmt and oxlint to enable basic formatting and linting.

```typescript
// oxfmt.config.ts
import { defineConfig } from 'oxc-config-fans/oxfmt'
export default defineConfig()

// oxlint.config.ts
import { defineConfig } from 'oxc-config-fans/oxlint'
export default defineConfig({ typescript: true })
```

--------------------------------

### Correct Import Statements

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Demonstrates the correct way to import defineConfig from the specific oxfmt and oxlint entry points.

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

--------------------------------

### Run Formatter

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Execute the formatter to format your code.

```bash
pnpm format
```

--------------------------------

### Initialize Git Hooks

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Initialize simple-git-hooks to enable pre-commit checks.

```bash
pnpm exec simple-git-hooks
```

--------------------------------

### Format Code with oxfmt

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Run oxfmt to format all files in the project.

```bash
oxfmt  # Format all files
```

--------------------------------

### Re-enable e18e Rules After Modernization

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Example of re-enabling e18e performance rules in oxlint after a codebase has been modernized.

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

export default defineConfig({
  typescript: true,
  e18e: true, // Back on, codebase modernized
})
```

--------------------------------

### Verify oxlint Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Run oxlint to check for any failing rules before switching completely.

```bash
oxlint
```

--------------------------------

### Rule Set Composition Algorithm

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Outlines the step-by-step algorithm used by `defineConfig(options)` to build a merged `OxlintConfig`. It details the order of applying base rules, feature-specific configs, and user-provided options.

```plaintext
1. Start with base rule set
2. Add: javascript, imports, promise, node, de-morgan, unicorn
3. If typescript: add typescript config
4. If vue: add vue config
5. If vue.a11y: add vue-a11y config
6. If react: add react config
7. If nextjs:
   - If !react explicitly disabled: add react config
   - add nextjs config
8. If (react OR nextjs) AND compiler not disabled: add react-compiler config
9. If query: add query config
10. If vitest: add vitest config
11. If perfectionist: add perfectionist config
12. If e18e (default true): add e18e config
13. If opinionated: add opinionated config
14. For each config in extends array: add config
15. If categories provided: merge into categories
16. If options provided: merge into options
17. If ignorePatterns provided: set ignorePatterns
18. Return merged OxlintConfig
```

--------------------------------

### Basic oxlint Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Create a basic oxlint configuration file enabling TypeScript support. Add other framework configurations as needed.

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

export default defineConfig({
  typescript: true,
  // Add other frameworks as needed
})
```

--------------------------------

### Configure Git Hooks in package.json

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Configure simple-git-hooks and nano-staged in package.json to run oxfmt and oxlint before committing.

```json
{
  "simple-git-hooks": {
    "pre-commit": "./node_modules/.bin/nano-staged"
  },
  "nano-staged": {
    "*.{js,ts,json,md}": "oxfmt",
    "*.{js,ts}": "oxlint"
  }
}
```

--------------------------------

### Adjust Rule Severity Levels (oxlint - Suspicious)

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Modify the severity level for entire rule categories in oxlint. This example downgrades 'suspicious' patterns to warnings.

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

export default defineConfig({
  typescript: true,
  categories: {
    correctness: 'error',
    suspicious: 'warn',
  },
})
```

--------------------------------

### Enable Perfectionist Plugin for Import/Export Sorting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure oxlint to enable the Perfectionist plugin for sorting members within import and export statements. Ensure eslint-plugin-perfectionist is installed.

```bash
pnpm add -D eslint-plugin-perfectionist
```

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

export default defineConfig({
  typescript: true,
  perfectionist: true,
})
```

--------------------------------

### Customizing Specific Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Modify individual rule behaviors by providing an `overrides` object with a `rules` map. For example, change the severity of the `no-console` rule from error to warning.

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

const overrides: OxlintConfig = {
  rules: {
    'no-console': 'warn',  // Make console warnings instead of errors
  },
}

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

--------------------------------

### Framework Configuration Options

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Enable framework-specific configurations by setting the corresponding option in your config file.

```typescript
typescript: true
react: true
nextjs: true
vue: true
vue: { a11y: true }
```

--------------------------------

### Basic Configuration with defineConfig

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Use `defineConfig` to apply pre-configured rule sets for JavaScript, imports, promises, Node.js, and modern best practices. Enable additional rules for TypeScript and React by setting their respective options to `true`.

```typescript
// This automatically applies:
// - Base JavaScript rules (88+ rules)
// - Import organization rules
// - Promise handling rules
// - Node.js-specific rules
// - De Morgan's law rules
// - Unicorn modernization rules (100+ rules)
export default defineConfig({
  typescript: true,  // + TypeScript rules (30+ rules)
  react: true,       // + React rules
  // ... etc
})
```

--------------------------------

### Enable oxfmt for Tailwind CSS Class Sorting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure oxfmt to enable sorting of Tailwind CSS classes within utility function calls. Ensure oxfmt is installed.

```bash
pnpm add -D oxfmt
```

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

export default defineConfig({
  sortTailwindcss: true, // default functions: ['clsx']
})
```

--------------------------------

### Update CI to Use oxlint and oxfmt

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Configure CI to run oxlint for linting and oxfmt for formatting checks.

```yaml
- run: oxlint
- run: oxfmt --check
```

--------------------------------

### Run Linter

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Execute the linter to check your code for issues.

```bash
pnpm lint
```

--------------------------------

### React Component Library Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Sets up oxlint for publishing React component libraries. It enables TypeScript, React, perfectionist, and opinionated rules for consistency and quality.

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

export default defineConfig({
  typescript: true,
  react: true,
  perfectionist: true,
  opinionated: true,
})
```

--------------------------------

### Type-Safe Configuration Building with defineConfig

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/types.md

Demonstrates how to use the defineConfig function from 'oxc-config-fans/oxlint' to create a type-safe configuration object. Imports necessary types and defines options for TypeScript, React, and Vue.

```typescript
import { defineConfig } from 'oxc-config-fans/oxlint'
import type { DefineConfigOptions } from 'oxc-config-fans/oxlint'

const options: DefineConfigOptions = {
  typescript: true,
  react: { compiler: true },
  vue: { a11y: true },
}

// Type-safe configuration building
const config = defineConfig(options)
```

--------------------------------

### GitHub Actions Workflow for Linting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Set up a GitHub Actions workflow to automatically lint and check formatting on push and pull requests.

```yaml
name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm lint
      - run: pnpm format:check
```

--------------------------------

### Disabled Unicorn Rules Example

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

This snippet lists rules from the unicorn plugin that are disabled by default in the base configuration to align with eslint-config-fans. These rules focus on code style, array manipulation, and modern JavaScript patterns.

```configuration
unicorn/consistent-function-scoping (disabled)
unicorn/explicit-length-check (disabled)
unicorn/filename-case (disabled, enabled in opinionated mode)
unicorn/no-abusive-eslint-disable (disabled)
unicorn/no-array-callback-reference (disabled)
unicorn/no-array-for-each (disabled, enabled in opinionated mode)
unicorn/no-array-reduce (disabled)
unicorn/no-null (disabled)
unicorn/no-object-as-default-parameter (disabled)
unicorn/no-useless-undefined (disabled)
unicorn/prefer-dom-node-dataset (disabled)
unicorn/prefer-global-this (disabled)
unicorn/require-post-message-target-origin (disabled)
```

--------------------------------

### Common Commands

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Use these pnpm commands to format and lint your project files. The lint command has a limited fix capability.

```bash
pnpm format           # Format all files
pnpm format:check     # Check formatting
pnpm lint             # Lint all files
pnpm lint --fix       # Try to fix issues (limited)
```

--------------------------------

### oxfmt.defineConfig

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Build an oxfmt configuration with opinionated defaults and customization options. It accepts an optional configuration object and overrides for fine-grained control.

```APIDOC
## oxfmt.defineConfig()

### Description
Build an oxfmt configuration with opinionated defaults and customization options. It accepts an optional configuration object and overrides for fine-grained control.

### Method
Function

### Parameters
#### Parameters
- `options` (DefineConfigOptions) - Optional - Configuration object for formatter settings.
- `overrides` (Partial<OxfmtConfig>) - Optional - Raw OxfmtConfig overrides.

### Returns
`OxfmtConfig` object suitable for `oxfmt.config.ts`

### Example
```typescript
import { defineConfig } from 'oxc-config-fans/oxfmt'

export default defineConfig(
  {
    sortImports: true,
    sortTailwindcss: { functions: ['clsx', 'cn'] },
    ignorePatterns: ['.next/**'],
  },
  { printWidth: 100 }
)
```
```

--------------------------------

### Update npm Scripts for Linting and Formatting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Configure npm scripts to use oxlint for linting and oxfmt for formatting.

```json
{
  "scripts": {
    "lint": "oxlint",
    "lint:eslint": "eslint .",
    "format": "oxfmt"
  }
}
```

--------------------------------

### Configure oxlint with Plugins

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Use defineConfig to configure the oxlint linter by composing rule sets and enabling framework plugins. Alternatively, use a raw oxlint configuration object.

```typescript
import { defineConfig, type DefineConfigOptions } from 'oxc-config-fans/oxlint'
import type { OxlintConfig } from 'oxlint'

// Configure linter with plugins
const config = defineConfig({
  typescript: true,
  vue: { a11y: true },
  react: true,
  query: true,
})

// Or use oxlint config directly
const rawConfig: OxlintConfig = {
  rules: {
    'no-console': 'warn',
  },
}
```

--------------------------------

### Enable Next.js Support

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Configure oxlint for Next.js projects, automatically enabling React rules.

```typescript
export default defineConfig({
	nextjs: true,
})
```

--------------------------------

### Enable Vue and TypeScript Support

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Configure oxlint for Vue projects with TypeScript integration.

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

--------------------------------

### oxlint.defineConfig

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Build an oxlint configuration by composing rule sets and enabling framework plugins. It accepts an optional configuration object for customization.

```APIDOC
## oxlint.defineConfig()

### Description
Build an oxlint configuration by composing rule sets and enabling framework plugins. It accepts an optional configuration object for customization.

### Method
Function

### Parameters
#### Parameters
- `options` (DefineConfigOptions) - Optional - Configuration object for enabling plugins and customizing rules.

### Returns
`OxlintConfig` object suitable for `oxlint.config.ts`

### Example
```typescript
import { defineConfig } from 'oxc-config-fans/oxlint'

export default defineConfig({
  typescript: true,
  vue: { a11y: true },
  react: { compiler: true },
  nextjs: true,
  query: true,
  vitest: true,
  perfectionist: true,
  opinionated: false,
  e18e: true,
})
```
```

--------------------------------

### Load React ESLint Plugins

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Load ESLint plugins for React and React performance.

```typescript
plugins: ['react', 'react-perf']
```

--------------------------------

### Run oxlint for Development and CI

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Commands for running oxlint during development (fast, no type checking) and in CI (with type checking via tsc).

```bash
# Development
oxlint  # Fast, no type checking

# CI
tsc --noEmit  # Type checking via TypeScript
oxlint        # Lint without type checking
```

--------------------------------

### Basic defineConfig Usage

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxfmt-defineconfig.md

Use defineConfig without any options to apply all opinionated defaults.

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

export default defineConfig()
```

--------------------------------

### Configure VS Code Settings for Format on Save

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Configure VS Code settings.json to enable format on save with the Oxc extension.

```json
{
  "[javascript]": {
    "editor.defaultFormatter": "OxcDev.oxc-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "OxcDev.oxc-vscode",
    "editor.formatOnSave": true
  }
}
```

--------------------------------

### Next.js Full-Featured oxlint Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Sets up a comprehensive oxlint configuration for Next.js projects, including TypeScript, query, Vitest, and perfectionist support.

```typescript
import { defineConfig } from 'oxc-config-fans/oxlint'
export default defineConfig({
  typescript: true,
  nextjs: true,
  query: true,
  vitest: true,
  perfectionist: true,
})
```

--------------------------------

### Update package.json Scripts for Linting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Configure package.json scripts to run oxlint for fast feedback and ESLint for full checks, enabling a parallel linting strategy.

```json
{
  "scripts": {
    "lint": "oxlint && eslint",
    "lint:fast": "oxlint",
    "lint:full": "eslint"
  }
}
```

--------------------------------

### oxc-config-fans Configuration for Import Sorting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Configure oxfmt for import sorting and oxlint for perfectionist rules.

```typescript
// oxfmt.config.ts
defineConfig({ sortImports: true })

// oxlint.config.ts
defineConfig({ perfectionist: true })
```

--------------------------------

### Next.js Formatter Configuration with Ignore Patterns

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configures oxfmt for Next.js projects, specifying ignore patterns for the .next and out directories to prevent formatting issues in build artifacts.

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

export default defineConfig({
  ignorePatterns: ['.next/**', 'out/**'],
})
```

--------------------------------

### GitLab CI Configuration for Linting

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Configure GitLab CI to automatically lint and check formatting on every pipeline.

```yaml
lint:
  image: node:22
  cache:
    paths:
      - node_modules/
  before_script:
    - pnpm install
  script:
    - pnpm lint
    - pnpm format:check
```

--------------------------------

### Enable React and React Compiler Support

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Configure oxlint to enable React and React Compiler lint rules.

```typescript
export default defineConfig({
	react: true,
})
```

--------------------------------

### Monorepo App Configuration (Next.js)

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure an application's oxlint settings in a monorepo by extending a shared Next.js configuration.

```typescript
import { nextConfig } from '@monorepo/config'

export default nextConfig
```

--------------------------------

### Add Scripts to package.json

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Add scripts to your package.json for linting and formatting.

```json
{
  "scripts": {
    "lint": "oxlint",
    "format": "oxfmt",
    "format:check": "oxfmt --check"
  }
}
```

--------------------------------

### Configure oxfmt with Defaults

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Use defineConfig to configure the oxfmt formatter with opinionated defaults and custom ignore patterns or import sorting preferences.

```typescript
import { defineConfig, type OxfmtConfig } from 'oxc-config-fans/oxfmt'

// Configure formatter with defaults
const config = defineConfig({
  ignorePatterns: ['dist/**'],
  sortImports: true,
  sortTailwindcss: false,
})

// Or use raw oxfmt config
const rawConfig: OxfmtConfig = {
  semi: true,
  printWidth: 120,
}
```

--------------------------------

### Extend with Custom Configurations

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Merge additional raw OxlintConfig objects into the final config using the extends option.

```typescript
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],
})
```

--------------------------------

### Checking Formatting Without Fixing

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Use `pnpm format:check` to see which formatting issues exist without automatically applying fixes. This is useful for CI environments.

```bash
pnpm format:check
```

--------------------------------

### Package JSON Exports

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Defines the named entry points for the oxc-config-fans package in package.json, specifying import paths for oxfmt and oxlint modules.

```json
{
  "exports": {
    "./oxfmt": {
      "types": "./src/oxfmt/index.d.ts",
      "import": "./src/oxfmt/index.js"
    },
    "./oxlint": {
      "types": "./src/oxlint/index.d.ts",
      "import": "./src/oxlint/index.js"
    },
    "./package.json": "./package.json"
  }
}
```

--------------------------------

### ESLint Configuration for Vue Accessibility Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Extend ESLint with the recommended Vue.js accessibility plugin.

```javascript
// .eslintrc.js
{
  extends: ['plugin:vuejs-accessibility/recommended'],
}
```

--------------------------------

### Monorepo Library Configuration (Base)

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Configure a library's oxlint settings in a monorepo by extending a shared base configuration.

```typescript
import { baseConfig } from '@monorepo/config'

export default baseConfig
```

--------------------------------

### Import OxlintConfig Type

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/types.md

Imports the OxlintConfig type from the 'oxlint' package. This type represents the complete oxlint configuration object.

```typescript
import type { OxlintConfig } from 'oxlint'
```

--------------------------------

### Monorepo Shared Configuration (Next.js)

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Define a Next.js-specific configuration for oxlint in a monorepo. This configuration includes settings for Next.js, TanStack Query, and Vitest.

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

export const nextConfig: OxlintConfig = defineConfig({
  typescript: true,
  nextjs: true,
  query: true,
  vitest: true,
})
```

--------------------------------

### Next.js Project Lint Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/getting-started.md

Configure oxlint for Next.js projects by enabling TypeScript and Next.js linting.

```typescript
// oxlint.config.ts
import { defineConfig } from 'oxc-config-fans/oxlint'

export default defineConfig({
  typescript: true,
  nextjs: true,  // Enable Next.js linting (includes React)
})
```

--------------------------------

### Load Built-in ESLint Plugins

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

Load common built-in ESLint plugins like javascript, import, promise, node, and unicorn.

```typescript
plugins: ['javascript', 'import', 'promise', 'node', 'unicorn']
```

--------------------------------

### Import Plugin Rules

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/plugins-reference.md

This snippet lists the rules provided by the import plugin, which focuses on import statement organization and consistency. Some rules are disabled by default.

```text
import/first — All imports come before other statements
import/no-duplicates — No duplicate import sources
import/no-mutable-exports — No reassignable variable exports
import/no-named-default — No default import as named
import/no-webpack-loader-syntax — No webpack loader syntax
import/consistent-type-specifier-style — Enforce consistent type import style
import/no-unassigned-import — Disabled by default
```

--------------------------------

### Enable All Supported Plugins

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-defineconfig.md

Enables a comprehensive set of plugins including TypeScript, Vue with accessibility, React, Next.js, Query, Vitest, e18e, Perfectionist, and Opinionated.

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

export default defineConfig({
  typescript: true,
  vue: { a11y: true },
  react: true,
  nextjs: true,
  query: true,
  vitest: true,
  e18e: true,
  perfectionist: true,
  opinionated: true,
})
```

--------------------------------

### oxlint Configuration Interface

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Defines the options available for configuring oxlint, including ignore patterns, categories, and framework-specific settings.

```typescript
interface DefineConfigOptions {
  ignorePatterns?: string[]
  categories?: OxlintConfig['categories']
  options?: OxlintConfig['options']
  typescript?: boolean
  vue?: boolean | { a11y?: boolean }
  react?: boolean | { compiler?: boolean }
  nextjs?: boolean | { compiler?: boolean }
  query?: boolean
  vitest?: boolean
  e18e?: boolean      // default: true
  perfectionist?: boolean
  opinionated?: boolean
  extends?: OxlintConfig[]
}
```

--------------------------------

### Generate ESLint Results for Comparison

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Run ESLint to generate a JSON report of linting results, which can be used to compare against oxlint's findings and identify unsupported rules.

```bash
eslint . --format=json > eslint-results.json
```

--------------------------------

### oxfmt Configuration Interface

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/README.md

Defines the options available for configuring oxfmt, including ignore patterns and import sorting.

```typescript
interface DefineConfigOptions {
  ignorePatterns?: string[]
  sortImports?: boolean | SortImportsConfig    // default: true
  sortTailwindcss?: boolean | SortTailwindcssConfig  // default: false
}
```

--------------------------------

### oxfmt defineConfig

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/api-reference.md

Defines configuration for oxfmt, allowing customization of ignore patterns, import sorting, and Tailwind CSS sorting.

```APIDOC
## defineConfig (oxfmt)

### Description
Defines configuration for oxfmt. This function allows users to specify options for ignoring patterns, sorting imports, and sorting Tailwind CSS classes.

### Method
`defineConfig(options?: DefineConfigOptions)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`options` (DefineConfigOptions) - Optional - Configuration options for oxfmt.
  - `ignorePatterns` (string[]) - Optional - Patterns to ignore.
  - `sortImports` (boolean) - Optional - Whether to sort imports.
  - `sortTailwindcss` (boolean) - Optional - Whether to sort Tailwind CSS classes.

### Request Example
```typescript
import { defineConfig } from 'oxc-config-fans/oxfmt'

export default defineConfig({
  sortImports: true,
  sortTailwindcss: true
})
```

### Response
#### Success Response (200)
Returns a configuration object compatible with `OxfmtConfig`.

#### Response Example
```json
{
  "semi": false,
  "sortImports": true,
  "sortTailwindcss": true
}
```
```

--------------------------------

### Basic TypeScript Linting Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/usage-examples.md

Enables TypeScript linting with type checking by setting the 'typescript' option to true. This activates TypeScript-specific rules and type-aware linting.

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

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

--------------------------------

### Opinionated Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-rules-guide.md

Enables strict style conventions and filename casing rules. This configuration is disabled by default and requires explicit enabling.

```javascript
import { defineConfig } from 'oxlint'

export default defineConfig({
  opinionated: true,
})
```

--------------------------------

### Add Warnings Configuration

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/migration-guide.md

Configure correctness and suspicious categories to report errors.

```typescript
export default defineConfig({
  typescript: true,
  categories: {
    correctness: 'error',
    suspicious: 'error',
  },
  e18e: true,  // Enable after fixing errors
})
```

--------------------------------

### Enable Next.js Support

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/_autodocs/oxlint-defineconfig.md

Enables Next.js specific linting rules. Requires TypeScript support.

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

export default defineConfig({
  typescript: true,
  nextjs: true,
})
```

--------------------------------

### Configure oxfmt with Ignored Patterns

Source: https://github.com/fandsdev/oxc-config-fans/blob/main/README.md

Customize oxfmt by specifying files and directories to ignore during formatting. This prevents formatting in specified paths.

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