cleanup formatting rules, remove deprecated rules, make things work

qlik-oss · Nov 26, 2024 · eb88e88 · eb88e88
1 parent b88d865
commit eb88e88
Show file tree

Hide file tree

Showing 51 changed files with 561 additions and 487 deletions.
diff --git a/.changeset/happy-sloths-smile.md b/.changeset/happy-sloths-smile.md
@@ -0,0 +1,5 @@
+---
+"@qlik/eslint-config": patch
+---
+
+feat!: switch to eslint 9 flat config
diff --git a/packages/eslint-config/README.md b/packages/eslint-config/README.md
@@ -1,110 +1,144 @@
 # @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 pure JavaScript/TypeScript environments.
 
-## 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.
+Integration steps:
 
-Simplest approach is to add one of the following field in `package.json`:
+1. Install latest `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)
 
-For a pure environment with no specific frameworks use:
+example config that uses typescript, react, vitest, react-query plugin:
+
+```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.recommended,
+  ...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 aren't using typescript to build your project and use it solely as a 'linter', then make it include all files `"include": [".*", "**/*"]` in your tsconfig
+5. Run your `lint` script
+
+### 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 assumes that you are using TypeScript. It is still possible to write `.js` files and get linting on those.
+
+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`.
 
-```json
-"eslintConfig": {
-  "root": true,
-  "parserOptions": {
-    "project": "path/to/tsconfig.json"
+For a pure environment with no specific frameworks use:
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.recommended,
+  ...qlik.configs.esm, // or qlik.config.cjs
+  {
+    ignores: ["dist", "npm", "node_modules"],
   },
-  "extends": [
-    "@qlik/eslint-config/react"
-  ]
-},
+);
 ```
 
-Using svelte:
+Using React:
+
+```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,
+  ...qlik.configs.esm, // or qlik.config.cjs
+  ...qlik.configs.react,
+  ...qlik.configs.vitest, // or qlik.configs.jest if you are using Jest
+  {
+    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.recommended, ...qlik.configs.esm, ...qlik.configs.svelte, {
+  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"
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.recommended,
+  ...qlik.configs.esm,
+  ...qlik.configs.react,
+  ...qlik.configs.svelte,
+  {
+    ignores: ["dist", "node_modules"],
   },
-  "extends": [
-    "@qlik/eslint-config/node"
-  ]
-},
+);
 ```
 
-For a node environment with ES modules use:
+Node environment:
+
+```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,
+  ...qlik.configs.esm, // or qlik.configs.cjs
+  {
+    ignores: ["dist", "npm", "node_modules"],
   },
-  "extends": [
-    "@qlik/eslint-config/esm"
-  ]
-},
+);
 ```
 
 Additional configs that can be used in conjunction with the above:
 
-```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.recommended,
+  ...qlik.configs.esm, // or qlik.configs.cjs
+  ...qlik.configs.vitest, // or qlik.configs.jest
+  ...qlik.configs.playwright,
+  {
+    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
-  ]
-},
+);
 ```
diff --git a/packages/eslint-config/configs.md b/packages/eslint-config/configs.md
diff --git a/packages/eslint-config/eslint.config.ts → packages/eslint-config/eslint.config.js b/packages/eslint-config/eslint.config.ts → packages/eslint-config/eslint.config.js
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -18,8 +18,7 @@
     "check-types": "tsc --noEmit",
     "format:check": "prettier --check '**' --ignore-unknown",
     "format:write": "prettier --write '**' --ignore-unknown",
-    "lint": "eslint .",
-    "test": "vitest run"
+    "lint": "eslint ."
   },
   "prettier": "@qlik/prettier-config",
   "dependencies": {

diff --git a/packages/eslint-config/src/configs/node.js → packages/eslint-config/src/configs/cjs.js b/packages/eslint-config/src/configs/node.js → packages/eslint-config/src/configs/cjs.js
@@ -1,38 +1,45 @@
 // @ts-check
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
-import { formatting } from "./formatting.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
 
 /**
  * @satisfies {import("../types/index.js").ESLintFlatConfig['rules']}
  */
-const nodeRules = {
+const cjsRules = {
   // modify rules for node here
 };
 
-const nodeJS = mergeConfigs(recommendedJS, {
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const cjsJS = mergeConfigs(recommendedJS, {
   name: "node-cjs-js",
+  files: ["**/*.{js,cjs}"],
   languageOptions: {
     globals: globals.node,
     sourceType: "commonjs",
   },
   rules: {
-    ...nodeRules,
+    ...cjsRules,
   },
 });
 
-const nodeTS = mergeConfigs(recommendedTS, {
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const cjsTS = mergeConfigs(recommendedTS, {
   name: "node-cjs-ts",
+  files: ["**/*.{ts,cts}"],
   languageOptions: {
     globals: globals.node,
     sourceType: "commonjs",
   },
   rules: {
-    ...nodeRules,
+    ...cjsRules,
     // modify ts specific rules for node here
   },
 });
 
-export default [nodeJS, nodeTS, formatting];
-export { nodeJS, nodeTS };
+export default [cjsJS, cjsTS];
+export { cjsJS, cjsTS };
diff --git a/packages/eslint-config/src/configs/esm.js b/packages/eslint-config/src/configs/esm.js
@@ -1,7 +1,6 @@
 // @ts-check
 import { mergeConfigs } from "../utils/config.js";
-import { formatting } from "./formatting.js";
-import { nodeJS, nodeTS } from "./node.js";
+import { cjsJS, cjsTS } from "./cjs.js";
 
 /**
  * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
@@ -11,8 +10,12 @@ const nodeEsmRules = {
   "import-x/extensions": ["error", "ignorePackages"],
 };
 
-const esmJS = mergeConfigs(nodeJS, {
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esmJS = mergeConfigs(cjsJS, {
   name: "node-esm-js",
+  files: ["**/*.{js,mjs}"],
   languageOptions: {
     sourceType: "module",
   },
@@ -21,8 +24,12 @@ const esmJS = mergeConfigs(nodeJS, {
   },
 });
 
-const esmTS = mergeConfigs(nodeTS, {
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esmTS = mergeConfigs(cjsTS, {
   name: "node-esm-ts",
+  files: ["**/*.{ts,mts}"],
   languageOptions: {
     sourceType: "module",
   },
@@ -32,10 +39,5 @@ const esmTS = mergeConfigs(nodeTS, {
   },
 });
 
-/**
- * @satisfies {import("../types/index.js").ESLintFlatConfig[]}
- */
-const ruleset = [esmJS, esmTS, formatting];
-
-export default ruleset;
+export default [esmJS, esmTS];
 export { esmJS, esmTS };
diff --git a/packages/eslint-config/src/configs/formatting.js b/packages/eslint-config/src/configs/formatting.js