Skip to content

Add ESLint + Prettier config to frontend #5

@KonstantinMB

Description

@KonstantinMB

The README's "Code conventions" section currently says "match surrounding code style" — that's fine for a solo project but breaks down with external contributors. ESLint + Prettier configs let us auto-format and auto-lint instead of arguing about style in PR reviews.

What to do

  • Add frontend/eslint.config.js (flat config, ESLint 9+) with:
    • @typescript-eslint/recommended
    • eslint-plugin-react-hooks recommended
    • eslint-plugin-jsx-a11y basic accessibility rules
  • Add frontend/.prettierrcmatch the existing code style (look at a few .tsx files first; pick single vs double quotes, indent size, trailing commas to match what's already there)
  • Add npm run lint (runs ESLint, fails on errors) and npm run format (runs Prettier --write) scripts
  • Run npm run format once and commit the resulting reformat in a separate commit from the config addition, so the diff stays reviewable
  • Update README "Code conventions" section to mention both commands

Acceptance criteria

  • cd frontend && npm run lint passes on the current codebase
  • cd frontend && npm run format reformats consistently
  • No new lint warnings introduced by the configs themselves
  • README mentions both commands
  • Two commits: one adding configs, one applying formatting (makes the diff much easier to review)

Bonus (optional)

  • Add a lint-staged + husky pre-commit hook so contributors can't easily commit unformatted code. If you do this, mention it in README.

Scope

Touches 3-4 config files + likely auto-format diffs across frontend/src/. Estimated time: 2-3 hours.

Want to take this on? Comment below and I'll assign it to you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions