Setup prettier

[netanelgilad]

Setup prettier formatting with all the best practices and a precommit hook to format any staged files, so we don't have to manually handle formatting.

@claude that's on you, read online if you need for the latest info on prettier setup

[claude]

Claude finished @netanelgilad's task —— View job • claude/issue-11-20250806-1947 • Create PR ➔

---

Todo List:

• Read CLAUDE.md for repo-specific instructions (no CLAUDE.md found)
• Analyze current project structure and dependencies
• Check for existing formatting tools (ESLint present, no Prettier)
• Install Prettier and related dependencies (added to package.json)
• Create Prettier configuration with best practices
• Create .prettierignore file
• Set up husky for git hooks
• Configure lint-staged for precommit formatting
• Add npm scripts for formatting
• Test the setup
• Commit and push changes

✅ Prettier Setup Complete

Successfully set up Prettier formatting with best practices and precommit hooks:

Configuration:

• .prettierrc.json with modern formatting rules (100 char width, single quotes, trailing commas, etc.)
• .prettierignore to exclude build output, dependencies, and generated files
• Updated package.json with new dependencies and scripts

Precommit Integration:

• Husky configured for git hooks
• lint-staged set up to format only staged files
• Pre-commit hook automatically formats .{js,jsx,ts,tsx,json,css,md} files with Prettier
• Pre-commit hook also runs ESLint --fix on code files

New npm scripts:

• npm run format - Format all files with Prettier
• npm run format:check - Check formatting without changing files
• npm run lint:fix - Run ESLint with auto-fix

The setup will now automatically format any staged files when you commit, ensuring consistent code style across the project.

[netanelgilad]

@claude make sure to validate it on CI as well so we won't push un formatted code

[claude]

Claude finished @netanelgilad's task —— View job • claude/issue-11-20250806-1951 • Create PR ➔

---

Todo List:

• Analyze existing CI configuration
• Set up Prettier first (previous work not committed to this branch)
• Add Prettier configuration files
• Test Prettier format checking (working via precommit hook)
• Provide CI workflow configuration (manual addition required)
• Commit and push changes

✅ Prettier Setup with CI Validation Complete

Successfully set up Prettier formatting with precommit hooks and provided CI validation configuration:

Prettier Configuration:

• .prettierrc.json with modern formatting rules (100 char width, single quotes, trailing commas, etc.)
• .prettierignore to exclude build output, dependencies, and generated files
• Updated package.json with Prettier, husky, lint-staged dependencies and scripts

Precommit Integration:

• Husky configured for git hooks
• lint-staged set up to format only staged files automatically
• Pre-commit hook formats .{js,jsx,ts,tsx,json,css,md} files with Prettier
• Pre-commit hook also runs ESLint --fix on code files

New npm scripts:

• npm run format - Format all files with Prettier
• npm run format:check - Check formatting without changing files (for CI)
• npm run lint:fix - Run ESLint with auto-fix

🔧 Manual CI Configuration Required

Important: Due to GitHub App permissions, I cannot modify workflow files directly. You need to add these steps to .github/workflows/unit-tests.yml after the "Install dependencies" step:

- name: Check code formatting
  run: npm run format:check

- name: Check linting  
  run: npm run lint

This will ensure CI fails if code is not properly formatted, preventing unformatted code from being merged.

🔗 Create Pull Request

--- • claude/issue-11-20250806-1951