refactor(linter): adoption of the prettier configuration

Author: SimonGolms

.eslintrc.js

@@ -6,107 +6,107 @@ module.exports = {
     worker: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
-    'plugin:@typescript-eslint/strict',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:jsx-a11y/recommended',
-    'plugin:playwright/playwright-test',
-    'plugin:sonarjs/recommended',
-    'plugin:typescript-sort-keys/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:playwright/playwright-test",
+    "plugin:sonarjs/recommended",
+    "plugin:typescript-sort-keys/recommended",
     // HINT: prettier must be the last extension to work
-    'plugin:prettier/recommended',
+    "plugin:prettier/recommended",
   ],
-  ignorePatterns: ['build', 'dist', 'docker', 'node_modules', 'openshift', 'public'],
+  ignorePatterns: ["build", "dev-dist", "dist", "docker", "node_modules", "openshift", "public"],
   overrides: [
     {
-      files: ['*.ts', '*.tsx'],
+      files: ["*.ts", "*.tsx"],
       rules: {
-        'no-undef': 'off',
-        'no-unused-vars': 'off',
+        "no-undef": "off",
+        "no-unused-vars": "off",
       },
     },
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: ['./tsconfig.json'],
+    project: ["./tsconfig.json"],
     tsconfigRootDir: __dirname,
   },
   plugins: [
-    '@typescript-eslint',
-    'jsx-a11y',
-    'react-hooks',
-    'react',
-    'sonarjs',
-    'sort-keys-fix',
-    'typescript-sort-keys',
+    "@typescript-eslint",
+    "jsx-a11y",
+    "react-hooks",
+    "react",
+    "sonarjs",
+    "sort-keys-fix",
+    "typescript-sort-keys",
     // HINT: prettier must be the last plugin to work
-    'prettier',
+    "prettier",
   ],
   rules: {
-    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
-    '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
-    '@typescript-eslint/no-misused-promises': [
-      'error',
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/no-floating-promises": ["error", { ignoreVoid: true }],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
       {
         checksVoidReturn: false,
       },
     ],
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
       {
-        argsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
+        argsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
       },
     ],
-    '@typescript-eslint/sort-type-union-intersection-members': 'error',
-    camelcase: 'warn',
-    curly: 'error',
-    'import/no-unused-modules': [
-      'error',
+    "@typescript-eslint/sort-type-union-intersection-members": "error",
+    camelcase: "warn",
+    curly: "error",
+    "import/no-unused-modules": [
+      "error",
       {
         ignoreExports: [
-          'playwright/index.ts',
-          'src/index.tsx',
-          'src/**/*.d.ts',
-          'src/**/*.{spec,test}.{ts,tsx}',
-          '*.{js,ts}', // mostly configuration files
+          "playwright/index.ts",
+          "src/index.tsx",
+          "src/**/*.d.ts",
+          "src/**/*.{spec,test}.{ts,tsx}",
+          "*.{js,ts}", // mostly configuration files
         ],
         missingExports: true,
-        src: ['.'],
+        src: ["."],
         unusedExports: true,
       },
     ],
-    'import/order': [
-      'error',
+    "import/order": [
+      "error",
       {
         alphabetize: {
           caseInsensitive: true,
-          order: 'asc',
+          order: "asc",
         },
-        groups: ['builtin', 'external', 'internal'],
+        groups: ["builtin", "external", "internal"],
         pathGroups: [
           {
-            group: 'external',
-            pattern: 'react',
-            position: 'before',
+            group: "external",
+            pattern: "react",
+            position: "before",
           },
         ],
-        pathGroupsExcludedImportTypes: ['react'],
+        pathGroupsExcludedImportTypes: ["react"],
       },
     ],
-    'import/prefer-default-export': 'off',
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'prettier/prettier': 'error',
-    'react/jsx-sort-default-props': 'error',
-    'react/jsx-sort-props': [
-      'error',
+    "import/prefer-default-export": "off",
+    "no-console": ["warn", { allow: ["warn", "error"] }],
+    "prettier/prettier": "error",
+    "react/jsx-sort-default-props": "error",
+    "react/jsx-sort-props": [
+      "error",
       {
         callbacksLast: true,
         ignoreCase: true,
@@ -116,34 +116,34 @@ module.exports = {
         shorthandLast: false,
       },
     ],
-    'react-hooks/exhaustive-deps': 'error',
-    'react-hooks/rules-of-hooks': 'error',
-    'sort-imports': [
-      'error',
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "sort-imports": [
+      "error",
       {
         ignoreCase: true,
         ignoreDeclarationSort: true,
         ignoreMemberSort: false,
       },
     ],
     // Required to fix sort-keys automatically, since this is not done by default.
-    'sort-keys-fix/sort-keys-fix': [
-      'error',
-      'asc',
+    "sort-keys-fix/sort-keys-fix": [
+      "error",
+      "asc",
       {
         caseSensitive: false,
         natural: true,
       },
     ],
   },
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       typescript: {
         alwaysTryTypes: true,
       },
     },
     react: {
-      version: 'detect',
+      version: "detect",
     },
   },
 };

.prettierignore

@@ -1,5 +1,6 @@
 .history/
 build/
+dev-dist/
 dist/
 node_modules/
 openshift/ods-deployments.json

capacitor.config.ts

@@ -1,10 +1,10 @@
-import { CapacitorConfig } from '@capacitor/cli';
+import { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: 'com.company.PROJECTID.COMPONENTID',
-  appName: 'COMPONENTID',
+  appId: "com.company.PROJECTID.COMPONENTID",
+  appName: "COMPONENTID",
   bundledWebRuntime: false,
-  webDir: 'dist',
+  webDir: "dist",
 };
 
 export default config;

playwright-ct.config.ts

@@ -1,4 +1,4 @@
-import { devices, type PlaywrightTestConfig } from '@playwright/experimental-ct-react';
+import { devices, type PlaywrightTestConfig } from "@playwright/experimental-ct-react";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -13,29 +13,29 @@ const config: PlaywrightTestConfig = {
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'Desktop Chromium',
-      use: devices['Desktop Chrome'],
+      name: "Desktop Chromium",
+      use: devices["Desktop Chrome"],
     },
     {
-      name: 'Desktop Safari',
-      use: devices['Desktop Safari'],
+      name: "Desktop Safari",
+      use: devices["Desktop Safari"],
     },
     {
-      name: 'Desktop Firefox',
-      use: devices['Desktop Firefox'],
+      name: "Desktop Firefox",
+      use: devices["Desktop Firefox"],
     },
     {
-      name: 'Mobile Chrome',
-      use: devices['Pixel 5'],
+      name: "Mobile Chrome",
+      use: devices["Pixel 5"],
     },
     {
-      name: 'Mobile Safari',
-      use: devices['iPhone 13 Pro'],
+      name: "Mobile Safari",
+      use: devices["iPhone 13 Pro"],
     },
   ],
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? [['junit', { outputFile: 'build/test-results/test/component-test-results.xml' }]] : 'list',
+  reporter: process.env.CI ? [["junit", { outputFile: "build/test-results/test/component-test-results.xml" }]] : "list",
 
   /**
    * Retry on CI only - Test that passes on a second retry is 'flaky'
@@ -44,9 +44,9 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
 
   /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: './__snapshots__',
+  snapshotDir: "./__snapshots__",
 
-  testDir: './src',
+  testDir: "./src",
 
   /* Maximum time one test can run for (in milliseconds). */
   timeout: 20_000,
@@ -63,7 +63,7 @@ const config: PlaywrightTestConfig = {
     },
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Opt out of parallel tests on CI. */

playwright/index.ts

@@ -1,22 +1,22 @@
-import { setupIonicReact } from '@ionic/react';
+import { setupIonicReact } from "@ionic/react";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/react/css/core.css';
+import "@ionic/react/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/react/css/normalize.css';
-import '@ionic/react/css/structure.css';
-import '@ionic/react/css/typography.css';
+import "@ionic/react/css/normalize.css";
+import "@ionic/react/css/structure.css";
+import "@ionic/react/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/react/css/padding.css';
-import '@ionic/react/css/float-elements.css';
-import '@ionic/react/css/text-alignment.css';
-import '@ionic/react/css/text-transformation.css';
-import '@ionic/react/css/flex-utils.css';
-import '@ionic/react/css/display.css';
+import "@ionic/react/css/padding.css";
+import "@ionic/react/css/float-elements.css";
+import "@ionic/react/css/text-alignment.css";
+import "@ionic/react/css/text-transformation.css";
+import "@ionic/react/css/flex-utils.css";
+import "@ionic/react/css/display.css";
 
 /* Styles */
-import '../src/theme/index.css';
+import "../src/theme/index.css";
 
 setupIonicReact();