Code Review in Vue 3
Code reviews are essential for maintaining code quality, consistency, and knowledge sharing in Vue 3 projects. Follow these best practices and workflows:
Workflow
- All changes must go through pull requests (PRs).
- Assign at least one reviewer with relevant expertise.
- Use automated checks (linting, formatting, tests) before review.
- Reviewers should provide constructive feedback and request changes if needed.
- Merge only after all checks pass and approvals are given.
Review Checklist
- Code follows Vue 3 style guide and project conventions.
- Uses Composition API and script setup syntax where appropriate.
- No unused variables, imports, or dead code.
- Components are modular, reusable, and have clear props/events.
- State management (Pinia/Vuex) is used correctly.
- All new code is covered by unit and/or integration tests.
- Accessibility standards are met (labels, ARIA, keyboard navigation).
- Error handling is present for async operations and user input.
- Documentation and comments are clear and up to date.
Automated Tools
- ESLint with Vue plugin for linting.
- Prettier for code formatting.
- Vitest/Jest for running tests.
- GitHub Actions or GitLab CI for CI/CD pipelines.
Example: PR Review Comments
- Please refactor this component to use the Composition API.
- Add unit tests for the new composable.
- Ensure the modal is accessible via keyboard navigation.
- Remove unused imports from App.vue.