ESLint and Prettier introduced

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/recommended",
+    "plugin:prettier/recommended",
+    "prettier/vue",
+    "prettier"
+  ],
+  plugins: [
+    "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",
+    sourceType: "module"
+  }
+};

.gitignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = {};

App.vue

@@ -7,29 +7,32 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-const DefaultLayout = () => import(/* webpackChunkName: "vsf-layout-default" */ './layouts/Default')
-const EmptyLayout = () => import(/* webpackChunkName: "vsf-layout-empty" */ './layouts/Empty')
-const MinimalLayout = () => import(/* webpackChunkName: "vsf-layout-minimal" */ './layouts/Minimal')
+import { mapState } from "vuex";
+const DefaultLayout = () =>
+  import(/* webpackChunkName: "vsf-layout-default" */ "./layouts/Default");
+const EmptyLayout = () =>
+  import(/* webpackChunkName: "vsf-layout-empty" */ "./layouts/Empty");
+const MinimalLayout = () =>
+  import(/* webpackChunkName: "vsf-layout-minimal" */ "./layouts/Minimal");
 
 export default {
-  data () {
+  components: {
+    DefaultLayout,
+    EmptyLayout,
+    MinimalLayout
+  },
+  data() {
     return {
       ordersData: []
-    }
+    };
   },
   computed: {
     ...mapState({
       overlayActive: state => state.ui.overlay
     }),
-    layout () {
-      return `${(this.$route.meta.layout || 'default')}-layout`
+    layout() {
+      return `${this.$route.meta.layout || "default"}-layout`;
     }
-  },
-  components: {
-    DefaultLayout,
-    EmptyLayout,
-    MinimalLayout
   }
-}
+};
 </script>

README.md

@@ -55,6 +55,6 @@
 
 * Install `lerna` globally: `npm install -g lerna`
 * Configure `vsf-capybara` repo as a git submodule in theme path of your `vue-storefront` workspace and track `master` branch: `git submodule add -b master https://github.com/DivanteLtd/vsf-capybara src/themes/capybara`
-* Fetch all the data: `git submodule update --init`
+* Fetch all the data: `git submodule update --init --remote`
 * Update `theme` property in your local configuration in `config/local.json` file: `"@vue-storefront/theme-capybara"`
 * Download all dependencies and start dev server: `lerna bootstrap && yarn && yarn dev`

components/core/AddToCart.vue

@@ -1,15 +1,19 @@
 <template>
-  <button-full @click.native="addToCart(product)" :disabled="isProductDisabled" data-testid="addToCart">
-    {{ $t('Add to cart') }}
+  <button-full
+    :disabled="isProductDisabled"
+    data-testid="addToCart"
+    @click.native="addToCart(product)"
+  >
+    {{ $t("Add to cart") }}
   </button-full>
 </template>
 
 <script>
-import { formatProductMessages } from '@vue-storefront/core/filters/product-messages'
-import { notifications } from '@vue-storefront/core/modules/cart/helpers'
-import focusClean from 'theme/components/theme/directives/focusClean'
-import ButtonFull from 'theme/components/theme/ButtonFull.vue'
-import { mapGetters } from 'vuex'
+import { formatProductMessages } from "@vue-storefront/core/filters/product-messages";
+import { notifications } from "@vue-storefront/core/modules/cart/helpers";
+import focusClean from "theme/components/theme/directives/focusClean";
+import ButtonFull from "theme/components/theme/ButtonFull.vue";
+import { mapGetters } from "vuex";
 
 export default {
   directives: { focusClean },
@@ -24,37 +28,47 @@ export default {
       default: false
     }
   },
+  computed: {
+    ...mapGetters({
+      isAddingToCart: "cart/getIsAdding"
+    }),
+    isProductDisabled() {
+      return (
+        this.disabled ||
+        formatProductMessages(this.product.errors) !== "" ||
+        this.isAddingToCart
+      );
+    }
+  },
+  beforeMount() {
+    this.$bus.$on("product-after-removevariant", this.onAfterRemovedVariant);
+  },
+  beforeDestroy() {
+    this.$bus.$off("product-after-removevariant");
+  },
   methods: {
-    onAfterRemovedVariant () {
-      this.$forceUpdate()
+    onAfterRemovedVariant() {
+      this.$forceUpdate();
     },
-    async addToCart (product) {
+    async addToCart(product) {
       try {
-        const diffLog = await this.$store.dispatch('cart/addItem', { productToAdd: product })
+        const diffLog = await this.$store.dispatch("cart/addItem", {
+          productToAdd: product
+        });
         diffLog.clientNotifications.forEach(notificationData => {
-          this.notifyUser(notificationData)
-        })
+          this.notifyUser(notificationData);
+        });
       } catch (message) {
-        this.notifyUser(notifications.createNotification({ type: 'error', message }))
+        this.notifyUser(
+          notifications.createNotification({ type: "error", message })
+        );
       }
     },
-    notifyUser (notificationData) {
-      this.$store.dispatch('notification/spawnNotification', notificationData, { root: true })
+    notifyUser(notificationData) {
+      this.$store.dispatch("notification/spawnNotification", notificationData, {
+        root: true
+      });
     }
-  },
-  computed: {
-    ...mapGetters({
-      isAddingToCart: 'cart/getIsAdding'
-    }),
-    isProductDisabled () {
-      return this.disabled || formatProductMessages(this.product.errors) !== '' || this.isAddingToCart
-    }
-  },
-  beforeMount () {
-    this.$bus.$on('product-after-removevariant', this.onAfterRemovedVariant)
-  },
-  beforeDestroy () {
-    this.$bus.$off('product-after-removevariant')
   }
-}
+};
 </script>

components/core/BackToTop.vue

@@ -1,9 +1,9 @@
 <template>
   <transition name="back-to-top-fade">
     <div
-      class="vue-back-to-top"
-      :style="{bottom: bottom, right: right} "
       v-show="visible"
+      class="vue-back-to-top"
+      :style="{ bottom: bottom, right: right }"
       @click="backToTop"
     >
       <slot>
@@ -19,11 +19,11 @@
 
 <script>
 export default {
-  name: 'BackToTop',
+  name: "BackToTop",
   props: {
     text: {
       type: String,
-      default: 'Back to top'
+      default: "Back to top"
     },
     visibleoffset: {
       type: [String, Number],
@@ -35,91 +35,97 @@ export default {
     },
     right: {
       type: String,
-      default: '30px'
+      default: "30px"
     },
     bottom: {
       type: String,
-      default: '40px'
+      default: "40px"
     },
     scrollFn: {
       type: Function,
-      default: function (eventObject) {}
+      default: function() {}
     }
   },
-  data () {
+  data() {
     return {
       visible: false
-    }
+    };
   },
-  mounted () {
+  mounted() {
     window.smoothscroll = () => {
-      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
+      let currentScroll =
+        document.documentElement.scrollTop || document.body.scrollTop;
       if (currentScroll > 0) {
-        window.requestAnimationFrame(window.smoothscroll)
-        window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
+        window.requestAnimationFrame(window.smoothscroll);
+        window.scrollTo(0, Math.floor(currentScroll - currentScroll / 5));
       }
-    }
-    window.addEventListener('scroll', this.catchScroll)
+    };
+    window.addEventListener("scroll", this.catchScroll);
   },
-  destroyed () {
-    window.removeEventListener('scroll', this.catchScroll)
+  destroyed() {
+    window.removeEventListener("scroll", this.catchScroll);
   },
   methods: {
     /**
-      * Catch window scroll event
-      * @return {void}
-      */
-    catchScroll () {
-      const pastTopOffset = window.pageYOffset > parseInt(this.visibleoffset)
-      const pastBottomOffset = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - parseInt(this.visibleoffsetbottom)
-      this.visible = parseInt(this.visibleoffsetbottom) > 0 ? pastTopOffset && !pastBottomOffset : pastTopOffset
-      this.scrollFn(this)
+     * Catch window scroll event
+     * @return {void}
+     */
+    catchScroll() {
+      const pastTopOffset = window.pageYOffset > parseInt(this.visibleoffset);
+      const pastBottomOffset =
+        window.innerHeight + window.pageYOffset >=
+        document.body.offsetHeight - parseInt(this.visibleoffsetbottom);
+      this.visible =
+        parseInt(this.visibleoffsetbottom) > 0
+          ? pastTopOffset && !pastBottomOffset
+          : pastTopOffset;
+      this.scrollFn(this);
     },
     /**
-      * The function who make the magics
-      * @return {void}
-      */
-    backToTop () {
-      window.smoothscroll()
-      this.$emit('scrolled')
+     * The function who make the magics
+     * @return {void}
+     */
+    backToTop() {
+      window.smoothscroll();
+      this.$emit("scrolled");
     }
   }
-}
+};
 </script>
 <style>
-  .back-to-top-fade-enter-active,
-  .back-to-top-fade-leave-active {
-    transition: opacity .7s;
-  }
+.back-to-top-fade-enter-active,
+.back-to-top-fade-leave-active {
+  transition: opacity 0.7s;
+}
 
-  .back-to-top-fade-enter,
-  .back-to-top-fade-leave-to {
-    opacity: 0;
-  }
+.back-to-top-fade-enter,
+.back-to-top-fade-leave-to {
+  opacity: 0;
+}
 
-  .vue-back-to-top {
-    cursor:pointer;
-    position: fixed;
-    z-index: 1000;
-  }
+.vue-back-to-top {
+  cursor: pointer;
+  position: fixed;
+  z-index: 1000;
+}
 
-  .vue-back-to-top .default {
-    background-color: #f5c85c;
-    border-radius: 3px;
-    color: #ffffff;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    width: 160px;
-  }
+.vue-back-to-top .default {
+  background-color: #f5c85c;
+  border-radius: 3px;
+  color: #ffffff;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  width: 160px;
+}
 
-  .vue-back-to-top .default span{
-    color:#ffffff;
-  }
+.vue-back-to-top .default span {
+  color: #ffffff;
+}
 
-  .vue-back-to-top--is-footer {
-    bottom: 50% !important;
-    position: absolute;
-    transform: translateY(50%);
-  }
+.vue-back-to-top--is-footer {
+  bottom: 50% !important;
+  position: absolute;
+  transform: translateY(50%);
+}
 </style>

components/core/Breadcrumbs.vue

@@ -3,7 +3,8 @@
     <span v-for="link in paths" :key="link.route_link">
       <router-link :to="link.route_link">
         {{ link.name | htmlDecode }}
-      </router-link> /
+      </router-link>
+      /
     </span>
     <span class="cl-mine-shaft">
       {{ current | htmlDecode }}
@@ -12,9 +13,9 @@
 </template>
 
 <script>
-import { Breadcrumbs } from '@vue-storefront/core/modules/breadcrumbs/components/Breadcrumbs.ts'
+import { Breadcrumbs } from "@vue-storefront/core/modules/breadcrumbs/components/Breadcrumbs.ts";
 
 export default {
   mixins: [Breadcrumbs]
-}
+};
 </script>