Change lint rules to AirBnB

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
-}
+    '@vue/app',
+  ],
+};

package-lock.json

@@ -3521,6 +3521,12 @@
         "typedarray": "^0.0.6"
       }
     },
+    "confusing-browser-globals": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.8.tgz",
+      "integrity": "sha512-lI7asCibVJ6Qd3FGU7mu4sfG4try4LX3+GVS+Gv8UlrEf2AeW57piecapnog2UHZSbcX/P/1UDWVaTsblowlZg==",
+      "dev": true
+    },
     "connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -4700,6 +4706,28 @@
         }
       }
     },
+    "eslint-config-airbnb": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz",
+      "integrity": "sha512-hLb/ccvW4grVhvd6CT83bECacc+s4Z3/AEyWQdIT2KeTsG9dR7nx1gs7Iw4tDmGKozCNHFn4yZmRm3Tgy+XxyQ==",
+      "dev": true,
+      "requires": {
+        "eslint-config-airbnb-base": "^14.0.0",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0"
+      }
+    },
+    "eslint-config-airbnb-base": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz",
+      "integrity": "sha512-2IDHobw97upExLmsebhtfoD3NAKhV4H0CJWP3Uprd/uk+cHuWYOczPVxQ8PxLFUAw7o3Th1RAU8u1DoUpr+cMA==",
+      "dev": true,
+      "requires": {
+        "confusing-browser-globals": "^1.0.7",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0"
+      }
+    },
     "eslint-config-standard": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@@ -8231,6 +8259,18 @@
         "object-keys": "^1.0.11"
       }
     },
+    "object.entries": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz",
+      "integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.12.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",

package.json

@@ -25,6 +25,7 @@
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-vue": "^5.0.0",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
@@ -37,9 +38,12 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "@vue/standard"
+      "@vue/standard",
+      "airbnb-base"
     ],
-    "rules": {},
+    "rules": {
+      "import/no-unresolved": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }

server.js

@@ -1,14 +1,13 @@
-var connect = require('connect')
-var serveStatic = require('serve-static')
+const connect = require('connect');
+const serveStatic = require('serve-static');
 
-const port = process.env.PORT || 3002
+const port = process.env.PORT || 3002;
 
+/* eslint no-console: 0 */
 try {
   connect()
-    .use(serveStatic(__dirname + '/dist'))
-    .listen(port, () =>
-      console.log(`Boom, app is running on port ${port}`)
-    )
+    .use(serveStatic(`${__dirname}/dist`))
+    .listen(port, () => console.log(`Boom, app is running on port ${port}`));
 } catch (error) {
-  console.log('Something fucked up', error)
+  console.log('Something fucked up', error);
 }

src/App.vue

@@ -7,14 +7,14 @@
 </template>
 <script>
 
-import Footer from '@/components/Footer.vue'
+import Footer from '@/components/Footer.vue';
 
 export default {
   name: 'app',
   components: {
-    Footer
-  }
-}
+    Footer,
+  },
+};
 </script>
 
 <style lang="scss">

src/components/Collapsable.vue

@@ -17,9 +17,9 @@ export default {
   name: 'CollapsableContainer',
   props: {
     uniqueKey: String,
-    title: String
-  }
-}
+    title: String,
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/FilterTile.vue

@@ -22,32 +22,32 @@
 
 export default {
   name: 'FilterTile',
-  data () {
+  data() {
     return {
-      input: ''
-    }
+      input: '',
+    };
   },
   methods: {
-    userIsTypingSomething () {
-      this.$emit('user-is-searchin', this.input)
+    userIsTypingSomething() {
+      this.$emit('user-is-searchin', this.input);
     },
-    clearFilterInput () {
-      this.input = ''
-      this.userIsTypingSomething()
-      document.activeElement.blur()
+    clearFilterInput() {
+      this.input = '';
+      this.userIsTypingSomething();
+      document.activeElement.blur();
     },
   },
-  mounted: function() {
-      window.addEventListener('keyup', (event) => {
-        const key = event.key
-        if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
-          this.input += key
-          this.$refs.filter.focus()
-          this.userIsTypingSomething()
-        }
-      });
-    }
-}
+  mounted() {
+    window.addEventListener('keyup', (event) => {
+      const { key } = event;
+      if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+        this.input += key;
+        this.$refs.filter.focus();
+        this.userIsTypingSomething();
+      }
+    });
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -63,7 +63,8 @@ export default {
     background: #282a32;
     label {
         display: inline;
-        background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
+        background: -webkit-gradient(
+          linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
         background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;

src/components/Footer.vue

@@ -17,9 +17,9 @@ export default {
     licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
     date: { type: String, default: `${new Date().getFullYear()}` },
     showCopyright: { type: Boolean, default: true },
-    repoUrl: { type: String, default: 'https://github.com/lissy93/panel' }
-  }
-}
+    repoUrl: { type: String, default: 'https://github.com/lissy93/panel' },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/Header.vue

@@ -6,15 +6,16 @@
 </template>
 
 <script>
-import PageTitle from '@/components/PageTitle.vue'
-import Nav from '@/components/Nav.vue'
+import PageTitle from '@/components/PageTitle.vue';
+import Nav from '@/components/Nav.vue';
+
 export default {
   name: 'Header',
   components: {
     PageTitle,
-    Nav
-  }
-}
+    Nav,
+  },
+};
 </script>
 
 <style scoped lang="scss">

src/components/HelloWorld.vue

@@ -9,9 +9,9 @@
 export default {
   name: 'HelloWorld',
   props: {
-    msg: String
-  }
-}
+    msg: String,
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/Item.vue

@@ -29,27 +29,25 @@ export default {
     openingMethod: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
       type: String,
       default: 'newtab',
-      validator: (value) =>
-        ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1
-    }
+      validator: (value) => ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1,
+    },
   },
-  data () {
-    return { getId: this.id }
+  data() {
+    return { getId: this.id };
   },
-  mounted () {
+  mounted() {
     // Detects overflowing text, and allows is to marguee on hover
     // The below code is horifically bad, it is embarassing that I wrote it...
-    const tileElem = document.getElementById(`tile-${this.getId}`)
+    const tileElem = document.getElementById(`tile-${this.getId}`);
     if (tileElem) {
-      const isOverflowing =
-            tileElem.scrollHeight > tileElem.clientHeight ||
-            tileElem.scrollWidth > tileElem.clientWidth
+      const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
+            || tileElem.scrollWidth > tileElem.clientWidth;
       if (isOverflowing) {
-        tileElem.className += ' is-overflowing'
+        tileElem.className += ' is-overflowing';
       }
     }
-  }
-}
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/ItemGroup.vue

@@ -17,21 +17,21 @@
 </template>
 
 <script>
-import Item from '@/components/Item.vue'
-import Collapsable from '@/components/Collapsable.vue'
+import Item from '@/components/Item.vue';
+import Collapsable from '@/components/Collapsable.vue';
 
 export default {
   name: 'ItemGroup',
   props: {
     groupId: String,
     title: String,
-    items: Array
+    items: Array,
   },
   components: {
     Collapsable,
-    Item
-  }
-}
+    Item,
+  },
+};
 </script>
 
 <style scoped lang="scss">

src/components/Nav.vue

@@ -8,8 +8,8 @@
 
 <script>
 export default {
-  name: 'Nav'
-}
+  name: 'Nav',
+};
 </script>
 
 <style scoped lang="scss">

src/components/PageTitle.vue

@@ -7,8 +7,8 @@
 
 <script>
 export default {
-  name: 'PageTitle'
-}
+  name: 'PageTitle',
+};
 </script>
 
 <style scoped lang="scss">

src/main.js

@@ -1,14 +1,14 @@
-import Vue from 'vue'
-import Element from 'element-ui'
+import Vue from 'vue';
+import Element from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import App from './App.vue'
-import router from './router'
-import './registerServiceWorker'
+import App from './App.vue';
+import router from './router';
+import './registerServiceWorker';
 
-Vue.use(Element)
-Vue.config.productionTip = false
+Vue.use(Element);
+Vue.config.productionTip = false;
 
 new Vue({
   router,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount('#app');

src/registerServiceWorker.js

@@ -1,32 +1,32 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from 'register-service-worker';
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
+    ready() {
       console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
+        'App is being served from cache by a service worker.\n'
+        + 'For more details, visit https://goo.gl/AFskqB',
+      );
     },
-    registered () {
-      console.log('Service worker has been registered.')
+    registered() {
+      console.log('Service worker has been registered.');
     },
-    cached () {
-      console.log('Content has been cached for offline use.')
+    cached() {
+      console.log('Content has been cached for offline use.');
     },
-    updatefound () {
-      console.log('New content is downloading.')
+    updatefound() {
+      console.log('New content is downloading.');
     },
-    updated () {
-      console.log('New content is available; please refresh.')
+    updated() {
+      console.log('New content is available; please refresh.');
     },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
     },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    },
+  });
 }

src/router.js

@@ -1,15 +1,15 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/Home.vue';
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
     },
     {
       path: '/about',
@@ -17,7 +17,7 @@ export default new Router({
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-    }
-  ]
-})
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
+    },
+  ],
+});

src/views/Home.vue

@@ -17,47 +17,45 @@
 
 <script>
 
-import Header from '@/components/Header.vue'
-import FilterTile from '@/components/FilterTile.vue'
-import ItemGroup from '@/components/ItemGroup.vue'
-import * as linkData from './../data/item-data.json'
+import Header from '@/components/Header.vue';
+import FilterTile from '@/components/FilterTile.vue';
+import ItemGroup from '@/components/ItemGroup.vue';
+import * as linkData from '../data/item-data.json';
 
 export default {
   name: 'home',
   props: {
     title: { default: 'Panel', type: String },
-    subtitle: { default: 'All your server management tools in one place', type: String }
+    subtitle: { default: 'All your server management tools in one place', type: String },
   },
   components: {
     Header,
     FilterTile,
-    ItemGroup
-  },
-  data: () => {
-    return {
-      items: linkData.default,
-      searchTile: ''
-    }
+    ItemGroup,
   },
+  data: () => ({
+    items: linkData.default,
+    searchTile: '',
+  }),
   methods: {
-    searching (searchTile) {
-      this.searchTile = searchTile
+    searching(searchTile) {
+      this.searchTile = searchTile;
     },
-    getDomainFromUrl (url) {
-      var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
-      var domainPattern = url.match(urlPattern);
-      return domainPattern? domainPattern[1] : ''
+    getDomainFromUrl(url) {
+      const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
+      const domainPattern = url.match(urlPattern);
+      return domainPattern ? domainPattern[1] : '';
     },
-    filterTiles (allTiles) {
-      return allTiles.filter(tile => {
-        const searchTerm = this.searchTile.toLowerCase()
-        return tile.title.toLowerCase().includes(searchTerm) ||
-          tile.provider.toLowerCase().includes(searchTerm) ||
-          this.getDomainFromUrl(tile.url).includes(searchTerm)
-      })
-    }
-  }
-}
+    filterTiles(allTiles) {
+      return allTiles.filter((tile) => {
+        const searchTerm = this.searchTile.toLowerCase();
+        return tile.title.toLowerCase().includes(searchTerm)
+          || tile.provider.toLowerCase().includes(searchTerm)
+          || this.getDomainFromUrl(tile.url).includes(searchTerm);
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>