fix: disable stylistic rules (#223)

.changeset/seven-foxes-worry.md

@@ -0,0 +1,5 @@
+---
+"@qlik/eslint-config": patch
+---
+
+Disables stylistic rules, normally handled by prettier.

packages/eslint-config/package.json

@@ -28,6 +28,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",
@@ -45,6 +46,7 @@
     "@qlik/prettier-config": "workspace:*",
     "@qlik/tsconfig": "workspace:*",
     "@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",

packages/eslint-config/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];

packages/eslint-config/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];

packages/eslint-config/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];

packages/eslint-config/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];

packages/eslint-config/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",

packages/eslint-config/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 }],

packages/eslint-config/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"],

packages/eslint-config/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];