@ivosabev/config

Oxlint, Oxfmt, and TypeScript configs

This makes assumptions about the way you prefer to develop software and gives you configurations that will actually help you in your development.

Install

npm install @ivosabev/config

yarn add @ivosabev/config

pnpm add @ivosabev/config

---

Usage

Oxfmt (Formatter)

Oxfmt ignores extends. Spread the shared config in oxfmt.config.ts and override what you need. Do not also keep .oxfmtrc.json in the same directory.

import config from '@ivosabev/config/oxfmt' with {type: 'json'};
import {type OxfmtConfig, defineConfig} from 'oxfmt';

export default defineConfig({
  ...(config as OxfmtConfig),
  ignorePatterns: [...config.ignorePatterns, '**/coverage/**'],
});

A later ignorePatterns list replaces the shared one. Spread config.ignorePatterns, then add yours. See the Oxfmt config reference.

sortImports.internalPattern is a list of prefixes. #, ~/, and @/ mark #app/foo, ~/foo, and @/foo as internal. @ivosabev/foo stays external.

Oxlint (Linter)

Create oxlint.config.ts in the project root. Import the shared config and pass it to extends. A string path to the package name does not work.

import config from '@ivosabev/config/oxlint' with {type: 'json'};
import {type OxlintConfig, defineConfig} from 'oxlint';

export default defineConfig({
  extends: [config as unknown as OxlintConfig],
  ignorePatterns: [...config.ignorePatterns, '**/coverage/**'],
});

A child ignorePatterns list replaces the shared one. Spread config.ignorePatterns, then add yours. Do not also keep .oxlintrc.json in the same directory. See the Oxlint config reference.

TypeScript

Create a tsconfig.json file in your project root with the following content:

{
  "extends": "@ivosabev/config/typescript/base",
  "include": ["@ivosabev/config/typescript/reset.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "compilerOptions": {
    "paths": {
      "#app/*": ["./app/*"],
      "#tests/*": ["./tests/*"]
    }
  }
}

If you want to build with tsc create a tsconfig.build.json file in your project root with the following content:

{
  "extends": "@ivosabev/config/typescript/build",
  "include": ["@ivosabev/config/typescript/reset.d.ts", "src", "tailwind.config.ts"],
  "compilerOptions": {
    "declarationDir": "dist/dts",
    "outDir": "dist/esm",
    "tsBuildInfoFile": ".tsbuildinfo/build.tsbuildinfo"
  }
}

Customizing TypeScript

Learn more from the TypeScript docs here.

package.json

You may want to add the following scripts to your project:

{
  "format": "oxfmt",
  "format-check": "oxfmt --check",
  "lint": "oxlint --fix",
  "lint-check": "oxlint",
  "typecheck": "tsc",
  "validate": "run-p lint format typecheck"
}

oxfmt does not sort object keys. sort-keys is an error, and lint sorts them.

Migration from ESLint/Prettier

This package previously used ESLint and Prettier. It now uses Oxlint and Oxfmt from the Oxc project.

See unsupported.md for a list of rules and features that could not be directly migrated.

Credits

• https://github.com/epicweb-dev/config
• https://github.com/remix-run/remix/tree/main/packages/remix-eslint-config
• https://github.com/total-typescript/tsconfig
• https://github.com/mattpocock/ts-reset
• https://oxc.rs

License

MIT