Fix and optimize ESLint config (#25)

## Changes

These changes fix a number of issues I noticed or ran into when opening
the top-level directory in VS Code.

- Change the ESLint settings file from a JSON file to a JS file, where
we now use `__dirname` for `tsconfigRootDir`. The previous setting
wasn't working for me. This also allows us to add inline code comments
to explain the confusing aspects of the file (basically every line).
- Set `root: true` so ESLint doesn't attempt to continue searching for
lint settings above the `app` directory
- Move Jest and TypeScript-specific linter settings into their own
`overrides` blocks. This is an optimization, but also fixed an issue I
was running into (see screenshot below)

## Testing

Before:

<img width="515" alt="CleanShot 2022-09-26 at 17 27 10@2x"
src="https://user-images.githubusercontent.com/371943/192404198-b9a1d52e-5058-4e8b-84c2-d81ea660e49b.png">

After moving TypeScript lint settings into `overrides` (working TS and
ESLint actions, but redundant errors):

<img width="726" alt="CleanShot 2022-09-26 at 17 28 58@2x"
src="https://user-images.githubusercontent.com/371943/192404275-c4a4e758-8b7c-43b2-b497-9fceac2ee7fa.png">

After `plugin:@typescript-eslint/eslint-recommended` was added to the
list (less redundant errors)

<img width="904" alt="CleanShot 2022-09-28 at 18 12 20@2x"
src="https://user-images.githubusercontent.com/371943/192916141-832f2f5e-97fc-4609-8e61-052ebac67742.png">

Author: sawyerh

.gitignore

@@ -1,2 +1,4 @@
 # MacOS files
 .DS_Store
+# Developer-specific IDE settings
+.vscode/settings.json

app/.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+  root: true,
+  extends: [
+    "nava",
+    // Disable ESLint code formatting rules which conflict with Prettier
+    "prettier",
+    // `next` should be extended last according to their docs
+    // https://nextjs.org/docs/basic-features/eslint
+    "next/core-web-vitals",
+  ],
+  // Additional lint rules. These get layered onto the top-level rules.
+  overrides: [
+    // Lint config specific to Test files
+    {
+      files: ["tests/**"],
+      plugins: ["jest"],
+      extends: ["plugin:jest/recommended"],
+    },
+    // Lint config specific to TypeScript files
+    {
+      files: "**/*.+(ts|tsx)",
+      parserOptions: {
+        // These paths need defined to support rules that require type information
+        tsconfigRootDir: __dirname,
+        project: ["./tsconfig.json"],
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        // Disable vanilla ESLint rules that conflict with those in @typescript-eslint
+        "plugin:@typescript-eslint/eslint-recommended",
+        // Rules that specifically require type information
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        // Prevent dead code accumulation
+        "@typescript-eslint/no-unused-vars": "error",
+        // The usage of `any` defeats the purpose of typescript. Consider using `unknown` type instead instead.
+        "@typescript-eslint/no-explicit-any": "error",
+      },
+    },
+  ],
+  settings: {
+    // Support projects where Next.js isn't installed in the root directory (such as a monorepo)
+    next: {
+      rootDir: __dirname,
+    },
+  },
+};

app/.eslintrc.json

@@ -30,13 +30,14 @@ For linting, this application is leveraging `eslint`, `prettier` and Nava's [esl
 
 In VSCode, do so by creating a `.vscode/settings.json` file with:
 
-```
+```json
 {
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.workingDirectories": ["./app"]
 }
 ```
 
@@ -48,15 +49,6 @@ For typechecking, this application is leveraging Next.js' [incremental typecheck
 
 Note: make sure TypeScript and Javascript Language Features are enabled in VS Code Extensions.
 
-### Eslint rules explained
-
-- "@typescript-eslint/no-unused-vars": "error"
-  - Disallows unused variables-- prevents dead code accumulation.
-- "@typescript-eslint/no-explicit-any": "error"
-  - Disallows usage of `any` type. The usage of `any` defeats the purpose of typescript. Consider using `unknown` type instead instead.
-- "react/resct-in-jsx-scope": "off"
-  - suppress errors for missing 'import React' in files because NextJS does this for us.
-
 ### Tsconfig additions to auto-generated file
 
 - `target: es6` -- nextJS set this valule to `es5` by default.