@qlik/eslint-config 1.1.0 → 1.1.2

package/README.md

@@ -63,7 +63,7 @@ export default qlik.compose(
   ...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"],
-  }
+  },
 );
 ```
 
@@ -91,7 +91,7 @@ export default qlik.compose(
   ...qlik.configs.svelte, // based on the recommended config and adds svelte linting on .svelte files
   {
     ignores: ["dist", "node_modules"],
-  }
+  },
 );
 ```
 
@@ -106,7 +106,7 @@ export default qlik.compose(
   ...qlik.configs.svelte,
   {
     ignores: ["dist", "node_modules"],
-  }
+  },
 );
 ```
 
@@ -152,7 +152,7 @@ Example only use javascript rules with react
 import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
 
 export default qlik.compose(
-  reactJS
+  reactJS,
 )
 ```
 
@@ -163,7 +163,7 @@ import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
 
 export default qlik.compose(
   reactJS,
-  reactTS
+  reactTS,
 )
 ```
 
@@ -173,7 +173,7 @@ This is equal to:
 import qlik from "@qlik/eslint-config";
 
 export default qlik.compose(
-  ...qlik.configs.react
+  ...qlik.configs.react,
 )
 ```
 
@@ -195,6 +195,86 @@ export default qlik.compose(
 
 ```
 
+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"],
+  },
+)
+```
+
+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
+
+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. jest or vitest. The following
+approach does NOT work.
+
+```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
@@ -216,10 +296,33 @@ export default qlik.compose(
       ]
     }
   },
+);
+```
+
+This will result in a final config looking like this:
+
+```js
+export default [
+  {
+    ...recommendedJS config
+  },
   {
-    ignores: ["dist", "npm", "node_modules"],
+    ...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.1.0",
+  "version": "1.1.2",
   "description": "Qlik's ESLint configs",
   "repository": "git@github.com:qlik-oss/dev-tools-js.git",
   "license": "ISC",
@@ -21,6 +21,7 @@
     "@typescript-eslint/utils": "^8.16.0",
     "@vitest/eslint-plugin": "^1.1.11",
     "confusing-browser-globals": "^1.0.11",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import-x": "^4.4.3",
     "eslint-plugin-jest": "^28.9.0",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@types/confusing-browser-globals": "^1.0.3",
+    "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint-plugin-jsx-a11y": "^6.10.0",
     "@types/eslint__js": "^8.42.3",
     "eslint": "^9.15.0",

package/src/configs/cjs.js

@@ -1,4 +1,5 @@
 // @ts-check
+import prettier from "eslint-config-prettier";
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
@@ -28,6 +29,7 @@ const cjsJS = mergeConfigs(
     },
     rules: cjsRules,
   },
+  prettier,
 );
 
 /**
@@ -49,6 +51,7 @@ const cjsTS = mergeConfigs(
       // modify ts specific rules for node here
     },
   },
+  prettier,
 );
 
 export default [cjsJS, cjsTS];

package/src/configs/esm.js

@@ -1,4 +1,5 @@
 // @ts-check
+import prettier from "eslint-config-prettier";
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
@@ -29,6 +30,7 @@ const esmJS = mergeConfigs(
     },
     rules: nodeEsmRules,
   },
+  prettier,
 );
 
 /**
@@ -50,6 +52,7 @@ const esmTS = mergeConfigs(
       // modify typescript specific rules for node esm here if needed
     },
   },
+  prettier,
 );
 
 export default [esmJS, esmTS];

package/src/configs/react.js

@@ -1,5 +1,6 @@
 // @ts-check
 import react from "@eslint-react/eslint-plugin";
+import prettier from "eslint-config-prettier";
 import jsxA11y from "eslint-plugin-jsx-a11y";
 import eslintPluginReact from "eslint-plugin-react";
 // @ts-expect-error no types for this plugin yet
@@ -16,38 +17,45 @@ const reactPlugin = eslintPluginReact;
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const reactBaseConfig = {
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-      jsxPragma: null, // for @typescript/eslint-parser
+const reactBaseConfig = mergeConfigs(
+  // base it on the recommended react plugins config
+  react.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  jsxA11y.flatConfigs.recommended,
+  // add react-hooks plugin config (no recommended flat config YET!)
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
     },
   },
 
-  plugins: { ...react.configs.recommended.plugins, react: reactPlugin, "jsx-a11y": jsxA11y, "react-hooks": reactHooks },
+  // add qlik's recommended react config
+  {
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        jsxPragma: null, // for @typescript/eslint-parser
+      },
+    },
 
-  settings: {
-    ...react.configs.recommended.settings,
-    react: {
-      version: "detect",
+    settings: {
+      react: {
+        version: "detect",
+      },
     },
-  },
 
-  rules: {
-    // react plugin
-    ...reactPlugin.configs.flat.recommended.rules,
-    ...reactRules,
-    // jsx-a11y plugin
-    ...jsxA11y.flatConfigs.recommended.rules,
-    ...reactA11yRules,
-    ...react.configs.recommended.rules,
-    // react-hooks plugin
-    ...reactHooks.configs.recommended.rules,
-    ...reactHooksRules,
+    rules: {
+      ...reactRules,
+      ...reactA11yRules,
+      ...reactHooksRules,
+    },
   },
-};
+);
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
@@ -66,6 +74,7 @@ const reactJS = mergeConfigs(
       "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx"] }],
     },
   },
+  prettier,
 );
 
 /**
@@ -85,6 +94,7 @@ const reactTS = mergeConfigs(
       "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
     },
   },
+  prettier,
 );
 
 export default [reactJS, reactTS];

package/src/configs/recommended.js

@@ -1,6 +1,7 @@
 // @ts-check
 import js from "@eslint/js";
 import tsParser from "@typescript-eslint/parser";
+import prettier from "eslint-config-prettier";
 import eslintPluginImportX from "eslint-plugin-import-x";
 import globals from "globals";
 import tsconfig from "typescript-eslint";
@@ -43,6 +44,7 @@ const recommendedJS = mergeConfigs(
     name: "recommended-js",
     files: ["**/*.js", "**/*.mjs", "**/*.cjs"],
   },
+  prettier,
 );
 
 /**
@@ -67,6 +69,7 @@ const recommendedTS = mergeConfigs(
     },
     rules: typescriptRules,
   },
+  prettier,
 );
 
 export default [recommendedJS, recommendedTS];

package/src/configs/rules/eslint-core.js

@@ -30,10 +30,6 @@ const rules = {
   // https://eslint.org/docs/rules/consistent-return
   "consistent-return": "error",
 
-  // specify curly brace conventions for all control statements
-  // https://eslint.org/docs/rules/curly
-  curly: ["error", "multi-line"], // multiline
-
   // require default case in switch statements
   // https://eslint.org/docs/rules/default-case
   "default-case": ["error", { commentPattern: "^no default$" }],
@@ -502,7 +498,7 @@ const rules = {
 
   // Avoid code that looks like two expressions but is actually one
   // https://eslint.org/docs/rules/no-unexpected-multiline
-  "no-unexpected-multiline": "error",
+  "no-unexpected-multiline": "off",
 
   // disallow unreachable statements after a return, throw, continue, or break statement
   "no-unreachable": "error",

package/src/configs/rules/import-x.js

@@ -128,7 +128,7 @@ const rules = {
   "import-x/no-self-import": "error",
   // Forbid cyclical dependencies between modules
   // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/no-cycle.md
-  "import-x/no-cycle": ["error", { maxDepth: "∞" }],
+  "import-x/no-cycle": ["error", { ignoreExternal: true }],
   // Ensures that there are no useless path segments
   // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/no-useless-path-segments.md
   "import-x/no-useless-path-segments": ["error", { commonjs: true }],

package/src/configs/rules/react.js

@@ -43,26 +43,6 @@ const rules = {
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
   "react/jsx-boolean-value": ["error", "never", { always: [] }],
 
-  // Validate closing bracket location in JSX
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md
-  "react/jsx-closing-bracket-location": ["error", "line-aligned"],
-
-  // Validate closing tag location in JSX
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md
-  "react/jsx-closing-tag-location": "error",
-
-  // Enforce or disallow spaces inside of curly braces in JSX attributes
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md
-  "react/jsx-curly-spacing": ["error", "never", { allowMultiline: true }],
-
-  // Validate props indentation in JSX
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
-  "react/jsx-indent-props": ["error", 2],
-
-  // Limit maximum of props on a single line in JSX
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md
-  "react/jsx-max-props-per-line": ["error", { maximum: 1, when: "multiline" }],
-
   // Prevent usage of .bind() in JSX props
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
   "react/jsx-no-bind": [
@@ -215,22 +195,7 @@ const rules = {
 
   // Prevent missing parentheses around multilines JSX
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md
-  "react/jsx-wrap-multilines": [
-    "error",
-    {
-      declaration: "parens-new-line",
-      assignment: "parens-new-line",
-      return: "parens-new-line",
-      arrow: "parens-new-line",
-      condition: "parens-new-line",
-      logical: "parens-new-line",
-      prop: "ignore",
-    },
-  ],
-
-  // Require that the first prop in a JSX element be on a new line when the element is multiline
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md
-  "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
+  "react/jsx-wrap-multilines": "off",
 
   // Stylistic, Prettier handles this.
   // Enforce spacing around jsx equals signs
@@ -290,15 +255,7 @@ const rules = {
 
   // Validate whitespace in and around the JSX opening and closing brackets
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md
-  "react/jsx-tag-spacing": [
-    "error",
-    {
-      closingSlash: "never",
-      beforeSelfClosing: "always",
-      afterOpening: "never",
-      beforeClosing: "never",
-    },
-  ],
+  "react/jsx-tag-spacing": "off",
 
   // Prevent usage of Array index in keys
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
@@ -369,22 +326,12 @@ const rules = {
 
   // Disallow multiple spaces between inline JSX props
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md
-  "react/jsx-props-no-multi-spaces": "error",
+  "react/jsx-props-no-multi-spaces": "off",
 
   // Enforce shorthand or standard form for React fragments
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md
   "react/jsx-fragments": ["error", "syntax"],
 
-  // Enforce linebreaks in curly braces in JSX attributes and expressions.
-  // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md
-  "react/jsx-curly-newline": [
-    "error",
-    {
-      multiline: "consistent",
-      singleline: "consistent",
-    },
-  ],
-
   // Enforce state initialization style
   // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md
   "react/state-in-constructor": ["error", "never"],

package/src/configs/svelte.js

@@ -1,4 +1,5 @@
 // @ts-check
+import prettier from "eslint-config-prettier";
 import eslintPluginSvelte from "eslint-plugin-svelte";
 import svelteParser from "svelte-eslint-parser";
 import tsEslint from "typescript-eslint";
@@ -48,6 +49,7 @@ const svelteSvelte = mergeConfigs(
       "no-unused-vars": "off",
     },
   },
+  prettier,
 );
 
 export default [recommendedJS, recommendedTS, svelteSvelte];

package/src/utils/compose.js

@@ -1,4 +1,7 @@
 // @ts-check
+
+import { mergeConfigs } from "./config.js";
+
 /**
  * Utility function to make it easy to strictly type your "Flat" config file
  *
@@ -33,6 +36,7 @@ export default function compose(...configs) {
     if (extendArr == null || extendArr.length === 0) {
       return config;
     }
+
     const undefinedExtensions = extendArr.reduce((acc, extension, extensionIndex) => {
       const maybeExtension = extension;
       if (maybeExtension == null) {
@@ -52,14 +56,8 @@ export default function compose(...configs) {
     return [
       ...extendArr.map((extension) => {
         const name = [config.name, extension.name].filter(Boolean).join("__");
-        return {
-          ...extension,
-          ...(config.files && { files: config.files }),
-          ...(config.ignores && { ignores: config.ignores }),
-          ...(name && { name }),
-        };
+        return mergeConfigs(extension, config, name ? { name } : {});
       }),
-      config,
     ];
   });
 }

package/src/utils/merge.js

@@ -1,6 +1,6 @@
 // these ones will only do shallow merge, but the merge function will do deep merge
 const noNeedToDeepMerge = ["plugins", "rules", "parser"];
-const overWrite = ["files", "globals"];
+const overWrite = ["files", "globals", "ignores"];
 
 /**
  *