Configuration

Lint & Format Config

Production-ready Oxfmt and Oxlint configuration for KrakStack projects, including Tailwind class sorting, React/TypeScript linting, and Effect-friendly rules.

Install
Add this registry item to your app with shadcn.
bunx --bun shadcn@latest add https://krakstack.net/r/lint-format.json

Overview

lint-format installs root-level Oxfmt and Oxlint configuration for KrakStack projects. It keeps formatting boring and consistent while enabling useful correctness checks for React, TypeScript, and Effect code.

Included Files

  • .oxfmtrc.json — Oxfmt config with 80-column formatting and Tailwind CSS class sorting
  • .oxlintrc.json — Oxlint config for React, TypeScript, browser, and Node code

Choices

  • Uses JSON config files so CLI tooling can load them reliably across Node and Bun runtimes
  • Enables sortTailwindcss for shadcn/Tailwind projects
  • Disables eslint/require-yield because Effect uses generator functions as a DSL
  • Enables Vitest globals only in test files

Usage

Install the registry item:

npx shadcn@latest add https://krakstack.net/r/lint-format.json

Recommended package scripts:

{
  "scripts": {
    "lint": "oxlint",
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check ."
  }
}

Run checks locally or in CI:

bun run fmt:check
bun run lint
Dependencies
Packages and shadcn components required by this registry item.

Dev Dependencies

Preview

Lint & Format Config
Oxfmt and Oxlint configuration files for KrakStack projects.
.oxfmtrc.json
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 80,
  "sortTailwindcss": true
}
.oxlintrc.json
{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["typescript", "unicorn", "oxc", "eslint", "react"],
  "categories": {
    "correctness": "error"
  },
  "env": {
    "builtin": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "eslint/require-yield": "off"
  },
  "overrides": [
    {
      "files": [
        "**/*.test.ts",
        "**/*.test.tsx",
        "**/*.spec.ts",
        "**/*.spec.tsx"
      ],
      "env": {
        "vitest": true
      }
    }
  ]
}