Code Formatting: eslint and prettier applied

Author: dhnchandan

.eslintrc

@@ -0,0 +1,36 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": 2020,
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"extends": [
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier/@typescript-eslint",
+		"plugin:prettier/recommended"
+	],
+	"rules": {
+		"quotes": ["error", "double"],
+		// Indent with 4 spaces
+		"indent": ["error", "tab"],
+		// Indent JSX with 4 spaces
+		"react/jsx-indent": ["error", "tab"],
+		// Indent props with 4 spaces
+		"react/jsx-indent-props": ["error", "tab"],
+		"prettier/prettier": [
+			"error",
+			{
+				"endOfLine": "auto"
+			}
+		]
+	}
+}

package.json

@@ -7,6 +7,10 @@
 		"build": "react-dotenv && react-scripts build",
 		"test": "react-scripts test",
 		"eject": "react-scripts eject",
+		"lint:fix": "eslint src/*.ts --fix",
+		"lint": "eslint src/*.ts",
+		"test-lint": "lint-staged",
+		"prettify": "prettier src/*.ts --write",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook"
 	},
@@ -48,6 +52,29 @@
 		"@storybook/addon-actions": "^6.1.15",
 		"@storybook/addon-essentials": "^6.1.15",
 		"@storybook/addon-links": "^6.1.15",
-		"@storybook/react": "^6.1.15"
+		"@storybook/react": "^6.1.15",
+		"@typescript-eslint/eslint-plugin": "^4.14.1",
+		"@typescript-eslint/parser": "^4.14.1",
+		"eslint": "^7.18.0",
+		"eslint-config-prettier": "^7.2.0",
+		"eslint-plugin-prettier": "^3.3.1",
+		"eslint-plugin-react": "^7.22.0",
+		"prettier": "^2.2.1",
+		"husky": "^4.3.8",
+		"lint-staged": "^10.5.3"
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	},
+	"lint-staged": {
+		"*.(js|html|css|scss|json)": [
+			"prettier --write"
+		],
+		".(js|ts)": [
+			"yarn lint:fix",
+			"yarn lint"
+		]
 	}
 }

public/env.js

@@ -1,15 +1,17 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
+	if (onPerfEntry && onPerfEntry instanceof Function) {
+		import("web-vitals").then(
+			({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+				getCLS(onPerfEntry);
+				getFID(onPerfEntry);
+				getFCP(onPerfEntry);
+				getLCP(onPerfEntry);
+				getTTFB(onPerfEntry);
+			}
+		);
+	}
 };
 
 export default reportWebVitals;

src/reportWebVitals.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

src/setupTests.ts

@@ -1,26 +1,21 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "build"]
 }