@qlik/eslint-config 1.4.28 → 2.0.0-next.0

package/README.md

@@ -2,46 +2,60 @@
 # @qlik/eslint-config
 
 Qlik's ESlint config for JavaScript/TypeScript environments with optional framework support.
+Built for ease of use and low config. It is built on standard configs from `@eslint/js` and `typescript-eslint`
+and their recommended configs. And it adds some extra support for `vitest` that will add lint rules for unit test
+based on standard settings. It is built for basically zero config and will "just work" for standard projects.
 
-## Migrating from 0.x
+## Migrating from v1->v2 ?
 
-1. Install latest `@qlik/eslint-config`
-2. Update to ESLint 9
-3. Rename your config to `eslint.config.js` (if you have `"type": "module"` in your package json) / `eslint.config.mjs` (if otherwise)
+Go to the [migration section](#migrating)
 
-example config that uses typescript, react, vitest, react-query plugin:
+## Quick Start
+
+Example `eslint.config.js` that uses typescript, react, vitest. Suitable for a bundler environment for react
+development and vitest unit testing.
 
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
-import pluginQuery from "@tanstack/eslint-plugin-query";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.react,
-  ...qlik.configs.vitest,
-  ...pluginQuery.configs["flat/recommended"],
+export default defineConfig(
+  qlik.configs.react,
+  qlik.configs.vitest,
   {
     rules: {
       // Override rules if needed
     },
   },
-  // In its own object so it's global
+  // Put ignores in its own object so it's global
   {
-    ignores: ["dist", "node_modules", "script"],
+    ignores: ["dist", "script"],
   },
 );
 ```
 
-4. If you are not using typescript to build your project, then include all files `"include": [".*", "**/*"]` in the project's `tsconfig.json`
-5. Run your `lint` script
+Add another eslint plugin just like you would normally do.
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+import pluginQuery from "@tanstack/eslint-plugin-query";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  qlik.configs.react,
+  qlik.configs.vitest,
+  pluginQuery.configs["flat/recommended"],
+  {
+    ignores: ["dist", "script", "my-special-no-linting.ts"],
+  },
+]);
+```
 
-### v1 notable changes
+## typescript
 
-- Updates [`@typescript-eslint/typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint) to v8, this brings
-a few new rules. See article for v8 <https://typescript-eslint.io/blog/announcing-typescript-eslint-v8>
-- Moves from [`eslint-plugin-import`](https://github.com/import-js/eslint-plugin-import) to [`eslint-plugin-import-x`](https://github.com/un-ts/eslint-plugin-import-x).
-If you reference any of the `import/` rules you'll need to replace `import/` with `import-x/`.
-- Some stylistic rules have been disabled (for example `function` vs arrow functions)
+When using typescript with `@qlik/eslint-config`, include all files that should be linted (e.g. `"include": [".*", "**/*"]`) in the project's `tsconfig.json` so that the files are picked up by the project service when linting.
 
 ## Usage
 
@@ -58,11 +72,12 @@ For a pure browser environment with a bundler and no specific framework use:
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.recommended, // adds linting on .js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts files. use for pure browser environment
+export default defineConfig(
+  qlik.configs.recommended, // adds linting on .js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts files. use for pure browser environment
   {
-    ignores: ["dist", "npm", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
@@ -72,11 +87,12 @@ Using React:
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.react, // based on the recommended config and adds react linting on .jsx and .tsx files
+export default defineConfig(
+  qlik.configs.react, // based on the recommended config and adds react linting on .jsx and .tsx files
   {
-    ignores: ["dist", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
@@ -86,73 +102,67 @@ Using Pure ES modules in browser:
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.esbrowser, // based on the recommended config and adds specific es module rules (file endings)
+export default defineConfig(
+  qlik.configs.esbrowser, // based on the recommended config and adds specific es module rules (file endings)
   {
-    ignores: ["dist", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
 
-Using Svelte:
+Node environment:
 
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.svelte, // based on the recommended config and adds svelte linting on .svelte files
+export default defineConfig(
+  qlik.configs.esm, // or qlik.configs.cjs for commonjs, recommended config with node environment enabled
   {
-    ignores: ["dist", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
 
-Using React and Svelte:
+Additional configs that can be used in conjunction with the ones above:
 
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.react,
-  ...qlik.configs.svelte,
+export default defineConfig(
+  qlik.configs.recommended,  // pure browser environment
+  qlik.configs.vitest,       // enable vitest linting on files inside __test(s)__ folder
+  qlik.configs.playwright,   // enable playwright linting on files inside ./test(s) folder.
   {
-    ignores: ["dist", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
 
-Node environment:
+What if the playwright test files are not in the default `./test` folder?
 
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.esm, // or qlik.configs.cjs for commonjs, recommended config with node environment enabled
+export default defineConfig(
+  qlik.configs.recommended, // pure browser environment
+  qlik.configs.vitest,      // enable vitest linting on files inside __test(s)__ folder
   {
-    ignores: ["dist", "npm", "node_modules"],
+    files: ["playwright/**/*.{js,jsx,ts,tsx}"], // will lint the files inside ./playwright folder with the playwright plugin
+    extends: [...qlik.configs.playwright],
   },
-);
-```
-
-Additional configs that can be used in conjunction with the ones above:
-
-```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
-
-export default qlik.compose(
-  ...qlik.configs.recommended,  // pure browser environment
-  ...qlik.configs.vitest,       // enable vitest linting on files inside __test(s)__ folder
-  ...qlik.configs.jest,         // enable jest linting on files inside __test(s)__ folder, DON'T use together with vitest
-  ...qlik.configs.playwright,   // enable playwright linting on files inside ./test(s) folder.
   {
-    ignores: ["dist", "npm", "node_modules"],
+    ignores: ["dist"],
   },
 );
+
 ```
 
 Example: Using React with vitest:
@@ -160,12 +170,13 @@ Example: Using React with vitest:
 ```js
 // @ts-check
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.react, // based on the recommended config and adds react linting on .jsx and .tsx files
-  ...qlik.configs.vitest,       // enable vitest linting on files inside __test(s)__ folder
+export default defineConfig(
+  qlik.configs.react,  // based on the recommended config and adds react linting on .jsx and .tsx files
+  qlik.configs.vitest, // enable vitest linting on files inside __test(s)__ folder
   {
-    ignores: ["dist", "node_modules"],
+    ignores: ["dist"],
   },
 );
 ```
@@ -173,14 +184,15 @@ export default qlik.compose(
 ## Using the named exports configs
 
 The different configs are also accessible through named imports. These configs can be used in specific scenarios where more
-control of the configs are needed. The `extend` property can be used to apply a config on certain file patterns.
+control of the configs are needed. The `extends` property can be used to apply a config on certain file patterns.
 
 Example only use javascript rules with react
 
 ```js
-import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
+import { reactJS } from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
+export default defineConfig(
   reactJS,
 )
 ```
@@ -188,222 +200,73 @@ export default qlik.compose(
 with typescript support
 
 ```js
-import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
+import { reactJS, reactTS } from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
+export default defineConfig([
   reactJS,
   reactTS,
-)
+])
 ```
 
 This is equal to:
 
 ```js
 import qlik from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
-  ...qlik.configs.react,
-)
-```
-
-Using only javascript and svelte
-
-```js
-import qlik, { recommendedJS, svelteJS } from "@qlik/eslint-config";
-
-export default qlik.compose(
-  recommendedJS,
-  svelteJS,
+export default defineConfig(
+  qlik.configs.react,
 )
 ```
 
-The single configs can be useful together with the `extend` property. Below shows an example of a config
+The single configs can be useful together with the `extends` property. Below shows an example of a config
 that wants to use lint rules for node environment on a part of the code base.
 
 ```js
-import qlik, { esmJS } from "@qlik/eslint-config";
+import qlik, { esmJS, cjsJS } from "@qlik/eslint-config";
+import { defineConfig } from "eslint/config";
 
-export default qlik.compose(
+export default defineConfig(
   // apply recommended config to all files
-  ...qlik.configs.recommended,
-  // set node esm config on .js files inside the tools folder
+  qlik.configs.recommended,
   {
-    files: ["tools/**/*.js"],
-    extend: [esmJS],
+    // set node esm config on .mjs files inside the tools folder
+    files: ["tools/**/*.mjs"],
+    extends: [esmJS],
   },
-)
-
-```
-
-This will take the configs in the `extend` array and perform a deep merge of whatever is defined in the object containing
-the `extend` property with the configs in the `extend` array and return them as separate configs. The deep merge has three
-exceptions. `files`, `ignores` and `globals` are always overwritten by the later config.
-
-```js
-import qlik, { esmJS } from "@qlik/eslint-config";
-
-export default qlik.compose(
   {
-    extend: [...qlik.configs.recommended], // contains two configs (recommendedJS and recommendedTS)
-    files: ["only_want_lint_here/**/*.js"],
+    // set node commonJS config on .cjs files inside the tools folder
+    files: ["tools/**/*.cjs"],
+    extends: [cjsJS],
   },
 )
-```
-
-This will result in two configs, each with the given file pattern like this:
 
-```js
-export default [
-  {
-    ...recommendedJS config
-    files: ["only_want_lint_here/**/*.js"],
-  },
-  {
-    ...recommendedTS config
-    files: ["only_want_lint_here/**/*.js"],
-  }
-]
 ```
 
-### More examples with export
+## Migrating
 
-One GOTCHA about the flat configs. If there's no `files` property in one of the configs in the config array it is applied to every file. So in the case of turning off a rule that belongs to specific config e.g. `@typescript/eslint`. The following
-approach can be problematic.
+The biggest changes between v1 and v2 is the plugins used. Since a lot of plugins does not yet [support ESLint 10](https://github.com/eslint-config/airbnb-extended/issues/65) Some of the plugins was removed or replaced from v1.
 
-```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
+- `eslint-plugin-jsx-a11y` - Removed
+- `eslint-plugin-jest` - Removed
+- `eslint-plugin-playwright` - Removed
+- `eslint-plugin-svelte` - Removed
+- `eslint-plugin-react` - Replaced with [@eslint-react/eslint-plugin](https://github.com/Rel1cx/eslint-react)
+- `eslint-plugin-react-hooks` - Replacd with [@eslint-react/eslint-plugin](https://github.com/Rel1cx/eslint-react)
 
-export default qlik.compose(
-  ...qlik.configs.recommended, // <-- typescript-eslint is applied to .ts files only
-  {
-    rules: {
-      // I want to change this rule, but it is applied to all files so if I have a .js file somewhere getting linted I will get an ERROR about missing plugin.
-      "@typescript-eslint/method-signature-style": "off",
-    },
-  },
-);
-```
+When migrating from v1 -> v2 do the following:
 
-This will have to be fine-tuned. However, it is recommended to not disable rules.
+1. Remove the `qlik.compose` function and replace it with `defineConfig`
+2. If you were using any of the removed plugins (e.g. eslint-plugin-jest) you will have to add it to the eslint config.
+3. Some rules might have changed, been added or removed so you will likely get new errors/warnings that needs to be addressed
 
-```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
-
-export default qlik.compose(
-  ...qlik.configs.recommended, // <-- typescript-eslint is applied to .ts files only
-  {
-    files: ["**/*.ts"]
-    rules: {
-      // typescript specific rules here
-      "@typescript-eslint/method-signature-style": "off",
-    },
-  },
-  {
-    rules: {
-      // these are fine, since they are applied to all files
-      "no-var": "off",
-      "import-x/no-unresolved": "off"
-    },
-  },
-);
-```
+Example of migration:
 
-Another GOTCHA can happen with the vitest and jest configs
+old config:
 
 ```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
-
-export default qlik.compose(
-  ...qlik.configs.recommended,
-  qlik.configs.vitest, // <-- this is applied to files inside __test(s)__ folders by default for our convenience
-  {
-    rules: {
-      // I want to change this rule, but it doesn't work because it is applied to all files
-      "vitest/max-nested-describe": [
-        "error",
-        {
-          "max": 3
-        },
-      ],
-    },
-  },
-);
-```
-
-Here the `extend` feature becomes helpful
-
-```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
 
-export default qlik.compose(
-  ...qlik.configs.recommended,
-  {
-    extend: [qlik.configs.vitest],
-    rules: {
-      // This will add or overwrite the rule in the default config
-      "vitest/max-nested-describe": [
-        "error",
-        {
-          "max": 3
-        },
-      ],
-    },
-  },
-);
-```
-
-Example of changing the default file patterns on the vitest config.
-
-```js
-// @ts-check
-import qlik from "@qlik/eslint-config";
-
-export default qlik.compose(
-  ...qlik.configs.recommended,  // pure browser environment, no framework config added
-  {
-    // adds vitest lint rules on the specified files with an altered rule
-    files: ['**/my_tests_are_here/*.spec.ts']
-    extend: [qlik.configs.vitest],
-    rules: {
-      "vitest/max-nested-describe": [
-        "error",
-        {
-          "max": 3
-        }
-      ]
-    }
-  },
-);
-```
-
-This will result in a final config looking like this:
-
-```js
-export default [
-  {
-    ...recommendedJS config
-  },
-  {
-    ...recommendedTS config
-  },
-  {
-    files: ['**/my_tests_are_here/*.spec.ts'],
-    ...vitest config
-    rules: {
-      ... vitest config rules,
-      "vitest/max-nested-describe": [
-        "error",
-        {
-          "max": 3
-        }
-      ]
-    }
-  }
-]
 ```
 
 <!-- prettier-ignore-end -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlik/eslint-config",
-  "version": "1.4.28",
+  "version": "2.0.0-next.0",
   "description": "Qlik's ESLint configs",
   "license": "ISC",
   "repository": "git@github.com:qlik-oss/dev-tools-js.git",
@@ -19,49 +19,31 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@eslint/js": "^9.39.3",
-    "@typescript-eslint/parser": "^8.57.2",
-    "@typescript-eslint/utils": "^8.57.2",
-    "@vitest/eslint-plugin": "^1.6.13",
+    "@eslint-react/eslint-plugin": "^4.2.1",
+    "@eslint/js": "^10.0.1",
+    "@typescript-eslint/utils": "^8.58.0",
+    "@vitest/eslint-plugin": "^1.6.14",
     "confusing-browser-globals": "^1.0.11",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-import-resolver-node": "^0.3.9",
+    "eslint-import-resolver-node": "^0.3.10",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import-x": "^4.16.2",
-    "eslint-plugin-jest": "^29.15.1",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-playwright": "^2.10.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-svelte": "^3.16.0",
     "eslint-plugin-testing-library": "^7.16.2",
     "globals": "^17.4.0",
-    "svelte-eslint-parser": "^1.6.0",
-    "typescript-eslint": "^8.57.2"
+    "typescript-eslint": "^8.58.0"
   },
   "devDependencies": {
     "@types/confusing-browser-globals": "^1.0.3",
-    "@types/eslint-config-prettier": "^6.11.3",
-    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/node": "^25.5.0",
-    "eslint": "^9.39.3",
-    "prettier": "^3.8.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.2",
-    "@qlik/tsconfig": "^0.3.1"
+    "@types/eslint-config-prettier": "^6.11.3"
   },
   "peerDependencies": {
-    "eslint": ">=9.0.0",
-    "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+    "eslint": "9.x || 10.x"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "scripts": {
     "check-types": "tsc --noEmit",
-    "format:check": "cd ../.. && oxfmt --check 'packages/eslint-config'",
-    "format:write": "cd ../.. && oxfmt 'packages/eslint-config'",
-    "lint": "eslint .",
     "test": "vitest run && ./test/verify-configs.sh"
   }
 }

package/src/configs/esbrowser.js

@@ -5,25 +5,6 @@ import { mergeConfigs } from "../utils/config.js";
 import { baseConfigJS, baseConfigTS } from "./shared/base.js";
 import { baseCjsJS, baseCjsTS } from "./shared/node.js";
 
-/**
- * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
- */
-const browserEsmRules = {
-  // modify rules for browser esm here
-
-  // Ensure consistent use of file extension within the import path
-  // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/extensions.md
-  "import-x/extensions": [
-    "error",
-    "ignorePackages",
-    {
-      ts: "never",
-      mts: "never",
-      tsx: "never",
-    },
-  ],
-};
-
 /**
  * ESM config for javascript in browsers
  * @type {import("../types/index.js").ESLintFlatConfig}
@@ -40,7 +21,6 @@ const esbrowserJS = mergeConfigs(
       sourceType: "module",
     },
     rules: {
-      ...browserEsmRules,
       // modify javascript specific rules for node esm here if needed
     },
   },
@@ -63,7 +43,6 @@ const esbrowserTS = mergeConfigs(
       sourceType: "module",
     },
     rules: {
-      ...browserEsmRules,
       // modify typescript specific rules for node esm here if needed
     },
   },

package/src/configs/esm.js

@@ -2,29 +2,7 @@
 import prettier from "eslint-config-prettier";
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
-import nodeRules from "./rules/node.js";
-import { baseConfigJS, baseConfigTS } from "./shared/base.js";
-import { baseCjsJS, baseCjsTS } from "./shared/node.js";
-
-/**
- * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
- */
-const nodeEsmRules = {
-  ...nodeRules,
-  // modify rules for node esm here
-
-  // Ensure consistent use of file extension within the import path
-  // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/extensions.md
-  "import-x/extensions": [
-    "error",
-    "ignorePackages",
-    {
-      ts: "never",
-      mts: "never",
-      tsx: "never",
-    },
-  ],
-};
+import { baseCjsJS, baseCjsTS, baseEsmJS, baseEsmTS } from "./shared/node.js";
 
 /**
  * ESM config for javascript in node
@@ -32,7 +10,7 @@ const nodeEsmRules = {
  */
 const esmJS = mergeConfigs(
   // base it on the recommended javascript config
-  baseConfigJS,
+  baseEsmJS,
   // add qlik's recommended node esm config for javascript
   {
     name: "node-esm-js",
@@ -41,7 +19,9 @@ const esmJS = mergeConfigs(
       globals: globals.node,
       sourceType: "module",
     },
-    rules: nodeEsmRules,
+    rules: {
+      // modify javascript specific rules for node esm here if needed
+    },
   },
   prettier,
 );
@@ -52,7 +32,7 @@ const esmJS = mergeConfigs(
  */
 const esmTS = mergeConfigs(
   // base it on the recommended typescript config
-  baseConfigTS,
+  baseEsmTS,
   // add qlik's recommended node esm config for typescript
   {
     name: "node-esm-ts",
@@ -62,7 +42,6 @@ const esmTS = mergeConfigs(
       sourceType: "module",
     },
     rules: {
-      ...nodeEsmRules,
       // modify typescript specific rules for node esm here if needed
     },
   },