Introduce package for sharing eslint and prettier configurations

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

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

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());
+}

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,
+          },
+        ],
+      },
+    },
+  ],
+};

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": "info@k8slens.dev"
+  },
+  "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"
+  }
+}

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"
+}