React and JavaScript code formatting standards. Use when: formatting React/JS code, setting up functional components, organizing file structure, configuring ESLint/Prettier, enforcing JSX patterns, reviewing component style.
Apply these standards to maintain consistency in React/JavaScript projects.
useState → useContext → useEffect → custom hooks<Component
propOne={value1}
propTwo={value2}
propThree={value3}
/>
<Icon name="close" />className="container"Organize files by function, not type:
src/pages/ or src/views/ (page-level components)src/components/ (reusable UI components)src/hooks/ (custom React hooks)src/utils/ (pure utility functions)src/types/ (TypeScript types/interfaces)src/styles/UserForm.jsx, Header.tsx)dateUtils.js, validation.ts)[name].test.js or [name].spec.js colocated with sourceFormat code:
npm run format
Lint & check:
npm run lint
Manual review: Spot-check naming conventions and file structure
Commit: Ensure all tools pass before pushing
.eslintrc.js or .eslintrc.json.prettierrc or prettier.config.jstsconfig.json for React/TypeScript projects