# Code Style Guidelines for t3code: Linting and Formatting with the Ox Toolchain

> Discover t3code's code style guidelines. Learn how oxlint and oxfmt ensure clean, consistent code, managed via bun scripts for efficient development.

- Repository: [Ping.gg/t3code](https://github.com/pingdotgg/t3code)
- Tags: best-practices
- Published: 2026-04-18

---

**t3code enforces consistent code style through the Ox toolchain, using `oxlint` for linting and `oxfmt` for formatting, configured via [`.oxlintrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxlintrc.json) and [`.oxfmtrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxfmtrc.json) and executed through `bun` scripts.**

The `pingdotgg/t3code` repository maintains strict code style guidelines for t3code to ensure consistency across its TypeScript and React codebase. These guidelines are enforced automatically through the **Ox** toolchain rather than traditional ESLint and Prettier, offering faster performance and unified configuration through files at the repository root.

## Linting Configuration with oxlint

The linting policy is defined in [`.oxlintrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxlintrc.json) at the repository root. This configuration leverages `oxlint` to analyze TypeScript, React, and modern JavaScript patterns across the entire codebase.

### Plugin and Category Settings

The configuration loads five core plugins to cover the full stack:

```json
"plugins": ["eslint", "oxc", "react", "unicorn", "typescript"]

```

All lint categories are set to **warning** level to surface potential issues without blocking CI automatically:

```json
"categories": {
  "correctness": "warn",
  "suspicious": "warn",
  "perf": "warn"
}

```

### Rule Overrides and Ignored Patterns

Specific rules are disabled to align with project conventions and prevent false positives:

```json
"rules": {
  "react-in-jsx-scope": "off",
  "eslint/no-shadow": "off",
  "eslint/no-await-in-loop": "off"
}

```

The linter ignores generated artifacts and dependency directories:

```json
"ignorePatterns": [
  "dist", "dist-electron", "node_modules", "bun.lock",
  "*.tsbuildinfo", "**/routeTree.gen.ts"
]

```

### Running the Linter

Execute the lint check using the provided npm script:

```bash
bun lint

```

This command expands to `oxlint --report-unused-disable-directives`, validating every source file against the configuration in [`.oxlintrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxlintrc.json).

## Formatting Configuration with oxfmt

Formatting is handled by `oxfmt`, configured via [`.oxfmtrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxfmtrc.json) in the repository root. This tool replaces traditional formatters with a unified Ox-native approach.

### Ignore Patterns and Package.json Sorting

The formatter excludes compiled output, lock files, and vendor code:

```json
"ignorePatterns": [
  ".reference", ".plans", "dist", "dist-electron",
  "node_modules", "bun.lock", "*.tsbuildinfo",
  "**/routeTree.gen.ts",
  "apps/web/public/mockServiceWorker.js",
  "apps/web/src/lib/vendor/qrcodegen.ts",
  "*.icon/**"
]

```

Additionally, `oxfmt` automatically sorts [`package.json`](https://github.com/pingdotgg/t3code/blob/main/package.json) fields to maintain consistent dependency declarations:

```json
"sortPackageJson": {}

```

### Running the Formatter

Format the entire codebase with:

```bash
bun fmt

```

For CI validation without modifying files, use:

```bash
bun fmt:check

```

This executes `oxfmt --check` to detect formatting drift before it reaches the main branch.

## Pre-Commit Enforcement (Planned)

The project roadmap includes automated pre-commit hooks to enforce these code style guidelines for t3code before code enters the repository. According to the planning document at [`.plans/08-precommit-format-and-lint.md`](https://github.com/pingdotgg/t3code/blob/main/.plans/08-precommit-format-and-lint.md), the implementation will likely use **Biome** or similar tooling to run `format --write` and `check` commands automatically.

This future enhancement aims to reduce CI noise by catching formatting-only issues locally, complementing the existing `bun fmt` and `bun lint` workflows.

## Local Development Workflow

Integrate these commands into your development routine to comply with t3code style standards:

1. Before committing changes, run `bun fmt` to apply automatic formatting.
2. Execute `bun lint` to identify potential correctness or performance issues.
3. Verify type safety with `bun run typecheck`.
4. Run the test suite with `bun run test` to ensure functional integrity.

For a comprehensive validation mimicking CI conditions, chain the commands:

```bash
bun run lint && bun run fmt:check

```

## Summary

- **t3code** uses the **Ox** toolchain (`oxlint` and `oxfmt`) instead of traditional ESLint/Prettier for superior performance.
- Linting rules are configured in [`.oxlintrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxlintrc.json), using warnings for correctness, suspicious patterns, and performance issues.
- Formatting rules reside in [`.oxfmtrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxfmtrc.json), with automatic [`package.json`](https://github.com/pingdotgg/t3code/blob/main/package.json) sorting and specific ignore patterns for generated files.
- Run `bun fmt` and `bun lint` locally to ensure compliance before submitting pull requests.
- Pre-commit automation is planned to enforce these standards automatically according to [`.plans/08-precommit-format-and-lint.md`](https://github.com/pingdotgg/t3code/blob/main/.plans/08-precommit-format-and-lint.md).

## Frequently Asked Questions

### What tools does t3code use for linting and formatting?

t3code uses the **Ox** toolchain exclusively: `oxlint` for linting and `oxfmt` for formatting. These tools replace the traditional ESLint and Prettier stack, offering faster execution while maintaining compatibility with existing configurations and project conventions.

### How do I run the linter and formatter locally?

Use the `bun` scripts defined in [`package.json`](https://github.com/pingdotgg/t3code/blob/main/package.json). Run `bun fmt` to format the codebase and `bun lint` to check for lint violations. For CI-style validation without modifying files, use `bun fmt:check`, which executes `oxfmt --check` to detect any formatting drift.

### Why are some ESLint rules disabled in [`.oxlintrc.json`](https://github.com/pingdotgg/t3code/blob/main/.oxlintrc.json)?

Specific rules like `react-in-jsx-scope`, `eslint/no-shadow`, and `eslint/no-await-in-loop` are disabled to align with modern React patterns (automatic JSX runtime) and to prevent false positives in asynchronous logic or variable scoping that the project considers acceptable. This configuration is intentionally permissive while maintaining code quality through warning-level categories.

### Is there a pre-commit hook to enforce these style guidelines?

Not yet implemented, but planned. According to [`.plans/08-precommit-format-and-lint.md`](https://github.com/pingdotgg/t3code/blob/main/.plans/08-precommit-format-and-lint.md), the project intends to add a pre-commit hook using Biome or similar tooling to automatically format and check code before it enters the repository, reducing CI feedback loops and ensuring consistent style enforcement at commit time.