EREGCSC-1509 -- ESLint Enhancements (#1535)

* chore: remove prettier, update ESLint rules

* chore: begin working through ESLint issues

* chore: bump javascript-test checkout action ver

* chore: continue formatting Vue/JS based on ESLint rules

* chore: eslint-global-rules file at project root

* chore: fix all fixable things

* chore: remove prettier from package.json

* chore: add eslint make commant

* chore: add ESLint action

* chore: add actual yml file

* chore: tweak job name in yml

* fix: first fixes due to ESLint action

* chore: add eslint to cdk-eregs package.json

* chore: more global eslint rules up one dir

* chore: add basic eslint config to CDK directory

* chore: first pass as CDK linting in GitHub action

* fix: tweak eslint github action pathing

* chore: remove debug flag from cdk eslint cmd

* test: tweak Cypress search test suite

* fix: remove duplicate rule

* chore: small tweak to cdk eslint config

* chore: indent rules

* chore: make four-space indent mandatory for js/vue only

* chore: update make file

* chore: add editorconfig for js/ts spacing diff default

* chore: update code comment

* chore: update cdk-eregs ESLint to handle JS better

* chore: add ESLint JS rules to front end eslint config

also update lib vers

* chore: further linting and formatting

* chore: update ESLint documentation

* fix: relative path in README to another md file

* fix: relative path in README to another md file

* chore: disable CDK linting for now

.editorconfig

@@ -0,0 +1,12 @@
+# top-most EditorConfig file
+root = true
+
+# 2 space indentation for .ts files
+[*.ts]
+indent_style = space
+indent_size = 2
+
+# 4 space indentation for .js/.cjs/.mjs files
+[*.{js,cjs,mjs}]
+indent_style = space
+indent_size = 4

.github/workflows/eslint-linting.yml

@@ -0,0 +1,37 @@
+name: "ESLint"
+
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  lint-eslint:
+    runs-on: ubuntu-22.04
+    steps:
+      # Checkout the code
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+      # Setup node environment
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      # Execute linting
+      - name: Run ESLint on front end
+        if: success()
+        working-directory: ./solution
+        run: |
+          make eslint-frontend
+      - name: Run ESLint on CDK TS files
+        # if: success()
+        if: false # Disable CDK linting for now
+        working-directory: ./solution
+        run: |
+          make eslint-cdk

.github/workflows/javascript-test.yml

@@ -17,12 +17,12 @@ jobs:
     steps:
       # Checkout the code
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           submodules: true
       # Setup node environment
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
       # Install Front End dependencies

README.md

@@ -112,6 +112,28 @@ Before running the tests for the first time, you may need to install Cypress dep
 4. For Python unit tests, run `make test.pytest`. This will run our Python unittest using pytest.
 5. For Vitest run `make test.vitest`.  This will run our Vitest suite.
 
+## Linting and Formatting
+
+#### ESLint
+
+This project utilizes ESLint to maintain high code quality and enforce consistent coding styles across both the frontend (JavaScript) and infrastructure (TypeScript) components.  ESLint helps identify potential issues early, improving code readability and reducing the likelihood of runtime errors.
+
+We leverage a shared ESLint configuration (`eslint-global-rules.mjs` file) at the project root to define a baseline of rules applicable to both the frontend and infrastructure code. This promotes consistency in fundamental coding practices across the entire project.
+
+Each application (frontend and CDK) also maintains its own dedicated ESLint configuration file. This allows us to tailor rules and plugins specifically to the nuances of JavaScript and TypeScript, respectively, while still adhering to the core shared principles.  This approach ensures that each part of the project benefits from the appropriate linting rules for its language and context.
+
+To run ESLint, execute the following commands from the project root:
+
+```
+// lint the frontend JS
+make eslint-frontend
+
+// lint CDK TS
+make eslint-cdk
+```
+
+For more information on ESLint, as well as resources to help integrate ESLint into your text editor, see [LINTING.md](solution/LINTING.md).
+
 ## Working with assets
 
 Navigate to project root.

cdk-eregs/eslint.config.mjs

@@ -0,0 +1,22 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import globalConfig from "../eslint-global-rules.mjs";
+
+export default [
+    { files: ["**/*.{js,mjs,cjs,ts}"] },
+    { languageOptions: { globals: globals.browser } },
+    ...tseslint.configs.recommended,
+    {
+        files: ["**/*.js"],
+        rules: {
+            ...pluginJs.configs.recommended.rules,
+            "indent": ["error", 4, { SwitchCase: 1 }],
+        } 
+    },
+    {
+        rules: {
+            ...globalConfig,
+        },
+    },
+];

cdk-eregs/jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  testEnvironment: 'node',
-  roots: ['<rootDir>/test'],
-  testMatch: ['**/*.test.ts'],
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest'
-  }
+    testEnvironment: 'node',
+    roots: ['<rootDir>/test'],
+    testMatch: ['**/*.test.ts'],
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+    }
 };