Missing ESLint + Prettier Integration in Frontend #56

[chaitanyak175]

---

name: 🚀 Pull Request
about: Propose changes to improve the project
title: "[FEATURE] Integrate ESLint + Prettier with Pre-commit Hooks & CI Enforcement"
labels: ''
assignees: ''

---

📝 Description

This PR establishes a comprehensive code quality infrastructure for the frontend-react project by integrating ESLint and Prettier with automated enforcement through pre-commit hooks and CI/CD pipelines.

Fixes #56 : Inconsistent code formatting and lack of automated style enforcement across the codebase.

🛠 Changes

• Extended eslint.config.js with React-specific rules and plugins
• Created .prettierrc and .prettierignore for unified code formatting
• Configured eslint-config-prettier to prevent rule conflicts
• Set up Husky and lint-staged for pre-commit linting and formatting
• Added linting validation step to GitHub Actions CI pipeline

✅ Checklist

• I have read the Contributing Guidelines
• My code follows the project's style guidelines
• I have updated documentation if necessary

📸 Screenshots (if applicable)

If your change affects the UI, add screenshots to illustrate.

📚 Additional Notes

New Dependencies Added:
eslint-config-prettier, eslint-plugin-react, eslint-plugin-react-hooks
prettier, husky, lint-staged

[Copilot]

Pull Request Overview

This PR establishes a comprehensive code quality and formatting infrastructure for the frontend-react project by integrating ESLint and Prettier with automated enforcement mechanisms to address inconsistent code formatting.

Key Changes:

• Configured ESLint with React, TypeScript, accessibility, and Prettier integration
• Set up Prettier with consistent formatting rules and ignore patterns
• Added pre-commit hooks via Husky and lint-staged to enforce code quality before commits
• Integrated linting and formatting checks into GitHub Actions CI pipeline

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend-react/src/lib/utils.ts	Applied automated formatting (added semicolons)
frontend-react/package.json	Added linting/formatting scripts, dependencies (prettier, husky, lint-staged, eslint plugins), and lint-staged configuration
frontend-react/eslint.config.js	Expanded ESLint configuration with React, accessibility, and Prettier rules
frontend-react/.vscode/extensions.json	Added VS Code extension recommendations for ESLint, Prettier, and Tailwind CSS
frontend-react/.prettierrc	Created Prettier configuration with formatting standards
frontend-react/.prettierignore	Defined files and directories to exclude from Prettier formatting
frontend-react/.husky/pre-commit	Set up pre-commit hook to run lint-staged
frontend-react/.github/workflows/lint.yml	Created CI workflow for linting, formatting, type-checking, and build validation
frontend-react/.editorconfig	Added EditorConfig for consistent coding styles across editors

Comments suppressed due to low confidence (1)

frontend-react/.editorconfig:1

• Inconsistent line length limits: Prettier is configured with printWidth: 80 in .prettierrc, while EditorConfig specifies max_line_length = 100. These should be aligned to the same value to avoid confusion.

# EditorConfig helps maintain consistent coding styles

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The redux dependency appears unrelated to the ESLint/Prettier integration described in this PR. Consider removing this dependency or explaining its inclusion in the PR description.

Suggested change

"redux": "^5.0.1",

[Copilot]

Inconsistent line length limits: Prettier is configured with printWidth: 80 in .prettierrc, while EditorConfig specifies max_line_length = 100. These should be aligned to the same value to avoid confusion.

Suggested change

	max_line_length = 100
	max_line_length = 80