`apps/web` has no formatter, so style drifts and diffs fill with whitespace

[rodriguecyber]

Difficulty: Beginner · You'll need: npm, Prettier · Size: config + a formatting pass

What's going on

apps/server has a Prettier config and a format script:

"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\""

apps/web and packages/protocol have neither. apps/web runs oxlint, which is a linter, not a formatter — it checks for problems, not for consistent style.

What that looks like in the code

// apps/web/src/types/api.ts
export type Container = {
  ...
  ports:  Port[],        // two spaces, and a comma in a type literal
  created: number
}

  export type Port = {   // indented at top level
    PrivatePort: number
  }

// packages/protocol/src/container.ts
  env : string[]         // space before the colon

None of this is wrong — it all compiles. It is just inconsistent, and nothing in the repo will ever tell you.

Why it matters for a project taking outside contributions

Without a formatter, every contributor's editor imposes its own style, and PR diffs fill up with whitespace changes that hide the actual change. A reviewer then spends attention on indentation instead of logic. One shared formatter makes style a non-topic — which is the point of using one.

The work

1. Add Prettier to apps/web (and packages/protocol, if you want to cover it here — see the scope note).
2. Match apps/server's existing .prettierrc so the whole repo agrees rather than splitting into two styles.
3. Add a format script, mirroring the server's.
4. Check Prettier and oxlint do not fight over anything.
5. Run it and commit the result.

Scope note — this matters for reviewability

A repo-wide reformat touches ~90 files and is unreviewable line by line. Please structure the PR as two commits:

1. config + scripts only
2. the mechanical prettier --write output

A reviewer can then read commit 1 carefully and trust commit 2, because it was produced by a tool. Say so in the PR description.

Consider also adding a .git-blame-ignore-revs file with the reformat commit's SHA, so git blame skips it and still shows who wrote each line.

How to verify

npm run format --workspace=@docksight/web
npm run lint   --workspace=@docksight/web
npm run build  --workspace=@docksight/web

Running format twice must produce no diff the second time.

Related

#169 adds a linter to packages/protocol. These overlap — coordinate in the issues, or take both.

Done when

• apps/web has a Prettier config matching the server's
• A format script exists and is documented in CONTRIBUTING.md
• Prettier and oxlint do not conflict
• The formatting commit is separate from the config commit

---

Good first contribution. The formatting itself is a tool run. The real exercise is structuring a large mechanical change so a human can actually review it — a genuinely useful skill that is hard to practise anywhere but a shared codebase.

[aryansinha1908]

I would like to work on this issue, please.

[rodriguecyber]

I would like to work on this issue, please.

yes you can start

[aryansinha1908]

Let me know if there needs to be more changes added in the PR