Reconfigure ESLint with flat config (#577)

* Upgrade ESLint configuration to new flat config

We sadly have to get rid of cypress for the moment.

* Run linter with `--no-warn-ignored` flag

See this answer: https://stackoverflow.com/a/77758970/9655481
for the background behind this change.

* Also lint the ESLint config file itself

* Get rid of `--ignore-path .gitignore`

.github/workflows/linter.yml

@@ -49,7 +49,8 @@ jobs:
           id: js-changed
           uses: ./.github/actions/changed_files/
           with:
-            file-extensions: \.js$|\.js.erb$
+            # .(mjs is only used for eslint.config.mjs as of January 2024)
+            file-extensions: \.js$|\.mjs$|\.js.erb$
 
         - name: Setup Node.js
           if: ${{ steps.js-changed.outputs.changed-files != ''}}
@@ -62,8 +63,13 @@ jobs:
           if: ${{ steps.js-changed.outputs.changed-files != ''}}
           run: yarn install
 
+        # with ESLint v9 --ignore-path does not exist anymore
+        # see [1] for the PR. However, my feeling for this is totally reflected
+        # by [2]. Hopefully, it will come back in future versions.
+        # [1] https://github.com/eslint/eslint/pull/16355
+        # [2] https://github.com/eslint/eslint/issues/16264#issuecomment-1292858747
         - name: Run ESLint
           if: ${{ steps.js-changed.outputs.changed-files != ''}}
           run: |
             echo "🚨 Running ESLint version: $(yarn run --silent eslint --version)"
-            yarn run eslint --ignore-path .gitignore --max-warnings 0 ${{ steps.js-changed.outputs.changed-files }}
+            yarn run eslint --max-warnings 0 --no-warn-ignored ${{ steps.js-changed.outputs.changed-files }}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+    "editor.formatOnSave": false, // it still autosaves with the options below
     //////////////////////////////////////
     // JS (ESLint)
     //////////////////////////////////////
@@ -12,6 +13,7 @@
         "source.fixAll.eslint": "explicit"
     },
     "eslint.format.enable": true, // use ESLint as formatter
+    "eslint.experimental.useFlatConfig": true,
     // this disables VSCode built-in formatter (instead we want to use ESLint)
     "javascript.validate.enable": false,
     //////////////////////////////////////

eslint.config.mjs

@@ -0,0 +1,86 @@
+// Starting with v9, this config will be deprecated in favor of the new
+// configuration files [1]. @stylistic is already ready for the new "flat config",
+// when it's time, copy the new config from [2].
+// [1] https://eslint.org/docs/latest/use/configure/configuration-files-new
+// [2] https://eslint.style/guide/config-presets#configuration-factory
+
+// Stylistic Plugin for ESLint
+// see the rules in [3] and [4].
+// [3] https://eslint.style/packages/js#rules
+// [4] https://eslint.org/docs/rules/
+import js from "@eslint/js";
+import stylistic from "@stylistic/eslint-plugin";
+import erb from "eslint-plugin-erb";
+import globals from "globals";
+
+const ignoreFilesWithSprocketRequireSyntax = [
+  "app/assets/javascripts/application.js",
+  "app/assets/config/manifest.js",
+  "app/assets/javascripts/edit_clicker_assets.js",
+  "app/assets/javascripts/show_clicker_assets.js",
+  "app/assets/javascripts/geogebra_assets.js",
+  "vendor/assets/javascripts/thredded_timeago.js",
+];
+
+const customGlobals = {
+  TomSelect: "readable",
+  bootstrap: "readable",
+
+  // Rails globals
+  Routes: "readable",
+  App: "readable",
+  ActionCable: "readable",
+
+  // Common global methods
+  initBootstrapPopovers: "readable",
+};
+
+// We don't have cypress linting yet, as the Cypress ESLint plugin
+// doesn't support the new flat config yet
+// https://github.com/cypress-io/eslint-plugin-cypress/issues/146
+
+export default [
+  js.configs.recommended,
+  // Allow linting of ERB files, see https://github.com/Splines/eslint-plugin-erb
+  erb.configs.recommended,
+  // Globally ignore the following files
+  {
+    ignores: [
+      "node_modules/",
+      "pdfcomprezzor/",
+      "tmp/",
+      "public/packs/",
+      "public/packs-test/",
+      "public/uploads/",
+      "public/pdfcomprezzor/",
+      "spec/cypress/",
+      ...ignoreFilesWithSprocketRequireSyntax,
+    ],
+  },
+  {
+    plugins: {
+      "@stylistic": stylistic,
+    },
+    rules: {
+      ...stylistic.configs.customize({
+        "indent": 2,
+        "jsx": false,
+        "quote-props": "always",
+        "semi": "always",
+        "brace-style": "1tbs",
+      }).rules,
+      "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
+      "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      globals: {
+        ...customGlobals,
+        ...globals.browser,
+        ...globals.jquery,
+        ...globals.node,
+      },
+    },
+  },
+];

package.json

@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.5.0",
-    "eslint": "^8.55.0",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-erb": "^1.1.0"
+    "eslint": "^9.0.0-alpha.0",
+    "eslint-plugin-erb": "^2.0.0",
+    "globals": "^13.24.0"
   }
 }