# Biome Linting and Formatting Rules and Git Hook Configuration for TCG Pocket Collection Tracker

> Discover Biome linting and formatting rules and lefthook Git configuration for the TCG Pocket Collection Tracker project. Ensure code quality on commit and push.

- Repository: [Marcel Panse/tcg-pocket-collection-tracker](https://github.com/marcelpanse/tcg-pocket-collection-tracker)
- Tags: devops
- Published: 2026-03-06

---

**The TCG Pocket Collection Tracker enforces code quality using Biome for formatting and linting with a curated rule set, automated through lefthook Git hooks that verify code style on commit and build integrity on push.**

The **TCG Pocket Collection Tracker** repository maintains strict code standards through automated tooling. It combines **Biome** as a unified formatter and linter with **lefthook** Git hooks to ensure every change adheres to project guidelines and compiles successfully before reaching the remote repository.

## Biome Configuration Settings

### Code Style and Formatting Rules

The project configures Biome's formatter in [[`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json)](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json#L4-L17) with specific stylistic constraints. The setup uses **spaces** for indentation with a width of **2**, enforces a **maximum line width of 160 characters**, and mandates **single quotes**, **no semicolons**, and **always-parenthesised arrow functions**. These settings ensure consistent code appearance across all TypeScript and JavaScript files.

### Linter Rule Selection

The linter extends the `recommended: true` base rule set but applies a deliberately minimal configuration to reduce noise. As defined in [[`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json)](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json#L34-L62), the **Correctness** category elevates `noUnusedImports` and `noUnusedVariables` to **error** level while disabling most other correctness rules. The **Style** category enforces `useExportType`, `useNodejsImportProtocol`, `useImportType`, and `useBlockStatements` as errors. Accessibility, Security, Performance, Complexity, and Suspicious rule groups remain largely disabled to maintain a lightweight linting surface.

### File Handling and VCS Integration

Biome ignores `node_modules` and `dist` directories and restricts file size to **2 MiB** as specified in [[`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json)](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json#L74-L78). Version control integration is enabled for **git** in [[`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json)](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json#L19-L23), allowing the tool to respect repository ignore patterns automatically.

## Git Hook Configuration with Lefthook

The repository uses **lefthook** to automate quality checks. The `prepare` script in [`package.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/package.json) runs `lefthook install` to wire hooks into the local Git configuration.

### Pre-Commit Quality Checks

The **pre-commit** hook, defined in [[`lefthook.yml`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/lefthook.yml)](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/lefthook.yml), executes `pnpm run lint` before every commit. It targets files matching `*.js`, `*.ts`, `*.cjs`, `*.mjs`, `*.d.cts`, `*.d.mts`, `*.jsx`, `*.tsx`, `*.json`, and `*.jsonc`. With `stage_fixed: true` enabled, any files automatically fixed by Biome are re-staged before the commit completes.

### Pre-Push Build Verification

The **pre-push** hook runs `pnpm run build` to verify that the TypeScript/React code compiles and the production bundle generates successfully. This prevents broken artifacts from reaching the shared repository.

## Development Workflow and Commands

The project provides convenient npm scripts in [`package.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/package.json) ([source](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/package.json#L5-L10)):

```bash

# Run linting with warnings treated as errors (used by pre-commit hook)

pnpm run lint

# Auto-fix lint and style issues

pnpm run lint:fix

# Build the frontend (used by pre-push hook)

pnpm run build

```

When you run `git commit`, lefthook executes the same `pnpm run lint` command, aborting the commit if Biome detects unfixable errors. If Biome automatically fixes formatting or import ordering, the `stage_fixed` flag ensures those changes are included in the current commit.

## Summary

- **Formatter Configuration**: [`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json) specifies 2-space indentation, 160-character line width, single quotes, no semicolons, and always-parenthesised arrow functions.
- **Linter Rules**: The project enforces a minimal subset including `noUnusedImports`, `noUnusedVariables`, `useExportType`, and `useImportType`, while disabling most other Biome rules.
- **Pre-Commit Automation**: Lefthook runs `pnpm run lint` on staged files and automatically re-stages any fixes before allowing the commit.
- **Pre-Push Protection**: The pre-push hook verifies the build succeeds before allowing code to reach the remote repository.
- **Manual Commands**: Developers can use `pnpm run lint:fix` to apply automatic corrections during local development.

## Frequently Asked Questions

### What Biome formatter settings does the project use?

The project uses space-based indentation of 2 characters, a maximum line width of 160 characters, single quotes, no semicolons, and always-parenthesised arrow functions as configured in [`biome.json`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/biome.json).

### Which specific Biome linting rules are enforced?

The configuration enforces `noUnusedImports` and `noUnusedVariables` for correctness, and `useExportType`, `useNodejsImportProtocol`, `useImportType`, and `useBlockStatements` for style. Most other rules in the Correctness, Style, Accessibility, Security, and Performance categories are disabled to maintain a lightweight setup.

### How does the pre-commit hook handle automatic fixes?

When the lefthook pre-commit hook runs `pnpm run lint`, Biome attempts to fix auto-fixable issues. Because `stage_fixed: true` is set in [`lefthook.yml`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/lefthook.yml), any files modified by the formatter are automatically re-staged before the commit completes, ensuring fixes are included without manual intervention.

### What happens if the build fails during pre-push?

The pre-push hook runs `pnpm run build` to ensure the application compiles successfully. If the TypeScript/React build fails or the production bundle cannot be generated, the push aborts immediately, preventing broken code from reaching the remote repository.