feat: add automated linting and formatting enforcement

[Janmesh23]

Description

This PR implements automated code quality enforcement to maintain consistent code standards across the project. Currently, there was no mechanism to enforce linting or formatting before code is committed, which could lead to inconsistent code style and quality issues.

Fixes : #56

This solution adds both local pre-commit enforcement (using Husky v9 + lint-staged) and server-side enforcement (using GitHub Actions) to ensure all code meets our quality standards before it's merged.

Key improvements:

• Automatically formats and lints code on every commit
• Checks only staged files for fast performance
• Blocks commits if unfixable errors remain
• Validates all PRs via CI to catch any bypassed checks
• Full support for Astro, React, TypeScript, and JSX files

Type of Change

• New feature (non-breaking change which adds functionality)
• Code refactoring
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Style/UI improvements
• Performance improvements
• Test additions/updates

How Has This Been Tested?

Test Environment:

• Node.js version: 20.x
• npm version: 10.x
• Operating System: macOS/Linux

Manual Testing Performed:

• Test A: Local pre-commit hook validation

  • Created test files with intentional linting errors
  • Attempted to commit → Hook blocked the commit with error details
  • Fixed the errors → Commit succeeded
  • Verified hook only checks staged files (not entire codebase)

• Test B: Auto-fixing functionality

  • Created files with formatting issues (incorrect indentation, missing semicolons)
  • Staged and committed files → Hook auto-fixed formatting issues
  • Verified fixed files were automatically staged and committed

• Test C: Manual lint/format scripts

  • Ran npm run lint → Successfully checked all files
  • Ran npm run format:check → Successfully validated formatting
  • Ran npm run check → Both checks passed
  • Ran npm run lint:fix and npm run format → Auto-fixed issues

• Test D: ESLint v9 flat config validation

  • Verified ESLint correctly parses .astro files
  • Verified ESLint correctly parses .tsx and .ts files
  • Verified React and TypeScript rules are applied correctly
  • Confirmed no deprecated warnings or errors

• Test E: Prettier with Astro plugin

  • Tested formatting of .astro files → Correctly formatted
  • Tested formatting of mixed content files → All formats applied correctly

Reproduction Steps:

# 1. Pull this PR branch
git checkout feature/add-linting-enforcement

# 2. Install dependencies
cd frontend && npm install

# 3. Test manual checks
npm run check

# 4. Create a test file with errors
echo "const x = 1" > src/test.ts

# 5. Try to commit
git add src/test.ts
git commit -m "test"
# Should see auto-fix and successful commit

# 6. Create file with unfixable error
echo "console.log(undefinedVar)" > src/test2.ts
git add src/test2.ts
git commit -m "test"
# Should see commit blocked with error

After (With enforcement):

Pre-commit Hook in Action

✔ Preparing lint-staged...
⚠ Running tasks for staged files...
  ✔ frontend/**/*.{js,jsx,ts,tsx,astro} — 4 files
    ✔ prettier --write
    ✔ eslint --fix --max-warnings 0
  ✔ frontend/**/*.{json,css,md} — 2 files
    ✔ prettier --write
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[feature/add-linting-enforcement abc1234] feat: add new component
 1 file changed, 10 insertions(+)

GitHub Actions CI Check

(CI workflow runs automatically on every PR and validates code quality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (N/A - infrastructure change)
• Any dependent changes have been merged and published in downstream modules (N/A)

Additional Notes

What Changed?

New Files Added:

• .github/workflows/lint.yml - GitHub Actions CI workflow for PR validation
• frontend/.husky/pre-commit - Pre-commit hook that runs lint-staged
• frontend/eslint.config.js - ESLint v9 flat config with Astro + React support
• frontend/.prettierrc - Prettier configuration with Astro plugin
• frontend/.prettierignore - Files to ignore from Prettier formatting

Modified Files:

• frontend/package.json - Added lint/format scripts and lint-staged configuration
• frontend/package-lock.json - Added new dependencies (Husky, ESLint, Prettier, plugins)

Dependencies Added:

• husky (v9) - Git hooks management
• lint-staged - Run linters on staged files
• eslint (v9) - JavaScript/TypeScript linter
• prettier - Code formatter
• eslint-plugin-astro - Astro-specific ESLint rules
• prettier-plugin-astro - Astro formatting support
• @typescript-eslint/* - TypeScript ESLint integration
• eslint-plugin-react* - React-specific linting rules
• globals - Global variables definitions for ESLint v9

For Contributors:

No changes to workflow! Developers continue using git normally:

git add <files>
git commit -m "message"
git push

The pre-commit hook runs automatically. If it fails, fix the reported errors and commit again.

Optional manual checks before committing:

cd frontend
npm run check          # Check everything
npm run lint:fix       # Auto-fix linting issues
npm run format         # Auto-format all files

Emergency bypass (not recommended):

git commit --no-verify -m "emergency commit"

⚠️ CI will still validate on PR, so issues must be fixed eventually.

Benefits:

✅ Consistent code style - No more style debates in PRs
✅ Faster code reviews - Reviewers focus on logic, not formatting
✅ Prevents bad commits - Catch issues before they reach the repository
✅ Fast local checks - Only staged files are checked (not entire codebase)
✅ Modern tooling - ESLint v9 flat config, Husky v9, latest Prettier
✅ Full Astro support - .astro files are properly linted and formatted

Known Limitations:

• Pre-commit hook can be bypassed with --no-verify (but CI will catch issues)
• First-time setup requires npm install after pulling the branch
• Hooks only run on git operations (manual npm run lint still needed for verification)

Future Enhancements:

• Add commit message linting (commitlint)
• Add type checking in pre-commit hook
• Add test running before push
• Configure VSCode workspace settings for auto-format on save

NOTE : The changes might seem huge because while commit , the feature has formatted previously unformatted codebase

[lovestaco]

Hey @Janmesh23
We can ignore the /frontend/public & /frontend/data directory when checking
https://github.com/HexmosTech/FreeDevTools/actions/runs/18682204606/job/53268056266
Explan the sections to check detailed logs of what all files are under consideration

[lovestaco]

Also, can the pipeline auto-run the prettify and commit the files?

If you need approval for the action when you push the code, just ask in this channel anybody will approve.
https://discord.gg/mUCfyDQg3G

[Janmesh23]

Hey @Janmesh23 We can ignore the /frontend/public & /frontend/data directory when checking https://github.com/HexmosTech/FreeDevTools/actions/runs/18682204606/job/53268056266 Explan the sections to check detailed logs of what all files are under consideration

Hi @lovestaco !
I have ignored the data and public folder in .prettierignore and also updated the lint.yml to auto-run the prettify and commit the files.
please check and tell what needs to be done , thank you

[lovestaco]

I think you can delte this file, its propbably not needed

[lovestaco]

I think you can delte this file, its propbably not needed

[lovestaco]

just revert these two lines, these are needed.

[lovestaco]

Hey @Janmesh23 ran the actions, it failed again, here is the link
https://github.com/HexmosTech/FreeDevTools/actions/runs/18691539837