Integrate eslint-plugin-sonarjs to improve the quality of the React/TypeScript codebase.
Specific Technical Debt to Address:
- Type Safety: In
src/containers/Staff/StaffContent.tsx, replace the any type in the staffItems.staff.map function with a proper TypeScript interface based on staffItems.json.
- Logic Consolidation: In
src/containers/Youth/YouthContent.tsx, consolidate the two separate useContext(ContentContext) calls into a single destructuring statement.
- Maintainability: Review
src/containers/Family/FamilyContent.tsx and src/containers/Stewardship/StewardshipContent.tsx for high cognitive complexity caused by large JSX blocks or raw HTML strings.
Tasks:
- Install:
npm install --save-dev eslint-plugin-sonarjs
- Enable recommended rules in
eslint.config.js.
- Run
npx eslint . and fix findings.
Integrate
eslint-plugin-sonarjsto improve the quality of the React/TypeScript codebase.Specific Technical Debt to Address:
src/containers/Staff/StaffContent.tsx, replace theanytype in thestaffItems.staff.mapfunction with a proper TypeScript interface based onstaffItems.json.src/containers/Youth/YouthContent.tsx, consolidate the two separateuseContext(ContentContext)calls into a single destructuring statement.src/containers/Family/FamilyContent.tsxandsrc/containers/Stewardship/StewardshipContent.tsxfor high cognitive complexity caused by large JSX blocks or raw HTML strings.Tasks:
npm install --save-dev eslint-plugin-sonarjseslint.config.js.npx eslint .and fix findings.