feature: Eslint Added, code formated, made codebase consistent (#112)

jugshaurya · web-flow · commit 694953936492 · 2021-12-23T07:31:42.000-08:00
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,36 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module",
+    // enable jsx support
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:json/recommended"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "commonjs": true,
+    "es6": true
+  },
+  "plugins": ["react", "jest", "react-hooks", "jsx-a11y"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
@@ -7,13 +7,14 @@
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "printWidth": 80,
-  "proseWrap": "preserve",
+  "proseWrap": "always",
   "quoteProps": "as-needed",
   "requirePragma": false,
   "semi": true,
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "vueIndentScriptAndStyle": false
-}
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "auto"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "esbenp.prettier-vscode",
-    "vscodeshift.material-ui-snippets"
+    "vscodeshift.material-ui-snippets",
+    "dbaeumer.vscode-eslint"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,51 @@
+/* recommmended settings for vscode */
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.rulers": [80],
+  "editor.snippetSuggestions": "top",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.suggestSelection": "recentlyUsed",
+    "editor.suggest.showKeywords": false
+  },
+  "files.exclude": {
+    "USE_GITIGNORE": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/coverage": true,
+    "**/dist": true,
+    "**/build": true,
+    "**/.build": true,
+    "**/.gh-pages": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": false
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.options": {
+    "env": {
+      "browser": true,
+      "jest/globals": true,
+      "es6": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 2019,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "rules": {
+      "no-debugger": "off"
+    }
+  },
+  "editor.formatOnPaste": false
+}
diff --git a/injectLatestProps.js b/injectLatestProps.js
@@ -24,4 +24,5 @@ exec(
     // the *entire* stdout and stderr (buffered)
     console.log(`stdout: ${stdout}`);
     console.log(`stderr: ${stderr}`);
-  };
+  }
+);
diff --git a/package.json b/package.json
@@ -33,7 +33,13 @@
     "prepare": "node injectLatestProps.js",
     "deploy": "gh-pages -d build",
     "postinstall": "patch-package",
-    "format": "prettier --write \"./src\""
+    "prettier": "prettier --ignore-path .gitignore \"**/*.+(js|jsx|json)\" --ignore-unknown",
+    "format": "npm run prettier -- --write",
+    "check-format": "npm run prettier -- --check",
+    "lint": "eslint --ignore-path .gitignore . --fix",
+    "check-lint": "eslint --ignore-path .gitignore .",
+    "make-consistent": "npm run format && npm run lint",
+    "validate": "npm run check-format && npm run check-lint"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -54,8 +60,13 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.13.12",
     "customize-cra": "^1.0.0",
+    "eslint-plugin-jest": "^24.3.5",
+    "eslint-plugin-json": "^2.1.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "gh-pages": "^3.1.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
@@ -69,7 +80,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,css,md,json}": [
-      "prettier --write --ignore-unknown",
+      "npm run validate",
       "git add"
     ]
   }
diff --git a/public/manifest.json b/public/manifest.json
@@ -16,7 +16,7 @@
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
-    }	    
+    }
   ],
   "start_url": ".",
   "display": "standalone",
diff --git a/src/App.test.js b/src/App.test.js
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 
+// eslint-disable-next-line jest/expect-expect
 it("renders without crashing", () => {
   const div = document.createElement("div");
   ReactDOM.render(<App />, div);
diff --git a/src/content/ButtonGroup/buttongroup.playground.jsx b/src/content/ButtonGroup/buttongroup.playground.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ButtonGroup} from "react-native-elements";
+import { ButtonGroup } from "react-native-elements";
 
 import Playground from "../../components/playground";
 import { useView, PropTypes } from "react-view";
@@ -57,7 +57,7 @@ const ButtonGroupPlayground = () => {
         propHook: {
           what: `selectedIdx`,
           into: `selectedIndex`,
-        }
+        },
       },
       selectMultiple: {
         type: PropTypes.Boolean,
@@ -70,12 +70,12 @@ const ButtonGroupPlayground = () => {
       selectedIndex: {
         type: PropTypes.Number,
         value: `1`,
-        stateful: true
+        stateful: true,
       },
       selectedIndexes: {
         type: PropTypes.Array,
         value: `[]`,
-        stateful: true
+        stateful: true,
       },
       selectedTextStyle: {
         type: PropTypes.Object,
diff --git a/src/content/CheckBox/checkbox.playground.jsx b/src/content/CheckBox/checkbox.playground.jsx
@@ -11,23 +11,23 @@ const HeaderPlayground = () => {
       center: {
         type: PropTypes.Boolean,
         value: false,
-        description: "Aligns checkbox to center (optional)"
+        description: "Aligns checkbox to center (optional)",
       },
       right: {
         type: PropTypes.Boolean,
         value: false,
-        description: "Aligns checkbox to right (optional)"
+        description: "Aligns checkbox to right (optional)",
       },
       checked: {
         type: PropTypes.Boolean,
         value: false,
         stateful: true,
-        description: "Flag for checking the icon (required)"
+        description: "Flag for checking the icon (required)",
       },
       checkedColor: {
         type: PropTypes.String,
         value: "#0F0",
-        description: "Default checked color (optional)"
+        description: "Default checked color (optional)",
       },
       checkedIcon: {
         type: PropTypes.Object,
@@ -37,7 +37,7 @@ const HeaderPlayground = () => {
       checkedTitle: {
         type: PropTypes.String,
         value: `Great!`,
-        description: "Specify a custom checked message (optional)"
+        description: "Specify a custom checked message (optional)",
       },
       Component: {
         type: PropTypes.ReactNode,
@@ -47,71 +47,71 @@ const HeaderPlayground = () => {
       containerStyle: {
         type: PropTypes.Object,
         value: `{width: "75%"}`,
-        description: "Style of main container (optional)"
+        description: "Style of main container (optional)",
       },
       fontFamily: {
         type: PropTypes.String,
         value: null,
-        description: "Specify different font family"
+        description: "Specify different font family",
       },
       iconRight: {
         type: PropTypes.Boolean,
         value: false,
-        description: "Moves icon to right of text (optional)"
+        description: "Moves icon to right of text (optional)",
       },
       iconType: {
         type: PropTypes.String,
         value: null,
-        description: "type of icon set"
+        description: "type of icon set",
       },
       onIconPress: {
         type: PropTypes.Function,
         value: `() => setChecked(!checked)`,
         propHook: {
           what: "!checked",
-          into: "checked"
+          into: "checked",
         },
-        description: "onPress function for checkbox (required)"
+        description: "onPress function for checkbox (required)",
       },
       onLongIconPress: {
         type: PropTypes.Function,
         value: `() => console.log("onLongIconPress()")`,
-        description: "onLongPress function for checkbox (optional)"
+        description: "onLongPress function for checkbox (optional)",
       },
       onLongPress: {
         type: PropTypes.Function,
         value: `() => console.log("onLongPress()")`,
-        description: "onLongPress function for checkbox (optional)"
+        description: "onLongPress function for checkbox (optional)",
       },
       onPress: {
         type: PropTypes.Function,
         value: `() => console.log("onPress()")`,
-        description: "onPress function for container (optional)"
+        description: "onPress function for container (optional)",
       },
       size: {
         type: PropTypes.Number,
         value: 30,
-        description: "Size of the checkbox"
+        description: "Size of the checkbox",
       },
       textStyle: {
         type: PropTypes.Object,
         value: `{}`,
-        description: "Style of text (optional)"
+        description: "Style of text (optional)",
       },
       title: {
         type: PropTypes.Object,
         value: `"Check for Awesomeness"`,
-        description: "Title of checkbox"
+        description: "Title of checkbox",
       },
       titleProps: {
         type: PropTypes.Object,
         value: `{}`,
-        description: "Additional props for the title Text component (optional)"
+        description: "Additional props for the title Text component (optional)",
       },
       uncheckedColor: {
         type: PropTypes.String,
         value: `#F00`,
-        description: "Default unchecked color (optional)"
+        description: "Default unchecked color (optional)",
       },
       uncheckedIcon: {
         type: PropTypes.Object,
diff --git a/src/content/Overlay/overlay.playground.jsx b/src/content/Overlay/overlay.playground.jsx
@@ -17,12 +17,12 @@ const OverlayPlayground = () => {
       children: {
         type: PropTypes.ReactNode,
         value: `<Text>Some content</Text><TouchableOpacity onPress={()=>setIsVisible(!isVisible)}><Text>Click to close</Text></TouchableOpacity>`,
-        propHook: ({getInstrumentOnChange, fnBodyAppend}) => ({
+        propHook: ({ getInstrumentOnChange, fnBodyAppend }) => ({
           JSXAttribute(path) {
-            if (path.get('name').node.name === 'onPress') {
+            if (path.get("name").node.name === "onPress") {
               fnBodyAppend(
-                path.get('value'),
-                getInstrumentOnChange('false', 'isVisible')
+                path.get("value"),
+                getInstrumentOnChange("false", "isVisible")
               );
             }
           },
@@ -49,7 +49,7 @@ const OverlayPlayground = () => {
         propHook: {
           what: `false`,
           into: `isVisible`,
-        }
+        },
       },
       overlayStyle: {
         type: PropTypes.Object,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"recommendations": [`
`3`	`3`	`"esbenp.prettier-vscode",`
`4`		`- "vscodeshift.material-ui-snippets"`
	`4`	`+ "vscodeshift.material-ui-snippets",`
	`5`	`+ "dbaeumer.vscode-eslint"`
`5`	`6`	`]`
`6`	`7`	`}`