Merge pull request #98 from haiafara/eslint

Add ESLint (with recommended and Vue rules)
haiafara · May 28, 2019 · 14e84a3 · 14e84a3
2 parents a6ccafa + ce0c1ce
commit 14e84a3
Show file tree

Hide file tree

Showing 4 changed files with 724 additions and 102 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  'env': {
+    'browser': true,
+    'es6': true
+  },
+  'extends': [
+    'eslint:recommended',
+    'plugin:vue/recommended'
+  ],
+  'globals': {
+    'Atomics': 'readonly',
+    'SharedArrayBuffer': 'readonly'
+  },
+  'parserOptions': {
+    'ecmaVersion': 2018,
+    'sourceType': 'module'
+  },
+  'plugins': [
+    'vue'
+  ],
+  'rules': {
+  }
+}
diff --git a/app/javascript/Map.vue b/app/javascript/Map.vue
@@ -1,99 +1,99 @@
 <template>
-  <div id="map"></div>
+  <div id="map" />
 </template>
 
 <script>
-  import { eventBus } from "packs/haiafara";
-  import L from "leaflet";
-  import "leaflet/dist/leaflet.css";
-  import LF from "leaflet.fullscreen";
-  import "leaflet.fullscreen/Control.FullScreen.css";
+import { eventBus } from 'packs/haiafara'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.fullscreen'
+import 'leaflet.fullscreen/Control.FullScreen.css'
 
-  export default {
-    data() {
-      return {
-        map: null,
-        geoJSONLayer: null
-      }
-    },
-    created() {
-      eventBus.$on("mapInvalidateSize", () => {
-        this.map.invalidateSize(true);
-      })
-      eventBus.$on("mapSetView", (coordinates, zoom) => {
-        this.map.setView(coordinates, zoom);
-      })
-      eventBus.$on("mapFitBounds", (bounds) => {
-        this.map.fitBounds(bounds);
-      })
-      eventBus.$on("mapAddGeoJSON", (type, id, name, geometry) => {
-        this.geoJSONLayer.addData({ type: "Feature", properties: { name, type }, id, geometry });
-      })
-      eventBus.$on("mapClearGeoJSONLayer", () => {
-        this.geoJSONLayer.clearLayers();
-      })
-    },
-    mounted() {
-      var CustomControl = L.Control.extend({
-        options: {
-          position: "topright"
-        },
-        onAdd(map) {
-          var container = L.DomUtil.create("div", "leaflet-bar leaflet-control leaflet-control-custom");
-
-          container.style.backgroundColor = "white";
-          container.style.width = "40px";
-          container.style.height = "30px";
-          container.style.padding = "5px";
-          container.style.cursor = "pointer";
-          container.style.textAlign = "center";
-          container.innerHTML = "Info";
+export default {
+  data () {
+    return {
+      map: null,
+      geoJSONLayer: null
+    }
+  },
+  created () {
+    eventBus.$on('mapInvalidateSize', () => {
+      this.map.invalidateSize(true)
+    })
+    eventBus.$on('mapSetView', (coordinates, zoom) => {
+      this.map.setView(coordinates, zoom)
+    })
+    eventBus.$on('mapFitBounds', (bounds) => {
+      this.map.fitBounds(bounds)
+    })
+    eventBus.$on('mapAddGeoJSON', (type, id, name, geometry) => {
+      this.geoJSONLayer.addData({ type: 'Feature', properties: { name, type }, id, geometry })
+    })
+    eventBus.$on('mapClearGeoJSONLayer', () => {
+      this.geoJSONLayer.clearLayers()
+    })
+  },
+  mounted () {
+    var CustomControl = L.Control.extend({
+      options: {
+        position: 'topright'
+      },
+      onAdd () {
+        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom')
 
-          container.onclick = function() {
-            eventBus.$emit("toggleInfoPanel");
-          };
+        container.style.backgroundColor = 'white'
+        container.style.width = '40px'
+        container.style.height = '30px'
+        container.style.padding = '5px'
+        container.style.cursor = 'pointer'
+        container.style.textAlign = 'center'
+        container.innerHTML = 'Info'
 
-          return container;
+        container.onclick = function () {
+          eventBus.$emit('toggleInfoPanel')
         }
-      });
-      this.map = L.map("map", { fullscreenControl: true, maxZoom: 20, trackResize: true });
-      var tileLayer = L.tileLayer("//tileserver.haiafara.ro/hot/{z}/{x}/{y}.png", {
-        attribution: "&copy; Contribuitori <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
-        maxZoom: 20
-      });
-      tileLayer.addTo(this.map);
-      this.map.addControl(new CustomControl());
 
-      this.geoJSONLayer = L.geoJSON(
-        undefined,
-        {
-          onEachFeature: (feature, layer) => {
-            layer.on({
-              click: () => {
-                this.$router.push({ name: feature.properties.type, params: { id: feature.id }});
-              }
-            });
-            layer.bindTooltip(feature.properties.name);
-          },
-          pointToLayer: (feature, latlng) => {
-            return L.marker(
-              latlng,
-              {
-                icon: new L.Icon(
-                  {
-                    iconSize: [25, 41],
-                    iconAnchor: [13, 41],
-                    popupAnchor: [1, -24],
-                    iconUrl: "/marker-icon-blue.png"
-                  }
-                )
-              }
-            );
-          }
+        return container
+      }
+    })
+    this.map = L.map('map', { fullscreenControl: true, maxZoom: 20, trackResize: true })
+    var tileLayer = L.tileLayer('//tileserver.haiafara.ro/hot/{z}/{x}/{y}.png', {
+      attribution: "&copy; Contribuitori <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
+      maxZoom: 20
+    })
+    tileLayer.addTo(this.map)
+    this.map.addControl(new CustomControl())
+
+    this.geoJSONLayer = L.geoJSON(
+      undefined,
+      {
+        onEachFeature: (feature, layer) => {
+          layer.on({
+            click: () => {
+              this.$router.push({ name: feature.properties.type, params: { id: feature.id } })
+            }
+          })
+          layer.bindTooltip(feature.properties.name)
+        },
+        pointToLayer: (feature, latlng) => {
+          return L.marker(
+            latlng,
+            {
+              icon: new L.Icon(
+                {
+                  iconSize: [25, 41],
+                  iconAnchor: [13, 41],
+                  popupAnchor: [1, -24],
+                  iconUrl: '/marker-icon-blue.png'
+                }
+              )
+            }
+          )
         }
-      ).addTo(this.map);
-    }
-  };
+      }
+    ).addTo(this.map)
+  }
+}
 </script>
 
 <style>

diff --git a/package.json b/package.json
@@ -17,6 +17,13 @@
     "webpack": "^4.30.0"
   },
   "devDependencies": {
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.2",
     "webpack-dev-server": "^3.4.1"
   }
 }