Add eslint

Author: gesseekur

.eslintrc.js

@@ -1,14 +1,25 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  },
-  parserOptions: {
-    parser: "babel-eslint"
-  }
-};
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential",
+        "plugin:vue/strongly-recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        "quotes": ["error", "single"],
+    }
+};

package-lock.json

@@ -11,19 +11,21 @@
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --fix 'src/**/*.vue'",
     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
     "build-bundle": "vue-cli-service build --target lib --name mew-components ./src/wrapper.js",
     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/mew-components.umd.js",
     "build:es": "rollup --config build/rollup.config.js --format es --file dist/mew-components.esm.js",
     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/mew-components.min.js",
     "storybook": "start-storybook -p 6006 -c .storybook watch-css -s ./src",
     "build-storybook": "build-storybook -c .storybook -o .out",
-    "deploy-storybook": "storybook-to-ghpages"
+    "deploy-storybook": "storybook-to-ghpages",
+    "eslint": "eslint --ignore-path .gitignore ."
   },
   "dependencies": {
     "all": "0.0.0",
     "core-js": "^2.6.5",
+    "eslint-config-eslint": "^6.0.0",
     "fibers": "^4.0.2",
     "git-url-parse": "^11.1.2",
     "material-design-icons-iconfont": "^5.0.1",
@@ -55,7 +57,7 @@
     "babel-preset-vue": "^2.0.2",
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-vue": "^6.2.2",
     "file-loader": "^6.0.0",
     "prettier": "^1.18.2",
     "rollup": "^1.17.0",

package.json

@@ -70,10 +70,10 @@
 </template>
 
 <script>
-import Blockie from "@/components/Blockie/Blockie.vue";
+import Blockie from '@/components/Blockie/Blockie.vue';
 
 export default {
-  name: "AddressSelector",
+  name: 'AddressSelector',
   props: {
     /**
      * Enables save address button.
@@ -94,7 +94,7 @@ export default {
      */
     label: {
       type: String,
-      default: "To Address"
+      default: 'To Address'
     },
     /**
      * The saved addresses in address book.
@@ -110,7 +110,7 @@ export default {
      */
     placeholder: {
       type: String,
-      default: "Please enter an address"
+      default: 'Please enter an address'
     },
     /**
      * The function applied to save the address.
@@ -125,33 +125,33 @@ export default {
   },
   data() {
     return {
-      addressValue: "",
+      addressValue: '',
       autoSelectMenu: false
     };
   },
   watch: {
     addressValue(newValue) {
-      console.log("address value:", newValue);
+      console.log('address value:', newValue);
     }
   },
   methods: {
     toggle() {
       this.autoSelectMenu = !this.autoSelectMenu;
     },
     copyToClipboard() {
-      this.$refs.addressInput.$el.querySelector("input").select();
-      document.execCommand("copy");
-      console.log("copied");
+      this.$refs.addressInput.$el.querySelector('input').select();
+      document.execCommand('copy');
+      console.log('copied');
       // Toast.responseHandler(this.$t('common.copied'), Toast.INFO);
     },
     selectAddress(data) {
       this.autoSelectMenu = false;
       this.addressValue = data.address;
-      this.$emit("emitSelectedValue", data);
+      this.$emit('emitSelectedValue', data);
     },
     getSaveBtnClasses() {
       if (!this.enableSaveAddress) {
-        return "disable-icon";
+        return 'disable-icon';
       }
     }
   }

src/components/AddressSelect/AddressSelect.vue

@@ -2,30 +2,30 @@
   <div ref="identicon" class="address-identicon" />
 </template>
 <script>
-import Blockies from "@/helpers/blockies.js";
+import Blockies from '@/helpers/blockies.js';
 export default {
-  name: "Blockie",
+  name: 'Blockie',
   props: {
     /**
      * Valid address
      */
     address: {
       type: String,
-      default: ""
+      default: ''
     },
     /**
      * Blockie width
      */
     width: {
       type: String,
-      default: "64px"
+      default: '64px'
     },
     /**
      * Blockie height
      */
     height: {
       type: String,
-      default: "64px"
+      default: '64px'
     },
     /**
      * Blockie size
@@ -69,7 +69,7 @@ export default {
     setBlockie() {
       console.error('this', this.address)
       const data = Blockies({
-        seed: this.address ? this.address.toLowerCase() : "",
+        seed: this.address ? this.address.toLowerCase() : '',
         size: this.size,
         scale: this.scale
       }).toDataURL();

src/components/Blockie/Blockie.vue

@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "MewButton",
+  name: 'MewButton',
   props: {
     /**
      * The text that will go in the button.
@@ -43,22 +43,22 @@ export default {
      */
     iconAlign: {
       type: String,
-      description: "Hello",
-      default: "none"
+      description: 'Hello',
+      default: 'none'
     },
     /**
      * Applies the button color theme: basic, primary, error, white, or secondary.
      */
     colorTheme: {
       type: String,
-      default: ""
+      default: ''
     },
     /**
      * Applies the button style: background, transparent, or outline.
      */
     btnStyle: {
       type: String,
-      default: ""
+      default: ''
     },
     /**
      * Removes the ability to click or target the component.
@@ -71,17 +71,17 @@ export default {
   data() {
     return {
       btnStyles: {
-        background: "background",
-        transparent: "transparent",
-        outline: "outline"
+        background: 'background',
+        transparent: 'transparent',
+        outline: 'outline'
       },
       colorThemes: {
-        white: "white",
-        primary: "primary"
+        white: 'white',
+        primary: 'primary'
       },
       iconAlignments: {
-        left: "left",
-        right: "right"
+        left: 'left',
+        right: 'right'
       },
       active: false
     };
@@ -97,18 +97,18 @@ export default {
         this.btnStyle.toLowerCase() === this.btnStyles.background &&
         this.colorTheme.toLowerCase() !== this.colorThemes.white
       ) {
-        classes.push("white--text");
+        classes.push('white--text');
       }
 
       if (
         this.btnStyle.toLowerCase() === this.btnStyles.background &&
         this.colorTheme.toLowerCase() === this.colorThemes.white
       ) {
-        classes.push("primary--text");
+        classes.push('primary--text');
       }
 
       if (this.disabled) {
-        classes.push("disabled-btn");
+        classes.push('disabled-btn');
       }
 
       if (
@@ -117,15 +117,15 @@ export default {
         this.btnStyle.toLowerCase() === this.btnStyles.background &&
         this.colorTheme.toLowerCase() === this.colorThemes.primary
       ) {
-        classes.push("primary-active");
+        classes.push('primary-active');
       }
 
       if (
         this.active &&
         !this.disabled &&
         this.btnStyle.toLowerCase() === this.btnStyles.outline
       ) {
-        classes.push("bg-white");
+        classes.push('bg-white');
       }
 
       return classes;