Integrating Husky Pre-Commit Hook with ESLint and Prettier

frontend/.husky/pre-commit

@@ -0,0 +1 @@
+cd ./frontend && npx lint-staged && npm run lint:fix

frontend/.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,ts,tsx,scss,css,md}": ["eslint", "prettier --write"]
+} 

frontend/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "endOfLine": "auto"
+}

frontend/eslint.config.js

@@ -3,11 +3,17 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import prettier from 'eslint-config-prettier'
+import prettierPlugin from 'eslint-plugin-prettier'
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'node_modules'] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      prettier, // Disables conflicting ESLint rules
+    ],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
@@ -16,13 +22,16 @@ export default tseslint.config(
     plugins: {
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      prettier: prettierPlugin,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
       ],
+      'prettier/prettier': 'error', // Ensures Prettier formatting is enforced
+      '@typescript-eslint/no-explicit-any': 'off',
     },
-  },
+  }
 )