@bbcd0/oxc

This package shared oxc configs to be used in all projects across bbcd0.

Installation

# npm
npm i -D @bbcd0/oxc oxfmt oxlint

# yarn
yarn add -D @bbcd0/oxc oxfmt oxlint

# pnpm
pnpm i -D @bbcd0/oxc oxfmt oxlint

Configuration

Add config files

oxfmt.config.ts

import config from "@bbcd0/oxc/fmt";

export default config;

oxlint.config.ts

The lint config ships as separate fragments, so a project enables only what it actually uses. Import the ones you need from @bbcd0/oxc/lint and combine them with oxlint's extends.

| Fragment | Adds | | ------------ | --------------------------------------------------------------------------------- | | base | eslint + import rules, env, ignorePatterns. Always include it first. | | typescript | typescript plugin and type-aware linting (options.typeAware) | | react | react plugin — hooks, JSX and fast-refresh rules | | next | nextjs plugin. Includes the react fragment and allows Next route segment exports | | vitest | vitest plugin, scoped through overrides to **/*.spec.{js,jsx,ts,tsx} |

Fragments are merged left to right and the last one wins, so keep base first and framework fragments after react.

SPA

import { base, react, typescript, vitest } from "@bbcd0/oxc/lint";
import { defineConfig } from "oxlint";

export default defineConfig({
  extends: [base, typescript, react, vitest],
});

Next.js

next already contains the react fragment, so it does not need to be listed.

import { base, next, typescript, vitest } from "@bbcd0/oxc/lint";
import { defineConfig } from "oxlint";

export default defineConfig({
  extends: [base, typescript, next, vitest],
});

In a monorepo, tell the Next.js plugin where the app lives so that nextjs/no-html-link-for-pages can find the routes:

export default defineConfig({
  extends: [base, typescript, next, vitest],
  settings: {
    next: { rootDir: ["apps/web"] },
  },
});

Node / library

import { base, typescript, vitest } from "@bbcd0/oxc/lint";
import { defineConfig } from "oxlint";

export default defineConfig({
  extends: [base, typescript, vitest],
});

Every fragment is also reachable as its own entry point — @bbcd0/oxc/lint/base, @bbcd0/oxc/lint/typescript, @bbcd0/oxc/lint/react, @bbcd0/oxc/lint/next, @bbcd0/oxc/lint/vitest — if you prefer a default import per fragment.

The typescript fragment turns on type-aware rules, which need oxlint-tsgolint (a dependency of this package) and a resolvable tsconfig.json next to the linted files.

Setup editors

vscode

Add following config files

// .vscode/extensions.json
{
  "recommendations": ["oxc.oxc-vscode"]
}

// .vscode/settings.json
{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true
}

zed

Add following config file

// .zed/settings.json
{
  "lsp": {
    "oxlint": {
      "initialization_options": {
        "settings": {
          "configPath": null,
          "run": "onType",
          "disableNestedConfig": false,
          "fixKind": "safe_fix",
          "unusedDisableDirectives": "deny"
        }
      }
    },
    "oxfmt": {
      "initialization_options": {
        "settings": {
          "fmt.configPath": null,
          "run": "onSave"
        }
      }
    }
  },
  "languages": {
    "CSS": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "HTML": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "JavaScript": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        },
        {
          "code_action": "source.fixAll.oxc"
        }
      ]
    },
    "JSON": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "JSON5": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "JSONC": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "Less": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "Markdown": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "MDX": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "SCSS": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "TypeScript": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "TSX": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    },
    "YAML": {
      "format_on_save": "on",
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        }
      ]
    }
  }
}

Migration from 1.x

@bbcd0/oxc/lint used to default-export the whole config — base, typescript, react and vitest in one object. It now has no default export, only the named fragments, so the old import config from "@bbcd0/oxc/lint" fails at import time instead of silently linting with a smaller rule set. To keep the previous behaviour, switch to the SPA recipe, which produces exactly the same rules.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.