Pre commit hooks

.gitignore

@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.opt-out-hooks

.husky/pre-commit

@@ -0,0 +1,7 @@
+if [ -f ".opt-out-hooks" ]; then
+  echo "ℹ️ Skipping pre-commit hooks. To enable, remove the '.opt-out-hooks' file."
+  exit 0
+else
+  echo "✅ Git hooks are enabled locally. Running pre-commit checks..."
+  pnpm exec lint-staged
+fi

.prettierignore

@@ -5,6 +5,9 @@ build
 coverage
 .docusaurus
 .github
+.gitignore
+.husky
+.prettierignore
 pnpm-lock.yaml
 .svg
 *.svg

CONTRIBUTING.md

@@ -72,6 +72,30 @@ fix(api): handle null response from server
 docs(readme): update installation instructions
 ```
 
+### Code Quality and Pre-Commit Hooks
+
+To help maintain code quality and consistent formatting, this project includes pre-commit hooks that run [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) on staged files before a commit is made. The same linting and formatting is being run on CI.
+
+These hooks can be disabled (opt-out) to give developers flexibility in their workflow, however, we encourage its use, to avoid having to re-do commits to pass CI.
+
+### How It Works
+
+- **ESLint**: Checks for potential bugs and enforces code style rules. If any errors are found, **the commit will be aborted**, and you will need to fix the errors manually before trying to commit again.
+- **Prettier**: Automatically formats your code to ensure a consistent style across the entire codebase.
+
+### How to Disable the Hooks
+
+Hooks are pre-enabled on the repo. If for any reason, you wish to disable the
+
+1.  Navigate to the root directory of the project in your terminal.
+2.  Create the opt-out file by running the following command:
+
+    ```bash
+    touch .opt-out-hooks
+    ```
+
+If you decide you want the hooks to run again, simply delete the `.opt-out-hooks` file.
+
 ### 6. Push Your Changes
 
 ```bash

package.json

@@ -13,7 +13,8 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "prepare": "husky"
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",
@@ -38,6 +39,8 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
     "prettier": "^3.5.3",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.36.0"
@@ -56,5 +59,11 @@
   },
   "engines": {
     "node": ">=18.0"
+  },
+  "lint-staged": {
+    "*": [
+      "eslint",
+      "prettier --write"
+    ]
   }
 }