Format code with Prettier

Author: soal

.eslintrc.js

@@ -3,15 +3,12 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
+  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'
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: "babel-eslint"
   }
-}
+};

docs_source/guide/layers&sources.md

@@ -50,4 +50,10 @@ Sources are stored in Mapbox GL JS `Map` object by `sourceId`. If you sure that
 
 By default when Layer components destroing, it removes source from map. If you want to keep source in Map (for e.g. for future using or if other layers use this source), set `clearSource` prop to `false`.
 
+## Layer getters
+
+GeoJSON and Vector layers has getters for they features.
+
 ## Layer methods
+
+Layer components has methods `move()`

docs_source/guide/markers&popups.md

@@ -92,7 +92,7 @@ The Popup component is wrapper around the [Mapbox GL Popup API](https://www.mapb
 You can specify content inside popup in default slot. It can be HTML or Vue component.
 In this example [Vuetify card component](https://vuetifyjs.com/en/components/cards) used as a content for popup:
 
-```vue
+```vue{2}
 <template>
   <MglMap
     :accessToken="mapboxAccessToken"

package-lock.json

@@ -20,6 +20,17 @@
     "docs:serve": "vuepress dev docs_source",
     "docs:build": "vuepress build docs_source"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "dependencies": {
     "map-promisified": "latest"
   },
@@ -31,10 +42,13 @@
     "@vue/cli-plugin-babel": "^3.2.0",
     "@vue/cli-plugin-eslint": "^3.2.1",
     "@vue/cli-service": "^3.2.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",
     "eslint-loader": "2.1.1",
+    "husky": "^1.2.0",
+    "lint-staged": "^8.1.0",
     "vue": "^2.5.18",
     "vue-template-compiler": "^2.5.18",
     "vuepress": "^1.0.0-alpha.27"

package.json

@@ -1,25 +1,25 @@
 <template>
   <div style="display: none">
     <!-- slot for custom marker -->
-    <slot name="marker"/>
+    <slot name="marker" />
     <!-- slot for popup -->
     <slot />
   </div>
 </template>
 
 <script>
-import withRegistration from '../../lib/withRegistration'
-import withEvents from '../../lib/withEvents'
-import withSelfEvents from './withSelfEvents'
+import withRegistration from "../../lib/withRegistration";
+import withEvents from "../../lib/withEvents";
+import withSelfEvents from "./withSelfEvents";
 
 const markerEvents = {
-  drag: 'drag',
-  dragstart: 'dragstart',
-  dragend: 'dragend'
-}
+  drag: "drag",
+  dragstart: "dragstart",
+  dragend: "dragend"
+};
 
 export default {
-  name: 'MapMarker',
+  name: "MapMarker",
   mixins: [withRegistration, withEvents, withSelfEvents],
   props: {
     // mapbox marker options
@@ -36,95 +36,96 @@ export default {
     },
     anchor: {
       type: String,
-      default: 'center'
+      default: "center"
     },
     draggable: {
       type: Boolean,
       default: false
     }
   },
 
-  data () {
+  data() {
     return {
       initial: true,
       marker: undefined
-    }
+    };
   },
 
   watch: {
-    coordinates (lngLat) {
-      if (this.initial) return
-      this.marker.setLngLat(lngLat)
+    coordinates(lngLat) {
+      if (this.initial) return;
+      this.marker.setLngLat(lngLat);
     },
-    draggable (next, prev) {
-      if (this.initial) return
-      this.marker.setDraggable(next)
+    draggable(next, prev) {
+      if (this.initial) return;
+      this.marker.setDraggable(next);
     }
   },
 
-  mounted () {
-    this.$_checkMapTree()
+  mounted() {
+    this.$_checkMapTree();
   },
 
-  beforeDestroy () {
+  beforeDestroy() {
     if (this.map !== undefined && this.marker !== undefined) {
-      this.marker.remove()
+      this.marker.remove();
     }
   },
 
   methods: {
-    $_deferredMount (payload) {
+    $_deferredMount(payload) {
       if (!this.marker) {
         const markerOptions = {
           ...this._props
-        }
+        };
         if (this.$slots.marker) {
-          markerOptions.element = this.$slots.marker[0].elm
+          markerOptions.element = this.$slots.marker[0].elm;
         }
-        this.marker = new this.mapbox.Marker(markerOptions)
+        this.marker = new this.mapbox.Marker(markerOptions);
       }
 
-      this.map = payload.map
-      this.$_addMarker()
-      if (this.$listeners['update:coordinates']) {
-        this.marker.on('dragend', event => {
-          let newCoordinates
+      this.map = payload.map;
+      this.$_addMarker();
+      if (this.$listeners["update:coordinates"]) {
+        this.marker.on("dragend", event => {
+          let newCoordinates;
           if (this.coordinates instanceof Array) {
-            newCoordinates = [event.target._lngLat.lng, event.target._lngLat.lat]
+            newCoordinates = [
+              event.target._lngLat.lng,
+              event.target._lngLat.lat
+            ];
           } else {
-            newCoordinates = event.target._lngLat
+            newCoordinates = event.target._lngLat;
           }
-          this.$emit('update:coordinates', newCoordinates)
-        })
+          this.$emit("update:coordinates", newCoordinates);
+        });
       }
 
-      const eventNames = Object.keys(markerEvents)
-      this.$_bindSelfEvents(eventNames, this.marker)
+      const eventNames = Object.keys(markerEvents);
+      this.$_bindSelfEvents(eventNames, this.marker);
 
-      this.initial = false
-      payload.component.$off('load', this.$_deferredMount)
+      this.initial = false;
+      payload.component.$off("load", this.$_deferredMount);
     },
 
-    $_addMarker () {
-      this.marker
-        .setLngLat(this.coordinates)
-        .addTo(this.map)
+    $_addMarker() {
+      this.marker.setLngLat(this.coordinates).addTo(this.map);
 
-      this.$_emitEvent('added', { marker: this.marker })
+      this.$_emitEvent("added", { marker: this.marker });
     },
 
-    $_emitSelfEvent (event) {
-      this.$_emitMapEvent(event, { marker: this.marker })
+    $_emitSelfEvent(event) {
+      this.$_emitMapEvent(event, { marker: this.marker });
     },
 
-    remove () {
-      this.marker.remove()
-      this.$_emitEvent('removed', { marker: this.marker })
+    remove() {
+      this.marker.remove();
+      this.$_emitEvent("removed", { marker: this.marker });
     },
 
-    togglePopup () {
-      return this.marker.togglePopup()
+    togglePopup() {
+      return this.marker.togglePopup();
     }
   }
-}
+};
 </script>