Make ESLint config stricter (#22)

# Make ESLint config stricter

## ♻️ Current situation & Problem
Current ESLint config is fine, but it can be configured way strictier.
It enforces good practives, improves quality of the code and guarantees
consistency.


## ⚙️ Release Notes 
* Make ESLint config stricter


### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

---------

Co-authored-by: Paul Schmiedmayer <[email protected]>

.eslintrc.json

@@ -1,8 +1,112 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["prettier"],
-  "ignorePatterns": ["**/dist/*.js", "/docs/**", "/out/**"],
+  "plugins": ["prettier", "@typescript-eslint", "import"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:@typescript-eslint/strict-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "ignorePatterns": [
+    "**/dist/*",
+    "/docs/**",
+    "/out/**",
+    "**/jest.config.js",
+    "**/next.config.js",
+    "**/postcss.config.js",
+    "**/tailwind.config.js"
+  ],
   "rules": {
-    "prettier/prettier": "error"
-  }
+    "prettier/prettier": "error",
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal", ["parent", "sibling"]],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "newlines-between": "never",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "import/no-empty-named-blocks": "error",
+    "import/no-mutable-exports": "error",
+    "import/no-cycle": "error",
+    "import/extensions": [
+      "warn",
+      "always",
+      {
+        "ts": "never",
+        "tsx": "never",
+        "js": "never",
+        "jsx": "never",
+        "mjs": "never"
+      }
+    ],
+    "import/newline-after-import": "warn",
+    "import/no-anonymous-default-export": "warn",
+    "import/no-default-export": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports",
+        "disallowTypeAnnotations": false
+      }
+    ],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": {
+          "attributes": false
+        }
+      }
+    ],
+    "import/no-duplicates": [
+      "error",
+      {
+        "prefer-inline": true
+      }
+    ],
+    // false negatives
+    "import/namespace": ["off"],
+    "no-empty-pattern": "off",
+    // make sure to `await` inside try…catch
+    "@typescript-eslint/return-await": ["error", "in-try-catch"],
+    "@typescript-eslint/no-confusing-void-expression": [
+      "error",
+      { "ignoreArrowShorthand": true }
+    ],
+    // empty interfaces are fine, e.g. React component that extends other component, but with no additional props
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/array-type": [
+      "warn",
+      { "default": "array-simple", "readonly": "array-simple" }
+    ],
+    // allow unused vars prefixed with `_`
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    // numbers and booleans are fine in template strings
+    "@typescript-eslint/restrict-template-expressions": [
+      "error",
+      { "allowNumber": true, "allowBoolean": true }
+    ],
+    "react/no-unescaped-entities": "off"
+  },
+  "overrides": [
+    {
+      "files": ["app/**/*.ts?(x)"],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ]
 }

.github/workflows/codeql.yml

@@ -28,11 +28,11 @@ jobs:
       actions: read
       contents: read
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: javascript-typescript
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: javascript-typescript
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3

.github/workflows/monthly-markdown-link-check.yml

@@ -10,7 +10,7 @@ name: Monthly Markdown Link Check
 
 on:
   schedule:
-    - cron: "0 8 1 * *"
+    - cron: '0 8 1 * *'
 
 jobs:
   markdown_link_check:

.prettierignore

@@ -0,0 +1,10 @@
+#
+# This source file is part of the Stanford Biodesign Digital Health Next.js Template open-source project
+#
+# SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+#
+# SPDX-License-Identifier: MIT
+#
+
+**/dist
+node_modules

app/page.test.tsx

@@ -24,9 +24,9 @@ describe('Home Component', () => {
   it('renders the Stanford Biodesign Logo', () => {
     render(<Home />)
 
-    const imageElement = screen.getByAltText(
+    const imageElement: HTMLImageElement = screen.getByAltText(
       'Stanford Biodesign Logo',
-    ) as HTMLImageElement
+    )
 
     expect(imageElement).toBeInTheDocument()
     expect(imageElement.src).toContain('stanfordbiodesign.png')

app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
     <div className="flex min-h-screen items-center justify-center">
       <div className="flex flex-col items-center">
         <Image
-          src={`${process.env.basePath || ''}/stanfordbiodesign.png`}
+          src={`${process.env.basePath ?? ''}/stanfordbiodesign.png`}
           alt="Stanford Biodesign Logo"
           width={634}
           height={235}