fix: lint-staged settings

.eslintignore

@@ -0,0 +1,5 @@
+.next/
+dist/
+coverage/
+node_modules/
+package-lock.json

.eslintrc.json

@@ -7,26 +7,15 @@
   },
   "extends": [
     "airbnb-base",
-    "prettier",
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:cypress/recommended",
-    "plugin:@next/next/recommended"
-  ],
-  "ignorePatterns": [
-    "**/.next/**",
-    "**/public/**",
-    "**/dist/**",
-    "package-lock.json"
+    "plugin:@next/next/recommended",
+    "prettier"
   ],
   "parser": "@babel/eslint-parser",
-  "plugins": [
-    "react",
-    "prettier",
-    "simple-import-sort",
-    "import",
-    "eslint-plugin-import"
-  ],
+  "plugins": ["react", "simple-import-sort", "import", "eslint-plugin-import"],
+  "reportUnusedDisableDirectives": true,
   "rules": {
     "array-callback-return": "warn",
     "block-scoped-var": "warn",
@@ -111,7 +100,6 @@
     "prefer-const": "warn",
     "prefer-destructuring": "warn",
     "prefer-template": "warn",
-    "prettier/prettier": "error",
     "radix": "off",
     "react/display-name": "warn",
     "react/jsx-uses-vars": "warn",
@@ -132,7 +120,7 @@
   "settings": {
     "react": {
       "pragma": "React",
-      "version": "17.0.2"
+      "version": "^16.13.1"
     }
   }
 }

.lintstagedrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  '*.{js,jsx,ts,tsx,html,css}': ['prettier --write', 'eslint --fix'],
+  '*.{md,json,yml,yaml}': ['prettier --write'],
+};

.prettierignore

@@ -1,4 +1,5 @@
 **/.next/**
 **/dist/**
 package-lock.json
-coverage
+coverage
+node_modules

README.md

@@ -1,34 +1,35 @@
 **Table of Contents**
 
 - [Treetracker Web Map Site](#treetracker-web-map-site)
-	- [Project Description](#project-description)
-	- [Development Environment Quick Start](#development-environment-quick-start)
-	- [Workflow with Github](#workflow-with-github)
-	- [Test Driven Development](#test-driven-development)
-		- [Glossary](#glossary)
-		- [Test File Naming Conventions](#test-file-naming-conventions)
-	- [How to Build Components](#how-to-build-components)
-		- [Adding Material UI Theme to Component Tests](#adding-material-ui-theme-to-component-tests)
-		- [Using Correct Link Component](#using-correct-link-component)
-		- [Mocking NextJs Router in Component Tests](#mocking-nextjs-router-in-component-tests)
-		- [Mocking Static Images](#mocking-static-images)
-	- [How to Build Pages/Routes](#how-to-build-pagesroutes)
-		- [Integration Tests](#integration-tests)
-		- [How to mock the API](#how-to-mock-the-api)
-		- [Mocking API calls in NextJs SSR functions](#mocking-api-calls-in-nextjs-ssr-functions)
-	- [The API](#the-api)
-		- [The current map API](#the-current-map-api)
-		- [The in-progress API](#the-in-progress-api)
-		- [Using our mock API server](#using-our-mock-api-server)
-		- [Config](#config)
-	- [The route/URL spec](#the-routeurl-spec)
-	- [UI design resource](#ui-design-resource)
-	- [Code style guide](#code-style-guide)
-		- [Prettier](#prettier)
-		- [Eslint](#eslint)
-		- [husky](#husky)
-		- [Commit Message and PR Title Format](#commit-message-and-pr-title-format)
-	- [Other resource from Greenstand](#other-resource-from-greenstand)
+  - [Project Description](#project-description)
+  - [Development Environment Quick Start](#development-environment-quick-start)
+  - [Workflow with Github](#workflow-with-github)
+  - [Test Driven Development](#test-driven-development)
+    - [Glossary](#glossary)
+    - [Test File Naming Conventions](#test-file-naming-conventions)
+  - [How to Build Components](#how-to-build-components)
+    - [Adding Material UI Theme to Component Tests](#adding-material-ui-theme-to-component-tests)
+    - [Using Correct Link Component](#using-correct-link-component)
+    - [Mocking NextJs Router in Component Tests](#mocking-nextjs-router-in-component-tests)
+    - [Mocking Static Images](#mocking-static-images)
+  - [How to Build Pages/Routes](#how-to-build-pagesroutes)
+    - [Integration Tests](#integration-tests)
+    - [How to mock the API](#how-to-mock-the-api)
+    - [Mocking API calls in NextJs SSR functions](#mocking-api-calls-in-nextjs-ssr-functions)
+  - [The API](#the-api)
+    - [The current map API](#the-current-map-api)
+    - [The in-progress API](#the-in-progress-api)
+    - [Using our mock API server](#using-our-mock-api-server)
+    - [Config](#config)
+  - [The route/URL spec](#the-routeurl-spec)
+  - [UI design resource](#ui-design-resource)
+  - [Code style guide](#code-style-guide)
+    - [Prettier](#prettier)
+    - [Eslint](#eslint)
+    - [husky](#husky)
+    - [Lint-Staged](#lint-staged)
+    - [Commit Message and PR Title Format](#commit-message-and-pr-title-format)
+  - [Other resource from Greenstand](#other-resource-from-greenstand)
 
 # Treetracker Web Map Site
 
@@ -318,20 +319,11 @@ You can find the Eslint rules in the .eslintrc.js file.
 
 ### husky
 
-With husky we can use any git hook. Git Hooks are actions that can be executed if a certain Git event occurs. For example when a developer makes a 'git commit' or a 'git push'.
-To add a command to a pre-commit hook or create a new one, use:
+With husky we can use any git hook. Git Hooks are actions that can be executed if a certain Git event occurs. For example when a developer makes a 'git commit' or a 'git push'. Pre-commit hooks are listed in `.husky/pre-commit`
 
-```
-npx husky add .husky/pre-commit "<your command>"
-```
-
-.husky folder contains all our hooks. E.g.:
-
-```
-npx pretty-quick --staged
-```
+### Lint-Staged
 
-The [pretty-quick](https://www.npmjs.com/package/pretty-quick) npm package runs Prettier on your changed files.
+[Lint-staged](https://github.com/okonet/lint-staged) is used with husky to run actions exclusively on staged files. This allows us to lint staged files and automatically add fixes to the commit.
 
 ### Commit Message and PR Title Format
 

package.json

@@ -95,10 +95,5 @@
 		"webpack": "^5.58.2",
 		"webpack-dev-server": "^3.11.2"
 	},
-	"proxy": "http://127.0.0.1:3001",
-	"lint-staged": {
-		"*.js": [
-			"eslint --cache --fix"
-		]
-	}
+	"proxy": "http://127.0.0.1:3001"
 }