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

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#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#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#L74-L78). Version control integration is enabled for git in [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 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), 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 (source):

# 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 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.

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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}