Feat: Convert to ESLint Flat Config

.changeset/tidy-mangos-sniff.md

@@ -0,0 +1,5 @@
+---
+"@workleap/eslint-plugin": major
+---
+
+Convert all configs to flat config. Update documentation.

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory

docs/eslint/advanced-composition.md

@@ -33,50 +33,61 @@ Each configuration piece can be extended individually, or in combination with ot
 
 To extend the configuration with a single piece:
 
-```json !#4 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": "plugin:@workleap/typescript",
-    "rules": {
-        ...
-    }
-}
+```javascript !#4 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.typescript
+];
+
+export default config;
 ```
 
 ### Multiple pieces
 
 To extend the configuration with multiple pieces:
 
-```json !#4 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": ["plugin:@workleap/core", "plugin:@workleap/typescript"],
-    "rules": {
-        ...
-    }
-}
+```javascript !#4-5 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.core,
+    ...workleapPlugin.configs.typescript,
+];
+
+export default config;
 ```
 
-## Lint additional files
+The `concat` helper from [eslint-flat-config-utils](https://github.com/antfu/eslint-flat-config-utils) is useful to avoid having to spread arrays.
+
+```javascript !#1,4-7 eslint.config.js
+import { concat } from "eslint-flat-config-utils";
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = concat(
+    workleapPlugin.configs.core,
+    workleapPlugin.configs.typescript,
+);
 
-The configuration pieces already targets which file extensions their linting rules will be applied to. If you wish to lint additional file extensions for a given piece you can add an ESLint [override block](https://eslint.org/docs/latest/use/configure/configuration-files#how-do-overrides-work):
-
-```json !#5-10 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": ["plugin:@workleap/react"],
-    "overrides": [
-        {
-            "files": ["*.js", "*.jsx"],
-            "extends": "plugin:@workleap/react"
-        }
-    ]
-}
+export default config;
 ```
 
+## Lint additional files
+
+The configuration pieces already target which file extensions their linting rules will be applied to. If you wish to lint additional file extensions for a given piece you can override the `files` key as you would with any JavaScript object. Since Workleap shared configs are arrays, you will need to use a `map` function.
+
+```javascript !#4-7 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.react.map(conf => ({
+        ...conf,
+        files: ["*.js", "*.jsx"],
+    }))
+];
+
+export default config;
+```
 
 
 

docs/eslint/custom-configuration.md

@@ -16,45 +16,57 @@ For a list of the rules included with the default shared configurations, refer t
 
 You can disable a default rule by defining the rule locally with the `"off"` value:
 
-```json !#5-7 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": "plugin:@workleap/web-application",
-    "rules": {
-        "no-var": "off"
+```javascript !#5-9 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.webApplication,
+    {
+        rules: {
+            "no-var": "off"
+        }
     }
-}
+];
+
+export default config;
 ```
 
 ## Change a default rule severity
 
 You can update the severity of a rule by defining the rule locally with either the `"warn"` or `"error"` severity:
 
-```json !#5-7 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": "plugin:@workleap/web-application",
-    "rules": {
-        "jsx-a11y/alt-text": "error"
+```javascript !#5-9 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.webApplication,
+    {
+        rules: {
+            "jsx-a11y/alt-text": "error"
+        }
     }
-}
+];
+
+export default config;
 ```
 
 ## Change a default rule value
 
 You can update a default rule value by defining the rule locally with its new value:
 
-```json !#5-7 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "extends": "plugin:@workleap/web-application",
-    "rules": {
-        "quotes": ["warn", "single"]
+```javascript !#5-9 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+
+const config = [
+    ...workleapPlugin.configs.webApplication,
+    {
+        rules: {
+            "quotes": ["warn", "single"]
+        }
     }
-}
+];
+
+export default config;
 ```
 
 !!!light
@@ -65,16 +77,47 @@ Please, don't update your project configuration to use single quotes :sweat_smil
 
 You can add configure additional rules from a third party [ESLint plugin](https://eslint.org/docs/latest/use/configure/plugins):
 
-```json !#4,6-8 .eslintrc.json
-{
-    "$schema": "https://json.schemastore.org/eslintrc",
-    "root": true,
-    "plugins": ["unicorn"],
-    "extends": "plugin:@workleap/web-application",
-    "rules": {
-        "unicorn/better-regex": "error"
+```javascript !#2,6-13 eslint.config.js
+import workleapPlugin from "@workleap/eslint-config";
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+
+const config = [
+    ...workleapPlugin.configs.webApplication,
+    {
+        plugins: {
+			unicorn: eslintPluginUnicorn,
+		},
+        rules: {
+            "unicorn/better-regex": "error"
+        }
     }
-}
+];
+
+export default config;
+```
+
+## `concat` helper
+
+If you are combining many configuration objects, it can be helpful to use the `concat` helper from [eslint-flat-config-utils](https://github.com/antfu/eslint-flat-config-utils) to avoid having to spread arrays.
+
+```javascript !#1,5,15 eslint.config.js
+import { concat } from "eslint-flat-config-utils";
+import workleapPlugin from "@workleap/eslint-config";
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+
+const config = concat(
+    workleapPlugin.configs.webApplication,
+    {
+        plugins: {
+			unicorn: eslintPluginUnicorn,
+		},
+        rules: {
+            "unicorn/better-regex": "error"
+        }
+    }
+);
+
+export default config;
 ```
 
 ## Start from scratch