Oxlint

Oxlint

Blazingly fast linter (50-100x faster than ESLint) with zero-config defaults and built-in plugins.

Quick Start

# Install
bun add -D oxlint

# Run
oxlint

# Auto-fix
oxlint --fix

Configuration

Create .oxlintrc.json:

{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "jsx-a11y", "nextjs"],
  "rules": {
    "react/rules-of-hooks": "error",
    "react/exhaustive-deps": "error",
    "jsx-a11y/alt-text": "warn",
    "nextjs/no-img-element": "warn"
  },
  "ignorePatterns": [".next/**", "node_modules/**"]
}

Critical: Rule Namespaces

Oxlint uses different namespaces than ESLint:

Common mistakes:

• ❌ react-hooks/exhaustive-deps → ✅ react/exhaustive-deps
• ❌ @typescript-eslint/no-unused-vars → ✅ typescript/no-unused-vars

Available Plugins

Enable in config "plugins" array:

• react - React + Hooks
• react-perf - Performance
• jsx-a11y - Accessibility
• nextjs - Next.js rules
• typescript - TypeScript (default on)
• unicorn - Best practices (default on)
• import - Import validation
• jest / vitest - Testing

Migration from ESLint

# 1. Install/remove
bun add -D oxlint
bun remove eslint eslint-config-next

# 2. Update package.json
"lint": "oxlint"

# 3. Create .oxlintrc.json (see config above)

# 4. Delete old configs
rm eslint.config.mjs .eslintrc.* .eslintignore

Common Patterns

Next.js + TypeScript + a11y

{
  "plugins": ["react", "jsx-a11y", "nextjs"],
  "rules": {
    "react/rules-of-hooks": "error",
    "react/exhaustive-deps": "error",
    "react/jsx-key": "error",
    "jsx-a11y/alt-text": "warn",
    "jsx-a11y/click-events-have-key-events": "warn",
    "nextjs/no-img-element": "warn"
  }
}

CLI Flags

# Enable plugins
oxlint --react-plugin --jsx-a11y-plugin --nextjs-plugin

# Control categories
oxlint -D correctness -A no-debugger  # Deny correctness, allow debugger

# CI/CD
oxlint --deny-warnings --max-warnings 0

Accessibility Fix Pattern

For jsx-a11y/click-events-have-key-events:

// Add tabIndex + onKeyDown
<div
  tabIndex={0}
 
  => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleClick(e)
    }
  }}
>

Or use semantic HTML: <button>