diff --git a/.eslintrc b/.eslintrc
index 6dbe269e594..d9161e97747 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,7 +16,8 @@
     "localStorage": false
   },
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "babel-eslint",
+    "ecmaVersion": 2017
   },
   "plugins": [
     "filenames",
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index b6a0ece7907..18edd8755c3 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -94,102 +94,104 @@ export default class ImageFile {
     });
     return [maxWidth, maxHeight];
   }
+  // eslint-disable-next-line class-methods-use-this
+  views() {
+    return {
+      'two-up': function() {
+        return $('.two-up.view .wrap', this.file).each((function(_this) {
+          return function(index, wrap) {
+            $('img', wrap).each(function() {
+              var currentWidth;
+              currentWidth = $(this).width();
+              if (currentWidth > availWidth / 2) {
+                return $(this).width(availWidth / 2);
+              }
+            });
+            return _this.requestImageInfo($('img', wrap), function(width, height) {
+              $('.image-info .meta-width', wrap).text(width + "px");
+              $('.image-info .meta-height', wrap).text(height + "px");
+              return $('.image-info', wrap).removeClass('hide');
+            });
+          };
+        })(this));
+      },
+      'swipe': function() {
+        var maxHeight, maxWidth;
+        maxWidth = 0;
+        maxHeight = 0;
+        return $('.swipe.view', this.file).each((function(_this) {
+          return function(index, view) {
+            var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
+            ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+            $swipeFrame = $('.swipe-frame', view);
+            $swipeWrap = $('.swipe-wrap', view);
+            $swipeBar = $('.swipe-bar', view);
 
-  views = {
-    'two-up': function() {
-      return $('.two-up.view .wrap', this.file).each((function(_this) {
-        return function(index, wrap) {
-          $('img', wrap).each(function() {
-            var currentWidth;
-            currentWidth = $(this).width();
-            if (currentWidth > availWidth / 2) {
-              return $(this).width(availWidth / 2);
-            }
-          });
-          return _this.requestImageInfo($('img', wrap), function(width, height) {
-            $('.image-info .meta-width', wrap).text(width + "px");
-            $('.image-info .meta-height', wrap).text(height + "px");
-            return $('.image-info', wrap).removeClass('hide');
-          });
-        };
-      })(this));
-    },
-    'swipe': function() {
-      var maxHeight, maxWidth;
-      maxWidth = 0;
-      maxHeight = 0;
-      return $('.swipe.view', this.file).each((function(_this) {
-        return function(index, view) {
-          var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-          $swipeFrame = $('.swipe-frame', view);
-          $swipeWrap = $('.swipe-wrap', view);
-          $swipeBar = $('.swipe-bar', view);
+            $swipeFrame.css({
+              width: maxWidth + 16,
+              height: maxHeight + 28
+            });
+            $swipeWrap.css({
+              width: maxWidth + 1,
+              height: maxHeight + 2
+            });
+            // Set swipeBar left position to match image frame
+            $swipeBar.css({
+              left: 1
+            });
 
-          $swipeFrame.css({
-            width: maxWidth + 16,
-            height: maxHeight + 28
-          });
-          $swipeWrap.css({
-            width: maxWidth + 1,
-            height: maxHeight + 2
-          });
-          // Set swipeBar left position to match image frame
-          $swipeBar.css({
-            left: 1
-          });
+            wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
 
-          wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
+            _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
+              if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
+                $swipeWrap.width((maxWidth + 1) - left);
+                $swipeBar.css('left', left);
+              }
+            });
+          };
+        })(this));
+      },
+      'onion-skin': function() {
+        var dragTrackWidth, maxHeight, maxWidth;
+        maxWidth = 0;
+        maxHeight = 0;
+        dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
+        return $('.onion-skin.view', this.file).each((function(_this) {
+          return function(index, view) {
+            var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
+            ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+            $frame = $('.onion-skin-frame', view);
+            $frameAdded = $('.frame.added', view);
+            $track = $('.drag-track', view);
+            $dragger = $('.dragger', $track);
 
-          _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
-            if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
-              $swipeWrap.width((maxWidth + 1) - left);
-              $swipeBar.css('left', left);
-            }
-          });
-        };
-      })(this));
-    },
-    'onion-skin': function() {
-      var dragTrackWidth, maxHeight, maxWidth;
-      maxWidth = 0;
-      maxHeight = 0;
-      dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
-      return $('.onion-skin.view', this.file).each((function(_this) {
-        return function(index, view) {
-          var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-          $frame = $('.onion-skin-frame', view);
-          $frameAdded = $('.frame.added', view);
-          $track = $('.drag-track', view);
-          $dragger = $('.dragger', $track);
+            $frame.css({
+              width: maxWidth + 16,
+              height: maxHeight + 28
+            });
+            $('.swipe-wrap', view).css({
+              width: maxWidth + 1,
+              height: maxHeight + 2
+            });
+            $dragger.css({
+              left: dragTrackWidth
+            });
 
-          $frame.css({
-            width: maxWidth + 16,
-            height: maxHeight + 28
-          });
-          $('.swipe-wrap', view).css({
-            width: maxWidth + 1,
-            height: maxHeight + 2
-          });
-          $dragger.css({
-            left: dragTrackWidth
-          });
+            $frameAdded.css('opacity', 1);
+            framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
 
-          $frameAdded.css('opacity', 1);
-          framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
+            _this.initDraggable($dragger, framePadding, function(e, left) {
+              var opacity = left / dragTrackWidth;
 
-          _this.initDraggable($dragger, framePadding, function(e, left) {
-            var opacity = left / dragTrackWidth;
-
-            if (opacity >= 0 && opacity <= 1) {
-              $dragger.css('left', left);
-              $frameAdded.css('opacity', opacity);
-            }
-          });
-        };
-      })(this));
-    }
+              if (opacity >= 0 && opacity <= 1) {
+                $dragger.css('left', left);
+                $frameAdded.css('opacity', opacity);
+              }
+            });
+          };
+        })(this));
+      }
+    };
   }
 
   requestImageInfo(img, callback) {
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 0dd0783ce06..1bde6ae5185 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,56 +1,56 @@
 <script>
-import { s__ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
-import eventHub from '../event_hub';
-import { COMMON_STR } from '../constants';
+  import { s__ } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import icon from '~/vue_shared/components/icon.vue';
+  import modal from '~/vue_shared/components/modal.vue';
+  import eventHub from '../event_hub';
+  import { COMMON_STR } from '../constants';
 
-export default {
-  components: {
-    icon,
-    modal,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    parentGroup: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+  export default {
+    components: {
+      icon,
+      modal,
     },
-    group: {
-      type: Object,
-      required: true,
+    directives: {
+      tooltip,
     },
-  },
-  data() {
-    return {
-      modalStatus: false,
-    };
-  },
-  computed: {
-    leaveBtnTitle() {
-      return COMMON_STR.LEAVE_BTN_TITLE;
+    props: {
+      parentGroup: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      group: {
+        type: Object,
+        required: true,
+      },
     },
-    editBtnTitle() {
-      return COMMON_STR.EDIT_BTN_TITLE;
+    data() {
+      return {
+        modalStatus: false,
+      };
     },
-    leaveConfirmationMessage() {
-      return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
+    computed: {
+      leaveBtnTitle() {
+        return COMMON_STR.LEAVE_BTN_TITLE;
+      },
+      editBtnTitle() {
+        return COMMON_STR.EDIT_BTN_TITLE;
+      },
+      leaveConfirmationMessage() {
+        return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
+      },
     },
-  },
-  methods: {
-    onLeaveGroup() {
-      this.modalStatus = true;
+    methods: {
+      onLeaveGroup() {
+        this.modalStatus = true;
+      },
+      leaveGroup() {
+        this.modalStatus = false;
+        eventHub.$emit('leaveGroup', this.group, this.parentGroup);
+      },
     },
-    leaveGroup() {
-      this.modalStatus = false;
-      eventHub.$emit('leaveGroup', this.group, this.parentGroup);
-    },
-  },
-};
+  };
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 5bde30799b0..91b2269a83a 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -26,30 +26,18 @@
         default: () => ({}),
       },
     },
-    data() {
-      return {
-        outputType: '',
-      };
-    },
     computed: {
       componentName() {
         if (this.output.text) {
           return 'code-cell';
         } else if (this.output.data['image/png']) {
-          this.outputType = 'image/png';
-
           return 'image-output';
         } else if (this.output.data['text/html']) {
-          this.outputType = 'text/html';
-
           return 'html-output';
         } else if (this.output.data['image/svg+xml']) {
-          this.outputType = 'image/svg+xml';
-
           return 'html-output';
         }
 
-        this.outputType = 'text/plain';
         return 'code-cell';
       },
       rawCode() {
@@ -59,6 +47,19 @@
 
         return this.dataForType(this.outputType);
       },
+      outputType() {
+        if (this.output.text) {
+          return '';
+        } else if (this.output.data['image/png']) {
+          return 'image/png';
+        } else if (this.output.data['text/html']) {
+          return 'text/html';
+        } else if (this.output.data['image/svg+xml']) {
+          return 'image/svg+xml';
+        }
+
+        return 'text/plain';
+      },
     },
     methods: {
       dataForType(type) {
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 8ffa6adc4af..1f18c196137 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -305,7 +305,8 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
                 </textarea>
               </markdown-field>
               <div class="note-form-actions">
-                <div class="pull-left btn-group
+                <div
+                  class="pull-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
                     @click.prevent="handleSave()"
diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index 32be581defe..a6d1fa48aaf 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -115,7 +115,7 @@
               name="body"
               :text="text"
             >
-              <p>{{ this.text }}</p>
+              <p>{{ text }}</p>
             </slot>
           </div>
           <div
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 45ad278e5e2..bfeece12077 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -13,14 +13,17 @@
       selectedDate: {
         type: Date,
         required: false,
+        default: null,
       },
       minDate: {
         type: Date,
         required: false,
+        default: null,
       },
       maxDate: {
         type: Date,
         required: false,
+        default: null,
       },
     },
     mounted() {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
index 364aea2f649..dac438a702d 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
@@ -23,10 +23,12 @@
       minDate: {
         type: Date,
         required: false,
+        default: null,
       },
       maxDate: {
         type: Date,
         required: false,
+        default: null,
       },
       disableClickableIcons: {
         type: Boolean,
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 0b2232d3339..1413dd69f24 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -42,14 +42,17 @@
       selectedDate: {
         type: Date,
         required: false,
+        default: null,
       },
       minDate: {
         type: Date,
         required: false,
+        default: null,
       },
       maxDate: {
         type: Date,
         required: false,
+        default: null,
       },
     },
     data() {