format code with prettier

Author: fxnoob

content-scripts/App.jsx

@@ -1,8 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Index from './components/'
-
-const Element = document.createElement("div");
-Element.setAttribute("id" , "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
-document.body.appendChild(Element);
-ReactDOM.render(<Index />, document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf"));
+import React from "react";
+import ReactDOM from "react-dom";
+import Index from "./components/";
+
+const Element = document.createElement("div");
+Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
+document.body.appendChild(Element);
+ReactDOM.render(
+  <Index />,
+  document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf")
+);

content-scripts/components/index.jsx

@@ -1,12 +1,10 @@
-import React from 'react';
+import React from "react";
 
 export default class Index extends React.Component {
-    constructor(props){
-        super(props);
-    }
-    render() {
-        return (
-            <div></div>
-        );
-    }
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div></div>;
+  }
 }

package.json

@@ -8,6 +8,11 @@
     "dev": "webpack --watch --progress --colors --config webpack.config.js --mode=development",
     "test": "webpack --progress --colors --config webpack.config.js --mode=production"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -22,6 +27,7 @@
     "copy-webpack-plugin": "^5.0.4",
     "file-loader": "^4.2.0",
     "image-webpack-loader": "^5.0.0",
+    "prettier": "1.18.2",
     "react-hot-loader": "^4.12.10",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6",

src/app/manifest.json

@@ -9,15 +9,9 @@
   },
   "default_locale": "en",
   "background": {
-    "scripts": [
-      "background.bundle.js"
-    ]
+    "scripts": ["background.bundle.js"]
   },
-  "permissions": [
-    "history" ,
-    "webNavigation" ,
-    "*://*/*"
-  ],
+  "permissions": ["history", "webNavigation", "*://*/*"],
   "browser_action": {
     "default_icon": {
       "19": "images/icon-19.png",

src/background.js

@@ -1,34 +1,24 @@
-import "@babel/polyfill"
+import "@babel/polyfill";
 
-let AppInitState = 0 // it means app is off on startup
+let AppInitState = 0; // it means app is off on startup
 
 class Main {
-    constructor() {
-
-    }
-    popUpClickSetup() {
-        chrome
-            .browserAction
-            .onClicked
-            .addListener((tab) => {
-                if(this.toggleApp()) {
-
-                } else {
-                    this.stopApp()
-                }
-            });
-    }
-
-    toggleApp = () => {
-      AppInitState = AppInitState?0:1;
-      return AppInitState
-    }
-
-    stopApp = () => {
-       AppInitState = 0
-    }
-
+  constructor() {}
+  popUpClickSetup() {
+    chrome.browserAction.onClicked.addListener(tab => {
+      if (this.toggleApp()) {
+      } else {
+        this.stopApp();
+      }
+    });
+  }
+
+  toggleApp = () => {
+    AppInitState = AppInitState ? 0 : 1;
+    return AppInitState;
+  };
+
+  stopApp = () => {
+    AppInitState = 0;
+  };
 }
-
-
-

webpack.config.js

@@ -1,53 +1,56 @@
-const webpack = require('webpack');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const webpack = require("webpack");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   entry: {
-    content_script: './content-scripts/App.jsx',
-    background: './src/background.js',
-    popup: './popup-page/App.jsx',
-    option: './option-page/App.jsx',
+    content_script: "./content-scripts/App.jsx",
+    background: "./src/background.js",
+    popup: "./popup-page/App.jsx",
+    option: "./option-page/App.jsx"
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
+        use: ["babel-loader"]
       },
       {
         test: /\.(gif|png|jpe?g|svg)$/i,
         use: [
-          'file-loader',
+          "file-loader",
           {
-            loader: 'image-webpack-loader',
+            loader: "image-webpack-loader",
             options: {
               bypassOnDebug: true, // webpack@1.x
-              disable: true, // webpack@2.x and newer
-            },
-          },
+              disable: true // webpack@2.x and newer
+            }
+          }
         ]
       }
     ]
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
+    extensions: ["*", ".js", ".jsx"]
   },
   output: {
-    path: __dirname + '/dist',
-    publicPath: '/',
-    filename: '[name].bundle.js'
+    path: __dirname + "/dist",
+    publicPath: "/",
+    filename: "[name].bundle.js"
   },
   plugins: [
-    new CopyWebpackPlugin([
-      { from: './popup-page/popup.html', force: true } ,
-      { from: './option-page/option.html', force: true } ,
-      { from: './src/app/', force: true }
-    ], {}),
+    new CopyWebpackPlugin(
+      [
+        { from: "./popup-page/popup.html", force: true },
+        { from: "./option-page/option.html", force: true },
+        { from: "./src/app/", force: true }
+      ],
+      {}
+    ),
     new webpack.HotModuleReplacementPlugin()
   ],
   devServer: {
-    contentBase: './dist',
+    contentBase: "./dist",
     hot: true
   }
 };