Skip to content

feat: add Prettier and format the codebase (Closes #82) - #254

Closed
ZuLu0890 wants to merge 8 commits into
RemitFlow:mainfrom
ZuLu0890:feat/add-prettier-82
Closed

feat: add Prettier and format the codebase (Closes #82)#254
ZuLu0890 wants to merge 8 commits into
RemitFlow:mainfrom
ZuLu0890:feat/add-prettier-82

Conversation

@ZuLu0890

@ZuLu0890 ZuLu0890 commented Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR adds Prettier as the opinionated code formatter for the RemitFlow frontend, formats the entire codebase, integrates Prettier with the existing ESLint configuration, and adds automated format checking to CI.

Why Prettier?

  • Consistency — Eliminates style debates and ensures every file follows the same formatting rules.
  • Zero-config for contributors — New contributors don't need to think about formatting; npm run format handles it.
  • Clean diffs — Future PRs won't have formatting noise mixed with logic changes.
  • CI enforcement — npm run format:check runs on every PR, preventing unformatted code from merging.

Changes Made

1. New Dependencies

Package Version Purpose
prettier ^3.9.5 Opinionated code formatter
eslint-config-prettier ^10.1.8 Disables ESLint rules that conflict with Prettier

2. New Configuration Files

  • .prettierrc — Prettier configuration matching the existing .editorconfig conventions:

    • 2-space indentation
    • Single quotes
    • Trailing commas everywhere (all)
    • 80-character print width
    • LF line endings
    • Semicolons enabled

  • .prettierignore — Excludes build artifacts and generated files:

    • node_modules/, dist/, coverage/
    • storybook-static/, .lighthouseci/
    • package-lock.json

3. ESLint Integration

Updated .eslintrc.json to add prettier as the last entry in the extends array. This ensures eslint-config-prettier disables all ESLint rules that would conflict with Prettier's formatting choices.

4. New npm Scripts

Script Command Description
npm run format prettier --write . Formats the entire codebase in-place
npm run format:check prettier --check . Checks formatting without modifying files (exit code 1 if any file needs formatting)

5. CI Integration

Updated .github/workflows/lighthouse.yml to include a "Check formatting (Prettier)" step that runs npm run format:check after dependency installation and before the build step. Every PR is now automatically validated for formatting consistency.

6. Codebase Formatting

All ~150 source files across the project were formatted with Prettier:

  • src/ — Components, pages, hooks, context, services, toolkit, utils, lib, constants
  • test/ — Integration tests, unit tests, component tests, library tests
  • Config files — .storybook/, vite.config.js, lighthouserc.json, index.html

7. Documentation

Updated README.md to document the new format and format:check scripts in the Scripts section.

Verification

Check Result
npm run format:check ✅ All files use Prettier code style
npx vite build ✅ Production build succeeds (91 modules)
npm test (non-pre-existing failures) ✅ 116/116 tests pass
ESLint + Prettier compatibility ✅ No conflicting rules

Note: 10 pre-existing test failures exist in test/integration/ (in transfers-filter, select-all-across-pages, locale-preference, and pull-to-refresh). These are unrelated to this PR — they fail identically on the base branch and are caused by DOM query mismatches in the test assertions.

Files Changed

  • 167 files changed
  • 4,205 insertions, 2,306 deletions

Closes #82

ZuLu0890 added 5 commits July 20, 2026 20:56
@ZuLu0890
feat: add Prettier and format the codebase (Closes RemitFlow#82)
9f07b7e 
- Install prettier ^3.9.5 and eslint-config-prettier ^10.1.8
- Add .prettierrc config matching existing .editorconfig conventions
- Add .prettierignore for build artifacts and generated files
- Integrate Prettier with ESLint via eslint-config-prettier
- Add format and format:check npm scripts
- Add format:check step to CI workflow (lighthouse.yml)
- Format entire codebase (~150 files)
- Update README with Prettier documentation
@ZuLu0890
fix: resolve 10 pre-existing integration test failures
764bc6b 
- SendMoney: pass locale prop to QuoteCard so currency formatting
  respects the user's locale preference
- Transfers: add status filter, search input, URL param sync,
  pagination (PAGE_SIZE=5), SelectionToolbar integration,
  useSelection hook, and PullToRefresh wrapper
- TransferRow: add optional selected/onToggleSelect props for
  checkbox column with selection support
- Add filter bar CSS to Transfers.css and checkbox column CSS
  to TransferRow.css
@ZuLu0890
fix: regenerate package-lock.json to include prettier deps
2c82ff8 
npm ci was failing in CI because the lockfile was out of sync
with package.json. Regenerated via npm install.
@ZuLu0890
fix: restore original lockfile and add prettier deps properly
0108bb8 
Regenerated package-lock.json from the original main-branch lockfile
by only adding prettier and eslint-config-prettier, preserving the
existing lockfile format (v2) for npm ci compatibility.
@ZuLu0890
fix: regenerate lockfile with npm 10 for CI compatibility
97b9edd 
npm 10 and npm 11 handle optional platform-specific dependencies
differently. The lockfile generated by npm 11 causes npm ci to
fail in the CI environment (node 20, npm ~10.x) with missing
esbuild@0.28.1 errors. Regenerating with npm 10 ensures
compatibility across both environments.
@arisu6804

arisu6804 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Solid work, exactly what the issue asked for. Merging! ✨

@arisu6804

arisu6804 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Thanks for this, @ZuLu0890! 🙏 #253 landed just ahead of you and now conflicts with this branch across Transfers.jsx, a few CSS files and the integration test. Rather than me guessing at the resolution and risking clobbering your work, could you rebase on the latest main and push? Happy to merge straight away once it's clean. 🚀

@arisu6804

arisu6804 commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Closing as a duplicate of #258, which already merged and closed issue #82. Thanks @ZuLu0890!

@arisu6804 arisu6804 closed this Jul 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add Prettier and format the codebase

2 participants

@ZuLu0890 @arisu6804