Skip to main content

Concern

Code formatting (consistent style across the codebase).

Technology

Prettier

Documentation​

Version

v3

Configuration

A shared .prettierrc (or .prettierrc.json) at the repo root ensures all packages use the same style; keep it formatted (e.g. pretty-printed JSON) so the config file itself follows the project style. Optionally add .prettierignore at root to exclude build output and dependencies.

Implementation

A single root .prettierrc config applies to the whole monorepo. The root format script first runs Prettier on root config files (package.json, .prettierrc, pnpm-workspace.yaml), then runs format in each workspace package via pnpm -r run format. Every package that contains source (backend, shared, frontends/shared, desktop) has its own format script that formats its sources (including **/*.mjs where present, e.g. eslint.config.mjs) and, where relevant, its package.json and config JSON (e.g. tsconfig.json, components.json) so the repo stays consistently styled. In addition, .cursor/hooks.json configures an afterFileEdit hook that runs .cursor/hooks/format.sh (which runs pnpm format from the project root), so edits made by the Cursor agent are formatted automatically.

Integration

Runs in backend, frontend, and shared. Often paired with linting (ESLint); use eslint-config-prettier so ESLint does not enforce style rules Prettier handles. Can be run via ci (e.g. format check).

Root command: From the repo root, pnpm format formats all code in the monorepo. The root format script first runs Prettier on root config files (package.json, .prettierrc, pnpm-workspace.yaml), then runs format recursively in each workspace package (e.g. pnpm -r run format). This keeps root config and the Prettier config file itself formatted.

Per-package: Each package that contains source (backend, shared, frontends/shared, each frontend) defines a format script that runs Prettier on its own sources (e.g. prettier --write "src/**/*.ts" for backend/shared; for frontends include **/*.{ts,tsx,js,jsx,mdx} or equivalent). Use the same Prettier major version (see Version above) in every package.

Cursor agent hook: The boilerplate can include an afterFileEdit hook that runs pnpm format so agent edits are formatted automatically. Project hooks live under .cursor/hooks.json and run from the project root. See Cursor Hooks.