Refactor: Setup ESLint & Prettier
Type: Refactor / Developer Experience (DX)
Track: Frontend (React)
Priority: Medium
Difficulty: Beginner
Description
The project's CONTRIBUTING.md outlines coding standards such as using ES6+ syntax, functional React components, and consistent formatting, but these conventions are currently enforced only through manual code reviews. Without automated tooling, inconsistent formatting, unused variables, and style violations can easily enter the codebase, leading to reduced maintainability and unnecessary review comments.
This refactor introduces ESLint and Prettier to automatically enforce code quality and formatting standards across the frontend project.
Important: Keep this Pull Request focused solely on configuring ESLint and Prettier. Avoid unrelated code formatting or large-scale refactoring of existing files.
Objective
Set up a standardized linting and formatting workflow using ESLint, Prettier, and eslint-plugin-react, ensuring developers can automatically validate and format code before committing changes.
Scope
The implementation should include:
- Install ESLint and Prettier.
- Configure
eslint-plugin-react.
- Create ESLint configuration.
- Create Prettier configuration.
- Add npm scripts for linting and formatting.
- Preserve existing project functionality.
- Keep the configuration beginner-friendly and easy to extend.
Required Changes
1. Install Required Dependencies
Install the following development dependencies:
npm install --save-dev \
eslint \
prettier \
eslint-plugin-react
If the project already uses modern React tooling, configure the packages accordingly without introducing unnecessary dependencies.
2. Create ESLint Configuration
Create:
Configure ESLint to:
- Support modern ES6+ syntax.
- Support React JSX.
- Enforce recommended React rules.
- Encourage functional component best practices.
- Detect unused variables.
- Maintain consistent coding standards.
The configuration should align with the project's existing coding guidelines defined in CONTRIBUTING.md.
3. Create Prettier Configuration
Create:
Define formatting rules such as:
- Consistent indentation
- Semicolon usage
- Quote style
- Trailing commas
- Line width
- Spacing conventions
The goal is to ensure all contributors produce consistently formatted code.
4. Update package.json
Add the following scripts:
{
"scripts": {
"lint": "eslint .",
"format": "prettier --write ."
}
}These scripts should allow contributors to:
and
to validate and automatically format the project.
5. Preserve Existing Functionality
This refactor should not modify:
- Application behavior
- Build configuration
- Routing
- Components
- Styling
- API functionality
Only the development tooling should be added.
Requirements
- Install
eslint.
- Install
prettier.
- Install
eslint-plugin-react.
- Create
.eslintrc.cjs.
- Create
.prettierrc.
- Add
lint script.
- Add
format script.
- Preserve existing application behavior.
- Keep the configuration simple and maintainable.
Acceptance Criteria
- ✅ ESLint is installed and configured.
- ✅ Prettier is installed and configured.
- ✅
eslint-plugin-react is integrated.
- ✅
.eslintrc.cjs exists at the frontend project root.
- ✅
.prettierrc exists at the frontend project root.
- ✅
package.json includes lint and format scripts.
- ✅ Running
npm run lint checks the project successfully.
- ✅ Running
npm run format formats project files.
- ✅ Existing application functionality remains unchanged.
- ✅ Pull Request remains focused solely on tooling configuration.
Testing
Verify the following scenarios:
ESLint
- Confirm linting completes successfully.
- Verify common issues such as unused variables or syntax problems are detected.
Prettier
- Confirm project files are formatted consistently.
- Verify formatting follows the configured rules.
Regression
- Build the application successfully.
- Existing features continue to work.
- No runtime behavior changes are introduced.
- Existing tests continue to pass.
Benefits
- Enforces consistent coding standards automatically.
- Reduces formatting-related code review comments.
- Improves code readability and maintainability.
- Helps contributors catch common issues early.
- Simplifies onboarding for new developers.
- Establishes a scalable foundation for future development.
Suggested Branch Name
refactor/setup-eslint-prettier
Labels
refactor
frontend
react
eslint
prettier
developer-experience
tooling
code-quality
beginner
Refactor: Setup ESLint & Prettier
Type: Refactor / Developer Experience (DX)
Track: Frontend (React)
Priority: Medium
Difficulty: Beginner
Description
The project's
CONTRIBUTING.mdoutlines coding standards such as using ES6+ syntax, functional React components, and consistent formatting, but these conventions are currently enforced only through manual code reviews. Without automated tooling, inconsistent formatting, unused variables, and style violations can easily enter the codebase, leading to reduced maintainability and unnecessary review comments.This refactor introduces ESLint and Prettier to automatically enforce code quality and formatting standards across the frontend project.
Objective
Set up a standardized linting and formatting workflow using ESLint, Prettier, and eslint-plugin-react, ensuring developers can automatically validate and format code before committing changes.
Scope
The implementation should include:
eslint-plugin-react.Required Changes
1. Install Required Dependencies
Install the following development dependencies:
If the project already uses modern React tooling, configure the packages accordingly without introducing unnecessary dependencies.
2. Create ESLint Configuration
Create:
Configure ESLint to:
The configuration should align with the project's existing coding guidelines defined in
CONTRIBUTING.md.3. Create Prettier Configuration
Create:
Define formatting rules such as:
The goal is to ensure all contributors produce consistently formatted code.
4. Update
package.jsonAdd the following scripts:
{ "scripts": { "lint": "eslint .", "format": "prettier --write ." } }These scripts should allow contributors to:
and
to validate and automatically format the project.
5. Preserve Existing Functionality
This refactor should not modify:
Only the development tooling should be added.
Requirements
eslint.prettier.eslint-plugin-react..eslintrc.cjs..prettierrc.lintscript.formatscript.Acceptance Criteria
eslint-plugin-reactis integrated..eslintrc.cjsexists at the frontend project root..prettierrcexists at the frontend project root.package.jsonincludeslintandformatscripts.npm run lintchecks the project successfully.npm run formatformats project files.Testing
Verify the following scenarios:
ESLint
Prettier
Regression
Benefits
Suggested Branch Name
Labels