Skip to content

Lint TypeScript files#84

Open
ICubE01 wants to merge 3 commits into
mainfrom
chore/lint-typescript-files
Open

Lint TypeScript files#84
ICubE01 wants to merge 3 commits into
mainfrom
chore/lint-typescript-files

Conversation

@ICubE01

@ICubE01 ICubE01 commented Jul 18, 2026

Copy link
Copy Markdown
Owner

Summary

  • ESLint now checks .ts and .tsx files, which it previously skipped entirely
  • Fixes the 28 errors that could be resolved mechanically; npm run lint passes again
  • CI now runs the linter, so the rules are actually enforced on every PR
  • Leaves 41 pre-existing react-hooks violations as warnings, with a TODO, because they need a refactor rather than a lint fix

Frontend

Chore

  • eslint.config.js only matched **/*.{js,jsx}, so not a single application source file was being linted. Added typescript-eslint and a **/*.{ts,tsx} block extending the same rule sets, plus argsIgnorePattern: '^_' so intentionally unused parameters stay valid.

Bugfix

  • TichuPage.tsx brace the 15 case blocks that declare lexical bindings. Without the braces, a const in one branch is visible to every later branch in the same switch.
  • LoginPage.tsx, SignupPage.tsx drop the unused catch bindings.
  • useStomp.tsx replace the Function type on subscription callbacks with a named MessageCallback signature.
  • TichuPage.tsx, HanabiPage.tsx type onGameEnd as () => void rather than Function.
  • Trick.ts use const for a loop binding that is never reassigned.

General

Chore

  • reusable-check.yaml run npm run lint in the check workflow. It built the frontend but never linted it, so nothing enforced the rules. The frontend job is now install, lint, then build, so a lint failure is reported on its own rather than as a build failure.

Follow-up

41 react-hooks violations remain, downgraded to warnings so npm run lint is usable as a signal for everything else. They come from two causes:

  • 30 conditional hook callsTichuPage, HanabiPage, and RoomDetailPage place an early return above their hooks. If the guarded value flips between renders, React throws "Rendered fewer hooks than expected". Fixing means moving the returns below the hooks and handling the null case in each hook body.
  • 4 hooks called in a classuseStomp is a class that calls useRef/useMemo. It works only because it is constructed during render and the hook order happens to stay stable. Converting it to a real custom hook is the fix.

The remaining 7 are react-hooks/refs, set-state-in-effect, immutability, and one react-refresh warning. There are also 16 pre-existing exhaustive-deps warnings, which were already warnings.

Since CI now runs the linter, warnings pass but errors do not. Once the two refactors above land and those rules go back to error, the gate tightens automatically. Adding --max-warnings is a further option, but it would fail on the 57 warnings that exist today.

ICubE01 added 3 commits July 19, 2026 05:59
ESLint only matched **/*.{js,jsx}, so no .ts or .tsx file in the app was
linted. Add typescript-eslint and a matching config block.

This surfaces 41 pre-existing react-hooks errors from two causes: early
returns placed above hooks in the page components, and useStomp being a
class that calls hooks. Both need a refactor rather than a lint fix, so
those rules are warnings for now with a TODO.
- Brace the case blocks in TichuPage that declare lexical bindings
- Drop the unused catch bindings in LoginPage and SignupPage
- Replace the `Function` type with concrete signatures
- Use const for a loop binding that is never reassigned
The check workflow built the frontend but never linted it, so nothing
enforced the rules. Split the frontend job into install, lint, and build
steps so a lint failure is reported on its own.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant