Introduce eslint and prettier for features and start using it (#7306)

* Introduce package for sharing eslint and prettier configurations Co-authored-by: Mikko Aspiala <[email protected]> Signed-off-by: Janne Savolainen <[email protected]> * Start using eslint and prettier in packages Co-authored-by: Mikko Aspiala <[email protected]> Signed-off-by: Janne Savolainen <[email protected]> --------- Signed-off-by: Janne Savolainen <[email protected]>
lensapp · Mar 10, 2023 · 699fc03 · 699fc03
1 parent 2789bce
commit 699fc03
Show file tree

Hide file tree

Showing 36 changed files with 3,164 additions and 801 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/infrastructure/eslint-config/README.md b/packages/infrastructure/eslint-config/README.md
@@ -0,0 +1,32 @@
+# Lens Code Style
+
+**Note:** This package contains Eslint and Prettier configurations, name of package is `@k8slens/eslint-config` just because Eslint has arbitrary requirement (https://eslint.org/docs/latest/extend/shareable-configs).
+
+## Usage
+
+1. Install `@k8slens/eslint-config`
+2. Create `.prettierrc` that contains `"@k8slens/eslint-config/prettier"`
+3. Add a `.eslintrc.js` that extends `@k8slens/eslint-config/eslint`, for example:
+
+```
+module.exports = {
+  extends: "@k8slens/eslint-config/eslint",
+  parserOptions: {
+    project: "./tsconfig.json"
+  }
+};
+```
+
+4. Add linting and formatting scripts to `package.json`
+
+```
+{
+  "scripts": {
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  }
+}
+```
+
+6. Run `npm run lint` to lint
+7. Run `npm run format` to fix all formatting
diff --git a/packages/infrastructure/eslint-config/bin/lint b/packages/infrastructure/eslint-config/bin/lint
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+const execSync = require("child_process").execSync;
+
+const argv = process.argv
+
+const shouldDoTheFix = argv.includes('--fix');
+
+try {
+  execSync(`eslint ${shouldDoTheFix ? "--fix " : " "}--ext ts,tsx --max-warnings=0 .`);
+} catch (error) {
+  console.log(error.stdout.toString());
+}
+
+try {
+  const result = execSync(`prettier ${shouldDoTheFix ? "--write" : "--check"} "**/*.{js,ts,tsx}"`);
+
+  console.log(result.toString());
+} catch (error) {
+  console.log(error.stdout.toString());
+}
diff --git a/packages/infrastructure/eslint-config/eslint-config.js b/packages/infrastructure/eslint-config/eslint-config.js
@@ -0,0 +1,173 @@
+module.exports = {
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "react-app/jest",
+    "airbnb-typescript",
+    "prettier",
+    "plugin:security/recommended",
+    "plugin:xss/recommended",
+    "plugin:no-unsanitized/DOM"
+  ],
+  plugins: [
+    "unused-imports",
+    "prettier",
+    "xss",
+    "no-unsanitized"
+  ],
+  rules: {
+    "react/react-in-jsx-scope": 0,
+    "security/detect-object-injection": "off",
+    "security/detect-non-literal-fs-filename": "off"
+  },
+  overrides: [
+    {
+      files: [
+        "**/*.ts?(x)",
+        "**/*.js?(x)",
+        "**/*.@(m|c)js"
+      ],
+      rules: {
+        "prettier/prettier": 2,
+        indent: "off", // Let prettier do it
+        curly: "error",
+        "import/prefer-default-export": "off",
+        "class-methods-use-this": "off",
+        "comma-dangle": "off",
+        "max-classes-per-file": "off",
+        "no-shadow": "off",
+        "no-param-reassign": ["error", { props: false }],
+        quotes: [
+          "error",
+          "double",
+          {
+            "avoidEscape": true,
+            "allowTemplateLiterals": true
+          }
+        ],
+        "padding-line-between-statements": [
+          "error",
+          {
+            blankLine: "always",
+            prev: "*",
+            next: "return",
+          },
+          {
+            blankLine: "always",
+            prev: "*",
+            next: "block-like",
+          },
+          {
+            blankLine: "always",
+            prev: "*",
+            next: "function",
+          },
+          {
+            blankLine: "always",
+            prev: "*",
+            next: "class",
+          },
+          {
+            blankLine: "always",
+            prev: ["const", "let", "var"],
+            next: "*",
+          },
+          {
+            blankLine: "any",
+            prev: ["const", "let", "var"],
+            next: ["const", "let", "var"],
+          },
+        ],
+        "import/no-extraneous-dependencies": "off",
+        "jsx-a11y/no-redundant-roles": ["off"],
+        "no-restricted-syntax": [
+          "error",
+          {
+            selector: "ForInStatement",
+            message:
+              "for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.",
+          },
+          {
+            selector: "WithStatement",
+            message:
+              "`with` is disallowed in strict mode because it makes code impossible to predict and optimize.",
+          },
+        ],
+        "max-len": [
+          "error",
+          120,
+          2,
+          {
+            ignoreUrls: true,
+            ignoreComments: false,
+            ignoreRegExpLiterals: true,
+            ignoreStrings: true,
+            ignoreTemplateLiterals: true,
+          },
+        ],
+        "unused-imports/no-unused-imports-ts": "error",
+        "import/extensions": "off",
+        "linebreak-style": ["error", "unix"],
+        "eol-last": ["error", "always"],
+        "object-shorthand": "error",
+        "prefer-template": "error",
+        "template-curly-spacing": "error",
+        "keyword-spacing": "off",
+
+        // testing-library
+        "testing-library/no-node-access": "off",
+        "testing-library/no-container": "off",
+        "testing-library/prefer-screen-queries": "off",
+        "testing-library/no-render-in-setup": "off",
+        "testing-library/render-result-naming-convention": "off",
+
+        // Typescript specific rules
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-floating-promises": "error",
+        "@typescript-eslint/interface-name-prefix": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-useless-constructor": "off",
+        "@typescript-eslint/comma-dangle": "off",
+        "@typescript-eslint/no-shadow": "off",
+        "@typescript-eslint/quotes": [
+          "error",
+          "double",
+          {
+            avoidEscape: true,
+            allowTemplateLiterals: true,
+          },
+        ],
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          {
+            allowShortCircuit: true,
+          },
+        ],
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/keyword-spacing": ["error"],
+        "@typescript-eslint/naming-convention": "off",
+
+        // React specific rules
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/require-default-props": "off",
+        "react/function-component-definition": "off",
+        "react/prop-types": "off",
+        "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
+
+        // jsx-a11y custom components
+        "jsx-a11y/label-has-associated-control": [
+          2,
+          {
+            controlComponents: ["Select", "StyledInput", "StyledSlider"],
+            depth: 1,
+          },
+        ],
+      },
+    },
+  ],
+};
diff --git a/packages/infrastructure/eslint-config/package.json b/packages/infrastructure/eslint-config/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@k8slens/eslint-config",
+  "version": "^6.5.0-alpha.0",
+  "description": "Lens eslint and prettier configurations",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "bin": {
+    "lens-lint": "bin/lint"
+  },
+  "exports": {
+    "./eslint": "./eslint-config.js",
+    "./prettier": "./prettier-config.json"
+  },
+  "files": [
+    "./eslint-config.js",
+    "./prettier-config.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lensapp/lens"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@typescript-eslint/eslint-plugin": ">= 5",
+    "@typescript-eslint/parser": ">= 5",
+    "eslint": ">= 7",
+    "eslint-config-airbnb-typescript": ">= 17",
+    "eslint-config-prettier": ">= 8",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": ">= 2",
+    "eslint-plugin-jest": ">= 27",
+    "eslint-plugin-jsx-a11y": ">= 6",
+    "eslint-plugin-no-unsanitized": ">= 4.0.2",
+    "eslint-plugin-prettier": ">= 4",
+    "eslint-plugin-react-hooks": ">= 4",
+    "eslint-plugin-security": ">= 1.6.0",
+    "eslint-plugin-simple-import-sort": ">= 7",
+    "eslint-plugin-unused-imports": ">= 2",
+    "eslint-plugin-xss": ">= 0.1.12",
+    "prettier": ">= 2"
+  }
+}
diff --git a/packages/infrastructure/eslint-config/prettier-config.json b/packages/infrastructure/eslint-config/prettier-config.json
@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}
diff --git a/packages/technical-features/application/agnostic/.eslintrc.js b/packages/technical-features/application/agnostic/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: "@k8slens/eslint-config/eslint",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+};
diff --git a/packages/technical-features/application/agnostic/.prettierrc b/packages/technical-features/application/agnostic/.prettierrc
@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"
diff --git a/packages/technical-features/application/agnostic/jest.config.js b/packages/technical-features/application/agnostic/jest.config.js
@@ -1,2 +1 @@
-module.exports =
-  require("@k8slens/jest").monorepoPackageConfig(__dirname).configForNode;
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForNode;
diff --git a/packages/technical-features/application/agnostic/package.json b/packages/technical-features/application/agnostic/package.json
@@ -26,7 +26,9 @@
   "scripts": {
     "build": "webpack",
     "dev": "webpack --mode=development --watch",
-    "test": "jest --coverage --runInBand"
+    "test": "jest --coverage --runInBand",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
   },
   "peerDependencies": {
     "@k8slens/feature-core": "^6.5.0-alpha.0",
@@ -37,6 +39,7 @@
   },
 
   "devDependencies": {
-    "@async-fn/jest": "^1.6.4"
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "*"
   }
 }
diff --git a/packages/technical-features/application/agnostic/src/application-information-token.ts b/packages/technical-features/application/agnostic/src/application-information-token.ts
@@ -10,15 +10,15 @@ export type ApplicationInformation = {
   productName: string;
   copyright: string;
   description: string;
-  k8sProxyVersion: string,
-  bundledKubectlVersion: string,
-  bundledHelmVersion: string,
-  sentryDsn: string,
-  contentSecurityPolicy: string,
-  welcomeRoute: string,
+  k8sProxyVersion: string;
+  bundledKubectlVersion: string;
+  bundledHelmVersion: string;
+  sentryDsn: string;
+  contentSecurityPolicy: string;
+  welcomeRoute: string;
   updatingIsEnabled: boolean;
   dependencies: Partial<Record<string, string>>;
-}
+};
 
 export const applicationInformationToken = getInjectionToken<ApplicationInformation>({
   id: "application-information-token",

diff --git a/packages/technical-features/application/agnostic/src/feature.ts b/packages/technical-features/application/agnostic/src/feature.ts
@@ -9,9 +9,7 @@ export const applicationFeature = getFeature({
       di,
       targetModule: module,
 
-      getRequireContexts: () => [
-        require.context("./", true, /\.injectable\.(ts|tsx)$/),
-      ],
+      getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)],
     });
   },
 });
diff --git a/...nical-features/application/agnostic/src/start-application/starting-of-application.test.ts b/...nical-features/application/agnostic/src/start-application/starting-of-application.test.ts
@@ -1,8 +1,4 @@
-import {
-  createContainer,
-  DiContainer,
-  getInjectable,
-} from "@ogre-tools/injectable";
+import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable";
 import { registerFeature } from "@k8slens/feature-core";
 import { applicationFeature } from "../feature";
 import { startApplicationInjectionToken } from "./start-application.injectable";
@@ -46,15 +42,15 @@ describe("starting-of-application", () => {
     di.register(
       beforeApplicationIsLoadingInjectable,
       onLoadOfApplicationInjectable,
-      afterApplicationIsLoadedInjectable
+      afterApplicationIsLoadedInjectable,
     );
   });
 
   describe("when application is started", () => {
     beforeEach(() => {
       const startApplication = di.inject(startApplicationInjectionToken);
 
-      startApplication();
+      void startApplication();
     });
 
     it("calls runnables registered in before application is loading", () => {

diff --git a/packages/technical-features/application/agnostic/tsconfig.json b/packages/technical-features/application/agnostic/tsconfig.json
@@ -1,3 +1,4 @@
 {
-  "extends": "@k8slens/typescript/config/base.json"
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts"]
 }
diff --git a/packages/technical-features/application/electron-main/.eslintrc.js b/packages/technical-features/application/electron-main/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: "@k8slens/eslint-config/eslint",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+};
diff --git a/packages/technical-features/application/electron-main/.prettierrc b/packages/technical-features/application/electron-main/.prettierrc
@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"