Migrate eslint config to v9

package.json

@@ -32,9 +32,9 @@
     "turbo": "2.1.3",
     "typescript": "5.5.4"
   },
-  "packageManager": "pnpm@9.10.0",
+  "packageManager": "pnpm@10.11.0",
   "engines": {
-    "node": ">=20 <22",
+    "node": ">=20",
     "pnpm": ">=9"
   }
 }

packages/eslint-config/README.md

@@ -1,6 +1,8 @@
 # @12deg/eslint-config
 Custom ESLint configuration for streamlined linting across projects.
 
+**⚡ ESLint 9 Compatible**: This package now supports ESLint 9 with the new flat config format.
+
 ## Supported configurations:
 - `@12deg/eslint-config/fastify` fastify apis and libraries
 - `@12deg/eslint-config/react` for react libraries
@@ -16,16 +18,17 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @12deg/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-import@2.31.0 eslint-plugin-n@14.0.0 eslint-plugin-prettier@5.2.1 eslint-plugin-promise@7.1.0 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+  $ npm i -D @12deg/eslint-config eslint
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config/fastify"],
-  };
+  import baseConfig from "@12deg/eslint-config/fastify";
+
+  export default [
+    ...baseConfig,
+  ];
   ```
 
 * ### For react libraries:
@@ -35,16 +38,15 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @12deg/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.1 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+  $ npm i -D @12deg/eslint-config eslint
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config/react"],
-  };
+  import reactConfig from "@12deg/eslint-config/react";
+
+  export default reactConfig;
   ```
 
 * ### For react apps:
@@ -54,16 +56,15 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @12deg/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-config-react-app@7.0.1 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-cypress@3.6.0 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.1 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+  $ npm i -D @12deg/eslint-config eslint
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config/react-app"],
-  };
+  import reactAppConfig from "@12deg/eslint-config/react-app";
+
+  export default reactAppConfig;
   ```
 
 * ### For vue apps and libraries:
@@ -73,28 +74,30 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @12deg/eslint-config @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.1 eslint-plugin-unicorn@56.0.1 eslint-plugin-vue@9.29.0 prettier@3.3.3 typescript vue-eslint-parser@9.4.3
+  $ npm i -D @12deg/eslint-config eslint
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config/vue"],
-  };
+  import vueConfig from "@12deg/eslint-config/vue";
+
+  export default vueConfig;
   ```
 
   **Note:** If you're using this configuration for a vue app, you may want to disable the `vue/no-reserved-component-names` rule, which prevents using reserved HTML tag names (e.g., Button, Input) as component names. You can do this by adding the following configuration:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config/vue"],
-    rules: {
-      "vue/no-reserved-component-names": "off",
+  import vueConfig from "@12deg/eslint-config/vue";
+
+  export default [
+    ...vueConfig,
+    {
+      rules: {
+        "vue/no-reserved-component-names": "off",
+      }
     }
-  };
+  ];
   ```
 
 * ### For general typescript projects:
@@ -103,32 +106,42 @@ Custom ESLint configuration for streamlined linting across projects.
   Install dependencies:
 
   ```sh
-  npm i -D @12deg/eslint-config eslint@8.57.1 @typescript-eslint/eslint-plugin@8.14.0 @typescript-eslint/parser@8.14.0 eslint@8.57.1 eslint-config-prettier@9.1.0 eslint-import-resolver-alias@1.1.2 eslint-import-resolver-typescript@3.6.3 eslint-plugin-import@2.31.0 eslint-plugin-n@14.0.0 eslint-plugin-prettier@5.2.1 eslint-plugin-promise@7.1.0 eslint-plugin-unicorn@56.0.1 prettier@3.3.3 typescript
+
   ```
 
-  Create a `.eslintrc.js` file:
+  Create a `eslint.config.js` file:
 
   ```js
-  module.exports = {
-    root: true,
-    extends: ["@12deg/eslint-config"],
-  };
-  ```
+  import baseConfig from "@12deg/eslint-config/fastify";
+
+  export default [
+    ...baseConfig,
+  ];
+
+## Migrating from ESLint 8.x
+
+If you're migrating from ESLint 8.x, you'll need to:
+
+1. Update ESLint to version 9.x
+2. Replace your `.eslintrc.js` file with `eslint.config.js` using ES modules syntax
+3. Update your dependencies to the versions listed above
+4. Use the new flat config import syntax shown in the examples
+
+### Legacy Support
+
+If you need to continue using ESLint 8.x with the old `.eslintrc.js` format, you can pin to version `0.1.11` of this package:
+
+```sh
+npm i -D @12deg/eslint-config@0.1.11
+```
 
 ## Adding linting scripts
 In your `package.json`, add the following commands to the `scripts` section:
 
-* For typescript or react projects:
-  ```json
-  "lint": "eslint .",
-  "lint:fix": "eslint . --fix"
-  ```
-
-* For vue projects (including .vue files):
-  ```json
-  "lint": "eslint . --ext .vue",
-  "lint:fix": "eslint . --ext .vue --fix",
-  ```
+```json
+"lint": "eslint .",
+"lint:fix": "eslint . --fix"
+```
 
 ## Running linting
 Run the following command to lint your code: