Add ESLint v9 and flat config support (#51)

AMorgaut · utarwyn · web-flow · commit 009e7b04c345 · 2025-04-24T23:55:45.000+02:00
Co-authored-by: utarwyn &lt;maxime.malgorn@laposte.net&gt;
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -57,6 +57,9 @@ jobs:
       - name: Update Docker Compose configuration
         run: sed -i -E 's/plugin-(.*).jar/plugin-${{ steps.package-version.outputs.version }}.jar/' docker-compose.yml
 
+      - name: Update ESLint plugin version
+        run: 'sed -i -E ''s/version: "(.*)"/version: "${{ steps.package-version.outputs.version }}"/'' eslint-plugin/lib/standalone.js'
+
       - name: Extract release notes
         id: extract-release-notes
         uses: ffurrer2/extract-release-notes@v1
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   [#51](https://github.com/green-code-initiative/creedengo-javascript/pull/51) Add ESLint v9 and flat config support
+
 ## [2.1.0] - 2025-03-31
 
 ### Added
diff --git a/eslint-plugin/.eslint-doc-generatorrc.js b/eslint-plugin/.eslint-doc-generatorrc.js
@@ -0,0 +1,11 @@
+"use strict";
+
+/** @type {import('eslint-doc-generator').GenerateOptions} */
+const config = {
+  configEmoji: [["flat/recommended", "✅"]],
+  postprocess: (doc) => {
+    return doc.replace(/✅\s*✅/gu, "✅");
+  },
+};
+
+module.exports = config;
diff --git a/eslint-plugin/README.md b/eslint-plugin/README.md
@@ -8,7 +8,7 @@ An ESLint plugin which provides JavaScript and TypeScript rules of the Creedengo
 
 ### Installation
 
-You'll need to install [ESLint](https://eslint.org/) (v7 or v8) and this plugin:
+You'll need to install [ESLint](https://eslint.org/) (v7+) and this plugin:
 
 ```sh
 # yarn
@@ -32,19 +32,54 @@ yarn add -D eslint @green-code-initiative/creedengo-eslint-plugin
 npm install -D eslint @green-code-initiative/creedengo-eslint-plugin
 ```
 
-### Enable whole plugin
+### Enable plugin with recommended configuration
 
-Add `@creedengo` recommended configuration to `extends` section of your `.eslintrc`:
+#### ESLint Flat Configuration (`eslint.config.js`)
 
-```jsonc
+Add `@creedengo` **"flat/recommended"** configuration to your `eslint.config.js`:
+
+```js
+import creedengo from "@creedengo/eslint-plugin";
+
+export default [
+  /* other eslint configurations */
+  creedengo.configs["flat/recommended"],
+];
+```
+
+#### ESLint deprecated legacy configuration (`.eslintrc`)
+
+For legacy ESLint versions using the deprecated `.eslintrc` file, add the `@creedengo` **"recommended"** configuration to the `extends` array :
+
+```json
 {
-  "extends": ["plugin:@creedengo/recommended"],
+  "extends": ["plugin:@creedengo/recommended"]
 }
 ```
 
-### Enable only some rules
+### Enable specific rules
+
+#### ESLint Flat configuration (`eslint.config.js`)
+
+Add the `creedengo` plugin configuration to your `eslint.config.js` and select the rules to activate:
+
+```js
+import creedengo from "@creedengo/eslint-plugin";
+
+export default [
+  /* other eslint configurations */
+  {
+    plugins: { "@creedengo": creedengo },
+    rules: {
+      "@creedengo/no-multiple-access-dom-element": "error",
+    },
+  },
+];
+```
+
+#### ESLint deprecated legacy configuration (`.eslintrc`)
 
-Add `@creedengo` to the `plugins` section of your `.eslintrc`, followed by rules configuration:
+If your project uses a legacy ESLint version, it may use as well the now deprecated `.eslintrc` file. In such case, add `@creedengo` to the `plugins` array, potentially followed by rules specific configurations:
 
 ```jsonc
 {
@@ -59,9 +94,10 @@ Add `@creedengo` to the `plugins` section of your `.eslintrc`, followed by rules
 
 <!-- begin auto-generated configs list -->
 
-|    | Name          |
-| :- | :------------ |
-| ✅  | `recommended` |
+|    | Name               |
+| :- | :----------------- |
+| ✅  | `flat/recommended` |
+| ✅  | `recommended`      |
 
 <!-- end auto-generated configs list -->
 
@@ -70,25 +106,26 @@ Add `@creedengo` to the `plugins` section of your `.eslintrc`, followed by rules
 <!-- begin auto-generated rules list -->
 
 ⚠️ Configurations set to warn in.\
+✅ Set in the `flat/recommended` configuration.\
 ✅ Set in the `recommended` configuration.
 
-| Name                                                                                           | Description                                               | ⚠️ |
-| :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :- |
-| [avoid-autoplay](docs/rules/avoid-autoplay.md)                                                 | Avoid autoplay for videos and audio content               | ✅  |
-| [avoid-brightness-override](docs/rules/avoid-brightness-override.md)                           | Should avoid to override brightness                       | ✅  |
-| [avoid-css-animations](docs/rules/avoid-css-animations.md)                                     | Avoid usage of CSS animations                             | ✅  |
-| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)               | Avoid using high accuracy geolocation in web applications | ✅  |
-| [avoid-keep-awake](docs/rules/avoid-keep-awake.md)                                             | Avoid screen keep awake                                   | ✅  |
-| [limit-db-query-results](docs/rules/limit-db-query-results.md)                                 | Should limit the number of returns for a SQL query        | ✅  |
-| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)                     | Disallow usage of image with empty source attribute       | ✅  |
-| [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                         | Should not import all from library                        | ✅  |
-| [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)                 | Disallow multiple access of same DOM element              | ✅  |
-| [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                           | Disallow multiple style changes at once                   | ✅  |
-| [no-torch](docs/rules/no-torch.md)                                                             | Should not programmatically enable torch mode             | ✅  |
-| [prefer-collections-with-pagination](docs/rules/prefer-collections-with-pagination.md)         | Prefer API collections with pagination                    | ✅  |
-| [prefer-lighter-formats-for-image-files](docs/rules/prefer-lighter-formats-for-image-files.md) | Prefer lighter formats for image files                    | ✅  |
-| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)                 | Encourage usage of shorthand CSS notations                | ✅  |
-| [provide-print-css](docs/rules/provide-print-css.md)                                           | Enforce providing a print stylesheet                      | ✅  |
+| Name                                                                                           | Description                                               | ⚠️  |
+| :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :-- |
+| [avoid-autoplay](docs/rules/avoid-autoplay.md)                                                 | Avoid autoplay for videos and audio content               | ✅ |
+| [avoid-brightness-override](docs/rules/avoid-brightness-override.md)                           | Should avoid to override brightness                       | ✅ |
+| [avoid-css-animations](docs/rules/avoid-css-animations.md)                                     | Avoid usage of CSS animations                             | ✅ |
+| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)               | Avoid using high accuracy geolocation in web applications | ✅ |
+| [avoid-keep-awake](docs/rules/avoid-keep-awake.md)                                             | Avoid screen keep awake                                   | ✅ |
+| [limit-db-query-results](docs/rules/limit-db-query-results.md)                                 | Should limit the number of returns for a SQL query        | ✅ |
+| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)                     | Disallow usage of image with empty source attribute       | ✅ |
+| [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                         | Should not import all from library                        | ✅ |
+| [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)                 | Disallow multiple access of same DOM element              | ✅ |
+| [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                           | Disallow multiple style changes at once                   | ✅ |
+| [no-torch](docs/rules/no-torch.md)                                                             | Should not programmatically enable torch mode             | ✅ |
+| [prefer-collections-with-pagination](docs/rules/prefer-collections-with-pagination.md)         | Prefer API collections with pagination                    | ✅ |
+| [prefer-lighter-formats-for-image-files](docs/rules/prefer-lighter-formats-for-image-files.md) | Prefer lighter formats for image files                    | ✅ |
+| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)                 | Encourage usage of shorthand CSS notations                | ✅ |
+| [provide-print-css](docs/rules/provide-print-css.md)                                           | Enforce providing a print stylesheet                      | ✅ |
 
 <!-- end auto-generated rules list -->
 
diff --git a/eslint-plugin/docs/rules/avoid-autoplay.md b/eslint-plugin/docs/rules/avoid-autoplay.md
@@ -1,6 +1,6 @@
 # Avoid autoplay for videos and audio content (`@creedengo/avoid-autoplay`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/avoid-brightness-override.md b/eslint-plugin/docs/rules/avoid-brightness-override.md
@@ -1,6 +1,6 @@
 # Should avoid to override brightness (`@creedengo/avoid-brightness-override`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/avoid-css-animations.md b/eslint-plugin/docs/rules/avoid-css-animations.md
@@ -1,6 +1,6 @@
 # Avoid usage of CSS animations (`@creedengo/avoid-css-animations`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/avoid-high-accuracy-geolocation.md b/eslint-plugin/docs/rules/avoid-high-accuracy-geolocation.md
@@ -1,6 +1,6 @@
 # Avoid using high accuracy geolocation in web applications (`@creedengo/avoid-high-accuracy-geolocation`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/avoid-keep-awake.md b/eslint-plugin/docs/rules/avoid-keep-awake.md
@@ -1,6 +1,6 @@
 # Avoid screen keep awake (`@creedengo/avoid-keep-awake`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/limit-db-query-results.md b/eslint-plugin/docs/rules/limit-db-query-results.md
@@ -1,6 +1,6 @@
 # Should limit the number of returns for a SQL query (`@creedengo/limit-db-query-results`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/no-empty-image-src-attribute.md b/eslint-plugin/docs/rules/no-empty-image-src-attribute.md
@@ -1,6 +1,6 @@
 # Disallow usage of image with empty source attribute (`@creedengo/no-empty-image-src-attribute`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/no-import-all-from-library.md b/eslint-plugin/docs/rules/no-import-all-from-library.md
@@ -1,6 +1,6 @@
 # Should not import all from library (`@creedengo/no-import-all-from-library`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/no-multiple-access-dom-element.md b/eslint-plugin/docs/rules/no-multiple-access-dom-element.md
@@ -1,6 +1,6 @@
 # Disallow multiple access of same DOM element (`@creedengo/no-multiple-access-dom-element`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/no-multiple-style-changes.md b/eslint-plugin/docs/rules/no-multiple-style-changes.md
@@ -1,6 +1,6 @@
 # Disallow multiple style changes at once (`@creedengo/no-multiple-style-changes`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/no-torch.md b/eslint-plugin/docs/rules/no-torch.md
@@ -1,6 +1,6 @@
 # Should not programmatically enable torch mode (`@creedengo/no-torch`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 ## Why is this an issue?
diff --git a/eslint-plugin/docs/rules/prefer-collections-with-pagination.md b/eslint-plugin/docs/rules/prefer-collections-with-pagination.md
@@ -1,6 +1,6 @@
 # Prefer API collections with pagination (`@creedengo/prefer-collections-with-pagination`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/prefer-lighter-formats-for-image-files.md b/eslint-plugin/docs/rules/prefer-lighter-formats-for-image-files.md
@@ -1,6 +1,6 @@
 # Prefer lighter formats for image files (`@creedengo/prefer-lighter-formats-for-image-files`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations.md
@@ -1,6 +1,6 @@
 # Encourage usage of shorthand CSS notations (`@creedengo/prefer-shorthand-css-notations`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/docs/rules/provide-print-css.md b/eslint-plugin/docs/rules/provide-print-css.md
@@ -1,6 +1,6 @@
 # Enforce providing a print stylesheet (`@creedengo/provide-print-css`)
 
-⚠️ This rule _warns_ in the ✅ `recommended` config.
+⚠️ This rule _warns_ in the following configs: ✅ `flat/recommended`, ✅ `recommended`.
 
 <!-- end auto-generated rule header -->
 
diff --git a/eslint-plugin/lib/rules/no-multiple-access-dom-element.js b/eslint-plugin/lib/rules/no-multiple-access-dom-element.js
@@ -54,15 +54,18 @@ module.exports = {
         ) {
           const selectorValue = node.arguments[0].value;
           const uniqueCallStr = node.callee.property.name + selectorValue;
+          // todo: legacy support of context#getScope for eslint v7
+          const scope =
+            context.sourceCode?.getScope(node) ?? context.getScope();
 
-          if (map[uniqueCallStr] === context.getScope()) {
+          if (map[uniqueCallStr] === scope) {
             context.report({
               node,
               messageId: "ShouldBeAssignToVariable",
               data: { selector: selectorValue },
             });
           } else {
-            map[uniqueCallStr] = context.getScope();
+            map[uniqueCallStr] = scope;
           }
         }
       },
diff --git a/eslint-plugin/lib/rules/no-multiple-style-changes.js b/eslint-plugin/lib/rules/no-multiple-style-changes.js
@@ -40,7 +40,7 @@ module.exports = {
     const getNodeFullName = (node) => {
       let names = [];
       do {
-        names.unshift(node.name ?? node.property.name);
+        names.unshift(node.name ?? node.property?.name);
         node = node.object;
       } while (node);
       return names.join(".");
@@ -60,10 +60,13 @@ module.exports = {
            * Store parent AST to check if there is more
            * than one assignation on the style of the same domElement
            */
+          // todo: legacy support of context#getScope for eslint v7
+          const scope =
+            context.sourceCode?.getScope(node) ?? context.getScope();
           const currentScopeASTBody =
-            context.getScope().block.body.length != null
-              ? context.getScope().block.body
-              : context.getScope().block.body.body;
+            scope.block.body.length != null
+              ? scope.block.body
+              : scope.block.body.body;
 
           const filtered = currentScopeASTBody.filter(
             (e) =>
diff --git a/eslint-plugin/lib/rules/prefer-collections-with-pagination.js b/eslint-plugin/lib/rules/prefer-collections-with-pagination.js
@@ -90,10 +90,12 @@ module.exports = {
               returnType.type === "TSTypeReference" &&
               returnType.typeName.name === "Promise"
             ) {
-              if (
-                returnType.typeParameters.params.length === 1 &&
-                !isPaginated(returnType.typeParameters.params[0])
-              ) {
+              // todo: legacy support of typeParameters for eslint v7
+              const params = (
+                returnType.typeArguments ?? returnType.typeParameters
+              ).params;
+
+              if (params.length === 1 && !isPaginated(params[0])) {
                 report(context, returnType);
               }
             } else if (
diff --git a/eslint-plugin/lib/standalone.js b/eslint-plugin/lib/standalone.js
@@ -24,19 +24,33 @@
 
 const rules = require("./rule-list");
 
-const ruleModules = rules.reduce((map, rule) => {
-  map[rule.ruleName] = rule.ruleModule;
-  return map;
-}, {});
+const allRules = {};
+const recommendedRules = {};
 
-const ruleConfigs = rules.reduce((map, rule) => {
-  const recommended = rule.ruleModule.meta.docs.recommended;
-  map[`@creedengo/${rule.ruleName}`] =
-    recommended === false ? "off" : recommended;
-  return map;
-}, {});
+for (let { ruleName, ruleModule } of rules) {
+  allRules[ruleName] = ruleModule;
+  const { recommended } = ruleModule.meta.docs;
+  const ruleConfiguration = recommended === false ? "off" : recommended;
+  recommendedRules[`@creedengo/${ruleName}`] = ruleConfiguration;
+}
 
-module.exports = {
-  rules: ruleModules,
-  configs: { recommended: { plugins: ["@creedengo"], rules: ruleConfigs } },
+const plugin = {
+  meta: {
+    name: "@creedengo/eslint-plugin",
+    version: "2.1.0", // dynamically updated by the release workflow
+  },
+  rules: allRules,
 };
+
+plugin.configs = {
+  recommended: {
+    plugins: ["@creedengo"],
+    rules: recommendedRules,
+  },
+  ["flat/recommended"]: {
+    plugins: { "@creedengo": plugin },
+    rules: recommendedRules,
+  },
+};
+
+module.exports = plugin;
