eslint fixes for unresolved module(imports)

udaypydi · udaypydi · commit 75ee51580bee · 2020-04-23T14:13:21.000+05:30
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,6 +7,14 @@ module.exports = {
     'plugin:react/recommended',
     'airbnb',
   ],
+  settings: {
+    "import/resolver": {
+      node: {
+          extensions: ['.js', '.jsx', '.scss', '.css'],
+          moduleDirectory: ['node_modules', 'src/'],
+      },
+    },
+  },
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "build": "npm run build:css && webpack ---config ./config/webpack.prod.config.js",
     "dev": "npm run watch:css && webpack-dev-server --config ./config/webpack.dev.config.js --open",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx src/",
-    "build:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css", 
+    "lint: fix": "./node_modules/.bin/eslint --ext .js,.jsx src/ --fix",
+    "build:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css",
     "watch:css": "postcss src/assets/css/styles.css -o src/assets/css/main.css",
     "test": "jest --collect-coverage",
     "test:watch": "jest --watch"
@@ -30,6 +31,7 @@
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
     "postcss-cli": "^7.1.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "tailwindcss": "^1.3.4",
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import logo from './logo.png';
 import Button from 'uielements/button/button.component';
+import logo from './logo.png';
 import 'assets/css/main.css';
 import './app.scss';
 
-
 export default function App() {
   return (
     <div className="bg-blue-900 flex flex-col justify-center items-center p-20">
-        <p className="text-4xl text-blue-100">Welcom To React Boilerplate!</p>
-        <img src={logo} className="app--image" />
-        <Button  buttonText="Get Started!" />
+      <p className="text-4xl text-blue-100">Welcom To React Boilerplate!</p>
+      <img src={logo} className="app--image" alt="logo" />
+      <Button buttonText="Get Started!" />
     </div>
   );
 }
diff --git a/src/uielements/button/button.component.jsx b/src/uielements/button/button.component.jsx
@@ -1,28 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
- 
+
 function Button(props) {
-    const { buttonText, primary } = props;
-    let btnClass = '';
+  const { buttonText, primary } = props;
+  let btnClass = '';
 
-    if (primary) {
-        btnClass = "bg-transparent hover:bg-blue-500 text-indigo-100 font-semibold hover:text-white py-2 px-4 border border-indigo-100 hover:border-transparent rounded";
-    }
-    return (
-        <button className={`${btnClass}`}>
-            {buttonText}
-        </button>
-    )
+  if (primary) {
+    btnClass = 'bg-transparent hover:bg-blue-500 text-indigo-100 font-semibold hover:text-white py-2 px-4 border border-indigo-100 hover:border-transparent rounded';
+  }
+  return (
+    <button type="button" className={`${btnClass}`}>
+      {buttonText}
+    </button>
+  );
 }
 
 Button.propTypes = {
-    buttonText: PropTypes.string.isRequired,
-    primary: PropTypes.bool,
+  buttonText: PropTypes.string.isRequired,
+  primary: PropTypes.bool,
 };
 
 Button.defaultProps = {
-    primary: true,
+  primary: true,
 };
 
 
-export default Button;
+export default Button;
