feature: configured ESLint/Prettier/Husky setup

.eslintignore

@@ -0,0 +1,11 @@
+node_modules
+.github
+.build;
+package-lock.json;
+package.json;
+yarn.lock;
+tailwind.config.js;
+tsconfig.json;
+postcss.config.js;
+Dockerfile.DEV;
+Dockerfile.PROD;

.eslintrc.json

@@ -0,0 +1,75 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2021": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
+  "rules": {
+    "import/extensions": 0,
+
+    "import/no-named-as-default-member": 0,
+    "react/prop-types": 0,
+    "react/display-name": 0,
+    "react/react-in-jsx-scope": 0,
+
+    // Require a whitespace at the beginning of a comment
+    "spaced-comment": ["warn", "always"],
+
+    // Maximum line length for comments
+    // Trailing comments allowed beyond maximum line length
+    "max-len": ["warn", { "code": 400, "comments": 100, "ignoreTrailingComments": true }],
+
+    // Require PascalCase for user-defined JSX components
+    "react/jsx-pascal-case": ["warn"],
+
+    // Console logs cannot be committed.
+    "no-console": ["warn"],
+
+    // Require props to be sorted
+    "react/jsx-sort-props": ["warn", { "callbacksLast": true, "shorthandFirst": true }],
+
+    // Omit boolean prop value when set to true
+    "react/jsx-boolean-value": ["warn", "never"],
+
+    // Require self closing tags in JSX/HTML
+    "react/self-closing-comp": ["warn", { "component": true, "html": true }],
+
+    // Disallow unnecessary curly braces in JSX
+    "react/jsx-curly-brace-presence": ["warn", "never"],
+
+    // Require blank line before certain statements
+    "padding-line-between-statements": [
+      "warn",
+      { "blankLine": "always", "prev": "*", "next": "function" },
+      { "blankLine": "always", "prev": "*", "next": "class" },
+      { "blankLine": "always", "prev": "*", "next": "export" },
+      // Ignore consecutive export statements
+      { "blankLine": "any", "prev": "export", "next": "export" },
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": "*", "next": "break" },
+      { "blankLine": "always", "prev": "*", "next": "continue" },
+      { "blankLine": "always", "prev": "*", "next": "throw" }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

package.json

@@ -70,15 +70,13 @@
     "snap": "react-snap",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"",
+    "lint": "eslint \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"",
+    "lint:fix": "eslint --fix \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"",
+    "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\" --config ./.prettierrc",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "reactSnap": {
     "puppeteerArgs": [
       "--no-sandbox",
@@ -98,9 +96,21 @@
     ]
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
     "autoprefixer": "^10.4.7",
     "cypress": "^10.6.0",
+    "eslint": "^8.22.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "lint-staged": "^13.0.3",
     "postcss": "^8.4.13",
+    "prettier": "^2.7.1",
     "puppeteer": "^13.7.0",
     "react-snap": "^1.23.0",
     "tailwindcss": "^3.0.24",