@qlik/eslint-config 0.8.2 → 1.0.0

package/README.md

@@ -1,110 +1,167 @@
+<!-- prettier-ignore-start -->
 # @qlik/eslint-config
 
-Qlik's ESlint config for pure javascript/typescript environments. Based on airbnb-base/prettier config with some modifications.
+Qlik's ESlint config for JavaScript/TypeScript environments with optional framework support.
 
-## usage
+## Migrating from 0.x
 
-These configs assumes that you are using typescript. It is still possible to write .js files and get linting on those.
+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)
 
-Simplest approach is to add one of the following field in `package.json`:
+example config that uses typescript, react, vitest, react-query plugin:
 
-For a pure environment with no specific frameworks use:
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+import pluginQuery from "@tanstack/eslint-plugin-query";
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
+export default qlik.compose(
+  ...qlik.configs.react,
+  ...qlik.configs.vitest,
+  ...pluginQuery.configs["flat/recommended"],
+  {
+    rules: {
+      // Override rules if needed
+    },
   },
-  "extends": [
-    "@qlik/eslint-config"
-  ]
-},
+  // In its own object so it's global
+  {
+    ignores: ["dist", "node_modules", "script"],
+  },
+);
 ```
 
-Using react:
+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
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
-  },
-  "extends": [
-    "@qlik/eslint-config/react"
-  ]
-},
+### v1 notable changes
+
+- 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)
+
+## Usage
+
+These configs works on both TypeScript and JavaSript out of the box. (as long as the file endings are any of `.js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts`)
+
+To get started, create `eslint.config.js` (if your package json has `"type": "module"`), otherwise create `eslint.config.mjs`.
+If you are not building your project with TypeScript (using Webpack or Vite for example), then tell TypeScript to include
+all files by setting `"include": [".*", "**/*"]` in `tsconfig.json`.
+
+For a pure browser environment with no specific frameworks use:
+
+```js
+// @ts-check
+import qlik from "@qlik/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
+  {
+    ignores: ["dist", "npm", "node_modules"],
+  }
+);
 ```
 
-Using svelte:
+Using React with vitest:
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.react, // based on the recommended config and adds react linting on .jsx and .tsx files
+  {
+    ignores: ["dist", "node_modules"],
   },
-  "extends": [
-    "@qlik/eslint-config/svelte"
-  ]
-},
+);
 ```
 
-Using react AND svelte (rare occasion):
+Using Svelte:
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
-  },
-  "extends": [
-    "@qlik/eslint-config/react-svelte"
-  ]
-},
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.svelte, // based on the recommended config and adds svelte linting on .svelte files
+  {
+    ignores: ["dist", "node_modules"],
+  }
+);
 ```
 
-For a node environment with commonjs modules use:
+Using React and Svelte:
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
-  },
-  "extends": [
-    "@qlik/eslint-config/node"
-  ]
-},
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.react,
+  ...qlik.configs.svelte,
+  {
+    ignores: ["dist", "node_modules"],
+  }
+);
 ```
 
-For a node environment with ES modules use:
+Node environment:
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.esm, // or qlik.configs.cjs for commonjs, recommended config with node environment enabled
+  {
+    ignores: ["dist", "npm", "node_modules"],
   },
-  "extends": [
-    "@qlik/eslint-config/esm"
-  ]
-},
+);
 ```
 
-Additional configs that can be used in conjunction with the above:
+Additional configs that can be used in conjunction with the ones above:
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
+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"],
   },
-  "extends": [
-    "...",
-    "@qlik/eslint-config/vitest", // adds linting on vitest test and config files
-    // AND/OR
-    "@qlik/eslint-config/playwright" // adds linting on playwright test and config files
-  ]
-},
+);
 ```
+
+A config can be extended if needed. For example if the default file patterns needs to be altered.
+
+```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']
+    extends [qlik.configs.vitest],
+    rules: {
+      "vitest/max-nested-describe": [
+        "error",
+        {
+          "max": 3
+        }
+      ]
+    }
+  },
+  {
+    ignores: ["dist", "npm", "node_modules"],
+  },
+);
+```
+
+<!-- prettier-ignore-end -->

package/package.json

@@ -1,69 +1,63 @@
 {
   "name": "@qlik/eslint-config",
-  "version": "0.8.2",
-  "description": "Qlik's ESLint config for typescript",
+  "version": "1.0.0",
+  "description": "Qlik's ESLint configs",
   "repository": "git@github.com:qlik-oss/dev-tools-js.git",
   "license": "ISC",
-  "main": "index.js",
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
   "files": [
-    "configs",
-    "overrides",
-    "index.js",
-    "jest.js",
-    "node.js",
-    "esm.js",
-    "react.js",
-    "svelte.js",
-    "svelte-js.js",
-    "vitest.js",
-    "playwright.js",
-    "react-svelte.js"
+    "src",
+    "!**/__tests__"
   ],
   "prettier": "@qlik/prettier-config",
-  "eslintConfig": {
-    "env": {
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended"
-  },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitest/eslint-plugin": "1.1.10",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@eslint-react/eslint-plugin": "1.17.1",
+    "@eslint/js": "^9.15.0",
+    "@typescript-eslint/utils": "^8.16.0",
+    "@vitest/eslint-plugin": "^1.1.10",
+    "confusing-browser-globals": "^1.0.11",
     "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import-x": "^4.4.3",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-playwright": "^2.1.0",
+    "eslint-plugin-playwright": "2.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-svelte": "^2.46.0",
-    "eslint-plugin-testing-library": "^6.5.0",
-    "svelte-eslint-parser": "^0.43.0"
+    "eslint-plugin-svelte": "2.46.0",
+    "eslint-plugin-testing-library": "^7.0.0",
+    "globals": "^15.12.0",
+    "svelte-eslint-parser": "0.43.0",
+    "typescript-eslint": "^8.16.0"
   },
   "devDependencies": {
+    "@types/confusing-browser-globals": "^1.0.3",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/eslint__js": "^8.42.3",
     "eslint": "^9.15.0",
-    "prettier": "^3.3.3",
-    "@qlik/prettier-config": "0.4.18"
+    "prettier": "^3.4.1",
+    "vitest": "^2.1.6",
+    "@qlik/prettier-config": "0.4.19",
+    "@qlik/tsconfig": "0.2.8"
   },
   "peerDependencies": {
-    "eslint": "^8.0.0"
+    "eslint": ">=9.0.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
+    "check-types": "tsc --noEmit",
     "format:check": "prettier --check '**' --ignore-unknown",
     "format:write": "prettier --write '**' --ignore-unknown",
-    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint ."
+    "lint": "eslint ."
   }
 }

package/src/configs/cjs.js

@@ -0,0 +1,45 @@
+// @ts-check
+import globals from "globals";
+import { mergeConfigs } from "../utils/config.js";
+import { recommendedJS, recommendedTS } from "./recommended.js";
+
+/**
+ * @satisfies {import("../types/index.js").ESLintFlatConfig['rules']}
+ */
+const cjsRules = {
+  // modify rules for node here
+};
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const cjsJS = mergeConfigs(recommendedJS, {
+  name: "node-cjs-js",
+  files: ["**/*.{js,cjs}"],
+  languageOptions: {
+    globals: globals.node,
+    sourceType: "commonjs",
+  },
+  rules: {
+    ...cjsRules,
+  },
+});
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const cjsTS = mergeConfigs(recommendedTS, {
+  name: "node-cjs-ts",
+  files: ["**/*.{ts,cts}"],
+  languageOptions: {
+    globals: globals.node,
+    sourceType: "commonjs",
+  },
+  rules: {
+    ...cjsRules,
+    // modify ts specific rules for node here
+  },
+});
+
+export default [cjsJS, cjsTS];
+export { cjsJS, cjsTS };

package/src/configs/esm.js

@@ -0,0 +1,43 @@
+// @ts-check
+import { mergeConfigs } from "../utils/config.js";
+import { cjsJS, cjsTS } from "./cjs.js";
+
+/**
+ * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
+ */
+const nodeEsmRules = {
+  // modify rules for node esm here
+  "import-x/extensions": ["error", "ignorePackages"],
+};
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esmJS = mergeConfigs(cjsJS, {
+  name: "node-esm-js",
+  files: ["**/*.{js,mjs}"],
+  languageOptions: {
+    sourceType: "module",
+  },
+  rules: {
+    ...nodeEsmRules,
+  },
+});
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esmTS = mergeConfigs(cjsTS, {
+  name: "node-esm-ts",
+  files: ["**/*.{ts,mts}"],
+  languageOptions: {
+    sourceType: "module",
+  },
+  rules: {
+    ...nodeEsmRules,
+    // modify ts specific rules for node esm here
+  },
+});
+
+export default [esmJS, esmTS];
+export { esmJS, esmTS };

package/src/configs/jest.js

@@ -0,0 +1,24 @@
+// @ts-check
+import jestPlugin from "eslint-plugin-jest";
+import testingLibraryPlugin from "eslint-plugin-testing-library";
+import { mergeConfigs } from "../utils/config.js";
+import rules from "./rules/index.js";
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ * config for jest https://github.com/jest-community/eslint-plugin-jest
+ */
+const jest = mergeConfigs(jestPlugin.configs["flat/recommended"], {
+  name: "jest-js",
+  files: ["**/__test__/**/*.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
+  plugins: {
+    "testing-library": testingLibraryPlugin,
+  },
+  rules: {
+    ...rules.testingLibraryRules,
+    // modify rules from eslint-plugin-jest here
+  },
+});
+
+export default [jest];
+export { jest };

package/src/configs/playwright.js

@@ -0,0 +1,19 @@
+// @ts-check
+import playwrightEslint from "eslint-plugin-playwright";
+import { mergeConfigs } from "../utils/config.js";
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ * config for Playwright https://github.com/playwright-community/eslint-plugin-playwright
+ */
+const playwright = mergeConfigs(playwrightEslint.configs["flat/recommended"], {
+  name: "playwright",
+  files: ["tests/**", "test/**"],
+  rules: {
+    ...playwrightEslint.configs["flat/recommended"].rules,
+    // modify rules from eslint-plugin-playwright here
+  },
+});
+
+export default [playwright];
+export { playwright };

package/src/configs/react.js

@@ -0,0 +1,75 @@
+// @ts-check
+import react from "@eslint-react/eslint-plugin";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import eslintPluginReact from "eslint-plugin-react";
+// @ts-expect-error no types for this plugin yet
+import reactHooks from "eslint-plugin-react-hooks";
+import { mergeConfigs } from "../utils/config.js";
+import { recommendedJS, recommendedTS } from "./recommended.js";
+import rules from "./rules/index.js";
+
+/** @type {any} */
+const reactPlugin = eslintPluginReact;
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const reactConfig = mergeConfigs({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+      jsxPragma: null, // for @typescript/eslint-parser
+    },
+  },
+
+  plugins: { ...react.configs.recommended.plugins, react: reactPlugin, "jsx-a11y": jsxA11y, "react-hooks": reactHooks },
+
+  settings: {
+    ...react.configs.recommended.settings,
+    react: {
+      version: "detect",
+    },
+  },
+
+  rules: {
+    // react plugin
+    ...reactPlugin.configs.flat.recommended.rules,
+    ...rules.reactRules,
+    // jsx-a11y plugin
+    ...jsxA11y.flatConfigs.recommended.rules,
+    ...rules.reactA11yRules,
+    ...react.configs.recommended.rules,
+    // react-hooks plugin
+    ...reactHooks.configs.recommended.rules,
+    ...rules.reactHooksRules,
+  },
+});
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const reactJS = mergeConfigs(reactConfig, recommendedJS, {
+  name: "react-js",
+  files: ["**/*.jsx"],
+  rules: {
+    // turn on/off or modify js rules necessary for react
+    "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx"] }],
+  },
+});
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const reactTS = mergeConfigs(reactConfig, recommendedTS, {
+  name: "react-ts",
+  files: ["**/*.tsx"],
+  rules: {
+    // turn on/off or modify js/ts rules necessary for react
+    "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+  },
+});
+
+export default [recommendedJS, reactTS, recommendedTS, reactTS];
+export { reactJS, reactTS };

package/src/configs/recommended.js

@@ -0,0 +1,64 @@
+// @ts-check
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import eslintPluginImportX from "eslint-plugin-import-x";
+import globals from "globals";
+import tsconfig from "typescript-eslint";
+import { mergeConfigs } from "../utils/config.js";
+import rules from "./rules/index.js";
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const recommendedJS = mergeConfigs(
+  {
+    files: ["**/*.js", "**/*.jsx", "**/*.mjs", "**/*.cjs"],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: {
+        warnOnUnsupportedTypeScriptVersion: false,
+      },
+      ecmaVersion: 2021,
+      sourceType: "module",
+    },
+  },
+  // tsconfig.configs.base sets eslint parser to use the typescript parser to parse .js files - handles all modern syntax
+  tsconfig.configs.base,
+  js.configs.recommended,
+  eslintPluginImportX.flatConfigs.recommended,
+  {
+    name: "recommended-js",
+    rules: {
+      ...rules.importXRules,
+      ...rules.eslintCoreRules,
+    },
+  },
+);
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const recommendedTS = mergeConfigs(
+  recommendedJS,
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts", "**/*.d.ts"],
+    languageOptions: {
+      parserOptions: {
+        parser: tsParser,
+        projectService: true,
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+  },
+  ...tsconfig.configs.recommended,
+  eslintPluginImportX.flatConfigs.recommended,
+  eslintPluginImportX.flatConfigs.typescript,
+  {
+    name: "recommended-ts",
+    rules: rules.typescriptRules,
+  },
+);
+
+export default [recommendedJS, recommendedTS];
+export { recommendedJS, recommendedTS };