Bump ESLint and related dependencies (#2986)

* Bump lint-related dependencies

* Migrate to ESLint flat config

* Fix plugin errors

Also updated ESLint yarn script.

* Remove unused directive

* Remove unused plugin for now

* Deduplicate dependencies

* Restore old lint behavior

* Add TODO for future lint rules

* Fix format, format script

* Disable CRA's ESLint

eslint.config.js

@@ -0,0 +1,77 @@
+// @ts-check
+
+// Todo: Use ES module
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const reactRefresh = require('eslint-plugin-react-refresh');
+
+const FlatCompat = require('@eslint/eslintrc').FlatCompat;
+const compat = new FlatCompat({
+  baseDirectory: `${__dirname}`
+});
+
+module.exports = tseslint.config(
+  { ignores: ['eslint.config.js'] },
+  // eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  // TODO: Enable when ready
+  // {
+  //   plugins: {
+  //     'react-refresh': reactRefresh
+  //   },
+  //   rules: {
+  //     'react-refresh/only-export-components': 'warn'
+  //   }
+  // },
+  ...compat.config({
+    extends: [
+      'plugin:react-hooks/recommended'
+      // "plugin:react/recommended",
+      // "plugin:react/jsx-runtime"
+    ],
+    plugins: ['simple-import-sort'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'react-redux',
+              importNames: [
+                // TODO: Create typed hook for useDispatch
+                // "useDispatch",
+                'useSelector'
+              ],
+              message: 'Use the typed hook "useTypedSelector" instead.'
+            }
+          ]
+        }
+      ],
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-duplicate-enum-values': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/camelcase': 'off',
+      '@typescript-eslint/no-inferrable-types': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/ban-types': [
+        'error',
+        {
+          // TODO: Change this to true someday
+          extendDefaults: false,
+          types: {
+            'React.FunctionComponent': {
+              message: 'Use React.FC instead',
+              fixWith: 'React.FC'
+            }
+          }
+        }
+      ],
+      'simple-import-sort/imports': 'error'
+    }
+  })
+);

package.json

@@ -12,17 +12,17 @@
   },
   "scripts": {
     "analyze": "yarn build --stats; webpack-bundle-analyzer build/bundle-stats.json",
-    "build": "cross-env EXTEND_ESLINT=true NODE_OPTIONS=--max_old_space_size=8192 craco build",
+    "build": "cross-env DISABLE_ESLINT_PLUGIN=true NODE_OPTIONS=--max_old_space_size=8192 craco build",
     "coverage": "./scripts/coverage-fix.sh do && craco test --coverage && ./scripts/coverage-fix.sh undo",
-    "format": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix src && prettier --write \"src/**/*.{js,jsx,ts,tsx}\" && prettier --write --parser scss \"src/**/*.scss\"",
+    "format": "eslint --fix src && prettier --write \"src/**/*.{js,jsx,ts,tsx}\" && prettier --write --parser scss \"src/**/*.scss\"",
     "format:tsx": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
     "format:scss": "prettier --list-different --parser scss \"src/**/*.scss\"",
     "format:ci": "yarn run format:tsx && yarn run format:scss",
-    "start": "cross-env EXTEND_ESLINT=true BROWSER=none PORT=8000 craco start",
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=true BROWSER=none PORT=8000 craco start",
     "test": "cross-env TZ=UTF-8 craco test",
     "test-coveralls": "./scripts/test-coveralls.sh",
     "update-ui-snapshots": "jest --updateSnapshot",
-    "eslint": "eslint --ext \".js,.jsx,.ts,.tsx\" src",
+    "eslint": "eslint src",
     "prepare": "husky"
   },
   "dependencies": {
@@ -133,15 +133,17 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
     "babel-jest": "^29.7.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^9.1.1",
+    "eslint-plugin-react": "^7.34.1",
+    "//": "See: https://github.com/facebook/react/issues/28313#issuecomment-2076798972, https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2076413457",
+    "eslint-plugin-react-hooks": "5.1.0-canary-cb151849e1-20240424",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
@@ -160,6 +162,7 @@
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
     "typescript": "^5.4.3",
+    "typescript-eslint": "^7.8.0",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"
   },

src/commons/XMLParser/XMLParserHelper.ts

@@ -111,7 +111,6 @@ const makeAssessment = (result: any): [Assessment, number] => {
 };
 
 const altEval = (str: string): any => {
-  // eslint-disable-next-line no-new-func
   return Function('"use strict";return (' + str + ')')();
 };
 

src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx

@@ -237,7 +237,6 @@ const removeSpaces = (str: string | number) => {
 };
 
 const altEval = (str: string): any => {
-  // eslint-disable-next-line no-new-func
   return Function('"use strict";return (' + str + ')')();
 };
 

src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Button, H2, Intent } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';

src/service-worker.ts

@@ -1,5 +1,4 @@
 /// <reference lib="webworker" />
-/* eslint-disable no-restricted-globals */
 
 import { clientsClaim } from 'workbox-core';
 import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';