Enable sane eslint defaults and fix issues

Author: Flowm

.eslintrc.json

@@ -1,24 +1,34 @@
 {
   "env": {
     "browser": true,
-    "commonjs": true,
     "es6": true,
     "serviceworker": true
   },
   "extends": [
+    "airbnb-base",
     "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
     "plugin:vue/recommended"
   ],
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "rules": {
-    "indent": ["error", 2],
-    "linebreak-style": ["error", "unix"],
+    "class-methods-use-this": "off",
     "no-console": "off",
-    "quotes": ["error", "double"],
-    "semi": ["error", "always"],
+    "no-param-reassign": ["error", { "props": false }],
+    "object-curly-newline": "off",
+    "operator-linebreak": ["error", "after"],
+    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
+    "max-len": ["error", 170, 2, {
+      "ignoreUrls": true,
+      "ignoreComments": false,
+      "ignoreRegExpLiterals": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true
+    }],
     "vue/no-unused-components": "off",
     "vue/component-name-in-template-casing": ["error", "kebab-case"],
     "vue/max-attributes-per-line": [2, {
@@ -36,6 +46,15 @@
       },
       "svg": "always",
       "math": "always"
-    }]
+    }],
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack/webpack.config.js"
+      }
+    }
   }
 }

package.json

@@ -48,7 +48,9 @@
     "cssnano": "^4.1.10",
     "cypress": "^6.2.1",
     "eslint": "^7.17.0",
-    "eslint-plugin-ava": "^11.0.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.4.1",
     "esm": "^3.2.25",
     "html-webpack-plugin": "^5.0.0-beta.4",
@@ -65,7 +67,7 @@
     "url-loader": "^4.1.1",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.12.2",
+    "webpack": "^5.12.3",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.11.1",

src/App.vue

@@ -9,13 +9,14 @@
 import { library, dom } from "@fortawesome/fontawesome-svg-core";
 import { faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faRedo, faInfo, faBell } from "@fortawesome/free-solid-svg-icons";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-library.add(faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faRedo, faInfo, faBell, faGithub);
-dom.watch();
 
 import "buefy/dist/buefy.css";
 import "Cesium/Widgets/widgets.css";
 import "./css/main.css";
 
+library.add(faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faRedo, faInfo, faBell, faGithub);
+dom.watch();
+
 export default {
 };
 </script>

src/app.js

@@ -1,8 +1,8 @@
 import Vue from "vue";
-import App from "./App.vue";
-import router from "./components/Router";
 import { Workbox } from "workbox-window";
 import * as Sentry from "@sentry/browser";
+import App from "./App.vue";
+import router from "./components/Router";
 
 if (window.location.href.includes("satvis.space")) {
   Sentry.init({ dsn: "https://0c7d1a82eedb48ee8b83d87bf09ad144@sentry.io/1541793" });
@@ -21,7 +21,7 @@ const app = new Vue({
 window.app = app;
 
 /* global cc */
-//cc.sats.addFromTleUrl("data/tle/norad/active.txt", ["Active"]);
+// cc.sats.addFromTleUrl("data/tle/norad/active.txt", ["Active"]);
 cc.sats.addFromTleUrl("data/tle/norad/planet.txt", ["Planet"]);
 cc.sats.addFromTleUrl("data/tle/norad/starlink.txt", ["Starlink"]);
 cc.sats.addFromTleUrl("data/tle/norad/globalstar.txt", ["Globalstar"]);

src/components/Cesium.vue

@@ -229,8 +229,9 @@ import Tooltip from "buefy";
 import SatelliteSelect from "./SatelliteSelect.vue";
 import SatelliteMultiSelect from "./SatelliteMultiSelect.vue";
 import SatelliteNotifyMultiSelect from "./SatelliteNotifyMultiSelect.vue";
-import VueCesiumController from "./VueCesiumController.js";
+import VueCesiumController from "./VueCesiumController";
 import { DeviceDetect } from "../modules/util/DeviceDetect";
+
 Vue.use(Tooltip);
 Vue.use(VueCesiumController); /* global cc */
 
@@ -261,33 +262,33 @@ export default {
     };
   },
   watch: {
-    imageryProvider: function(newProvider) {
+    imageryProvider(newProvider) {
       cc.imageryProvider = newProvider;
-      if (this.$route.query.layers != newProvider) {
-        this.$router.push({query: {...this.$route.query, layers: newProvider}});
+      if (this.$route.query.layers !== newProvider) {
+        this.$router.push({ query: { ...this.$route.query, layers: newProvider } });
       }
     },
-    terrainProvider: function(newProvider) {
+    terrainProvider(newProvider) {
       cc.terrainProvider = newProvider;
-      if (this.$route.query.terrain != newProvider) {
-        this.$router.push({query: {...this.$route.query, terrain: newProvider}});
+      if (this.$route.query.terrain !== newProvider) {
+        this.$router.push({ query: { ...this.$route.query, terrain: newProvider } });
       }
     },
-    sceneMode: function(newMode) {
+    sceneMode(newMode) {
       cc.sceneMode = newMode;
     },
-    cameraMode: function(newMode) {
+    cameraMode(newMode) {
       cc.cameraMode = newMode;
     },
-    enabledComponents: function(newComponents, oldComponents) {
-      let add = newComponents.filter(x => !oldComponents.includes(x));
-      for (let component of add) {
+    enabledComponents(newComponents, oldComponents) {
+      const add = newComponents.filter((x) => !oldComponents.includes(x));
+      add.forEach((component) => {
         cc.sats.enableComponent(component);
-      }
-      let del = oldComponents.filter(x => !newComponents.includes(x));
-      for (let component of del) {
+      });
+      const del = oldComponents.filter((x) => !newComponents.includes(x));
+      del.forEach((component) => {
         cc.sats.disableComponent(component);
-      }
+      });
     },
   },
   mounted() {
@@ -300,12 +301,12 @@ export default {
     if (this.$route.query.layers) {
       const layers = this.$route.query.layers.split(",");
       if (layers.length === 1) {
-        this.imageryProvider = layers[0];
+        [this.imageryProvider] = layers;
       } else {
         cc.clearImageryLayers();
-        layers.forEach(layer => {
+        layers.forEach((layer) => {
           const provider = layer.split("_");
-          if (provider.length == 1) {
+          if (provider.length === 1) {
             cc.addImageryLayer(provider[0]);
           } else {
             cc.addImageryLayer(provider[0], provider[1]);
@@ -334,23 +335,25 @@ export default {
     this.$root.$off("updateCat", this.updateCat);
   },
   methods: {
-    toggleMenu: function(name) {
+    toggleMenu(name) {
       const oldState = this.menu[name];
-      Object.keys(this.menu).forEach(k => this.menu[k] = false);
+      Object.keys(this.menu).forEach((k) => {
+        this.menu[k] = false;
+      });
       this.menu[name] = !oldState;
 
       if (this.menu.cat) {
         // Update multiselect data when it is displayed
         this.updateCat();
       }
     },
-    toggleUI: function() {
+    toggleUI() {
       this.showUI = !this.showUI;
       if (!cc.minimalUI) {
         cc.showUI = this.showUI;
       }
     },
-    updateCat: function() {
+    updateCat() {
       this.$refs.SatelliteSelect.update();
       this.$refs.SatelliteMultiSelect.update();
       this.$refs.SatelliteNotifyMultiSelect.update();

src/components/Router.js

@@ -7,8 +7,8 @@ Vue.use(Router);
 export default new Router({
   mode: "history",
   routes: [
-    { path: "/", component: Cesium, },
-    { path: "/move.html", component: Cesium, },
-    { path: "/ot.html", component: Cesium, },
-  ]
+    { path: "/", component: Cesium },
+    { path: "/move.html", component: Cesium },
+    { path: "/ot.html", component: Cesium },
+  ],
 });

src/components/SatelliteMultiSelect.vue

@@ -50,19 +50,19 @@ export default {
     };
   },
   watch: {
-    values: function(newSats, oldSats) {
-      if (newSats.every(e => oldSats.includes(e)) && oldSats.every(e => newSats.includes(e))) {
+    values(newSats, oldSats) {
+      if (newSats.every((e) => oldSats.includes(e)) && oldSats.every((e) => newSats.includes(e))) {
         return;
       }
       cc.sats.enabledSatellitesByName = newSats;
-    }
+    },
   },
   methods: {
-    update: function() {
+    update() {
       this.data = cc.sats.satlist;
       this.values = cc.sats.enabledSatellitesByName;
     },
-  }
+  },
 };
 </script>
 

src/components/SatelliteNotifyMultiSelect.vue

@@ -33,7 +33,7 @@ export default {
   },
   data() {
     return {
-      btnLabel: values => `Monitored satellites (${values.length})`,
+      btnLabel: (values) => `Monitored satellites (${values.length})`,
       values: [],
       data: cc.sats.satlist,
       filters: [{
@@ -50,18 +50,18 @@ export default {
     };
   },
   watch: {
-    values: function(newSats, oldSats) {
-      if (newSats.every(e => oldSats.includes(e)) && oldSats.every(e => newSats.includes(e))) {
+    values(newSats, oldSats) {
+      if (newSats.every((e) => oldSats.includes(e)) && oldSats.every((e) => newSats.includes(e))) {
         return;
       }
       cc.sats.monitoredSatellites = newSats;
-    }
+    },
   },
   methods: {
-    update: function() {
+    update() {
       this.data = cc.sats.satlist;
       this.values = cc.sats.monitoredSatellites;
     },
-  }
+  },
 };
 </script>

src/components/SatelliteSelect.vue

@@ -32,7 +32,7 @@ export default {
   },
   data() {
     return {
-      btnLabel: values => values.length > 0 ? values[0] : "Select...",
+      btnLabel: (values) => (values.length > 0 ? values[0] : "Select..."),
       values: [],
       data: cc.sats.satlist,
       options: {
@@ -41,41 +41,41 @@ export default {
     };
   },
   watch: {
-    values: function(newSat, oldSat) {
-      if (newSat.every(e => oldSat.includes(e)) && oldSat.every(e => newSat.includes(e))) {
+    values(newSat, oldSat) {
+      if (newSat.every((e) => oldSat.includes(e)) && oldSat.every((e) => newSat.includes(e))) {
         return;
       }
       if (newSat.length === 1) {
-        cc.sats.trackedSatellite = newSat[0];
-        if (this.$route.query.sat != newSat[0]) {
-          this.$router.push({query: {...this.$route.query, sat: newSat[0]}});
+        [cc.sats.trackedSatellite] = newSat;
+        if (this.$route.query.sat !== newSat[0]) {
+          this.$router.push({ query: { ...this.$route.query, sat: newSat[0] } });
         }
       } else if (oldSat.length === 1) {
         cc.sats.trackedSatellite = "";
-        let query = Object.assign({}, this.$route.query);
+        const query = { ...this.$route.query };
         delete query.sat;
-        this.$router.replace({query});
+        this.$router.replace({ query });
       }
-    }
+    },
   },
   mounted() {
     if (this.$route.query.sat) {
       cc.sats.trackedSatellite = this.$route.query.sat;
     }
     this.$root.$on("updateTracked", this.update);
   },
-  beforeDestroy () {
+  beforeDestroy() {
     this.$root.$off("updateTracked", this.update);
   },
   methods: {
-    update: function() {
+    update() {
       this.data = cc.sats.satlist;
       if (cc.sats.trackedSatellite) {
         this.values = [cc.sats.trackedSatellite];
       } else {
         this.values = [];
       }
     },
-  }
+  },
 };
 </script>

src/components/VueCesiumController.js

@@ -3,6 +3,6 @@ import { CesiumController } from "../modules/CesiumController";
 const VueCesiumController = {
   install(Vue) {
     Vue.prototype.cc = new CesiumController();
-  }
+  },
 };
 export default VueCesiumController;