[ci skip] Fix some rules

.eslintrc

@@ -25,7 +25,7 @@
     "promise"
   ],
   "settings": {
-    "html/html-extensions": [".html", ".html.raw", ".vue"],
+    "html/html-extensions": [".html", ".html.raw"],
     "import/resolver": {
       "webpack": {
         "config": "./config/webpack.config.js"

app/assets/javascripts/boards/components/board_card.vue

@@ -10,12 +10,30 @@ export default {
     'issue-card-inner': gl.issueBoards.IssueCardInner,
   },
   props: {
-    list: Object,
-    issue: Object,
-    issueLinkBase: String,
-    disabled: Boolean,
-    index: Number,
-    rootPath: String,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    issue: {
+      type: Object,
+      default: () => ({}),
+    },
+    issueLinkBase: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+    rootPath: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -54,8 +72,13 @@ export default {
 </script>
 
 <template>
-  <li class="card"
-    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
     :index="index"
     :data-issue-id="issue.id"
     @mousedown="mouseDown"

app/assets/javascripts/commit/image_file.js

@@ -23,8 +23,79 @@ export default class ImageFile {
         });
       };
     })(this));
+  }
+
+  initViewModes() {
+    const viewMode = viewModes[0];
+    $('.view-modes', this.file).removeClass('hide');
+    $('.view-modes-menu', this.file).on('click', 'li', (function(_this) {
+      return function(event) {
+        if (!$(event.currentTarget).hasClass('active')) {
+          return _this.activateViewMode(event.currentTarget.className);
+        }
+      };
+    })(this));
+    return this.activateViewMode(viewMode);
+  }
+
+  activateViewMode(viewMode) {
+    $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active');
+    return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) {
+      return function() {
+        $(".view." + viewMode, _this.file).fadeIn(200);
+        return _this.initView(viewMode);
+      };
+    })(this));
+  }
+
+  initView(viewMode) {
+    return this.views[viewMode].call(this);
+  }
+  // eslint-disable-next-line class-methods-use-this
+  initDraggable($el, padding, callback) {
+    var dragging = false;
+    var $body = $('body');
+    var $offsetEl = $el.parent();
+
+    $el.off('mousedown').on('mousedown', function() {
+      dragging = true;
+      $body.css('user-select', 'none');
+    });
+
+    $body.off('mouseup').off('mousemove').on('mouseup', function() {
+      dragging = false;
+      $body.css('user-select', '');
+    })
+    .on('mousemove', function(e) {
+      var left;
+      if (!dragging) return;
+
+      left = e.pageX - ($offsetEl.offset().left + padding);
+
+      callback(e, left);
+    });
+  }
+
+  prepareFrames(view) {
+    var maxHeight, maxWidth;
+    maxWidth = 0;
+    maxHeight = 0;
+    $('.frame', view).each((function(_this) {
+      return function(index, frame) {
+        var height, width;
+        width = $(frame).width();
+        height = $(frame).height();
+        maxWidth = width > maxWidth ? width : maxWidth;
+        return maxHeight = height > maxHeight ? height : maxHeight;
+      };
+    })(this)).css({
+      width: maxWidth,
+      height: maxHeight
+    });
+    return [maxWidth, maxHeight];
+  }
 
-    this.views = {
+  views = {
     'two-up': function() {
       return $('.two-up.view .wrap', this.file).each((function(_this) {
         return function(index, wrap) {
@@ -119,77 +190,6 @@ export default class ImageFile {
         };
       })(this));
     }
-    };
-  }
-
-  initViewModes() {
-    const viewMode = viewModes[0];
-    $('.view-modes', this.file).removeClass('hide');
-    $('.view-modes-menu', this.file).on('click', 'li', (function(_this) {
-      return function(event) {
-        if (!$(event.currentTarget).hasClass('active')) {
-          return _this.activateViewMode(event.currentTarget.className);
-        }
-      };
-    })(this));
-    return this.activateViewMode(viewMode);
-  }
-
-  activateViewMode(viewMode) {
-    $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active');
-    return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) {
-      return function() {
-        $(".view." + viewMode, _this.file).fadeIn(200);
-        return _this.initView(viewMode);
-      };
-    })(this));
-  }
-
-  initView(viewMode) {
-    return this.views[viewMode].call(this);
-  }
-  // eslint-disable-next-line class-methods-use-this
-  initDraggable($el, padding, callback) {
-    var dragging = false;
-    var $body = $('body');
-    var $offsetEl = $el.parent();
-
-    $el.off('mousedown').on('mousedown', function() {
-      dragging = true;
-      $body.css('user-select', 'none');
-    });
-
-    $body.off('mouseup').off('mousemove').on('mouseup', function() {
-      dragging = false;
-      $body.css('user-select', '');
-    })
-    .on('mousemove', function(e) {
-      var left;
-      if (!dragging) return;
-
-      left = e.pageX - ($offsetEl.offset().left + padding);
-
-      callback(e, left);
-    });
-  }
-
-  prepareFrames(view) {
-    var maxHeight, maxWidth;
-    maxWidth = 0;
-    maxHeight = 0;
-    $('.frame', view).each((function(_this) {
-      return function(index, frame) {
-        var height, width;
-        width = $(frame).width();
-        height = $(frame).height();
-        maxWidth = width > maxWidth ? width : maxWidth;
-        return maxHeight = height > maxHeight ? height : maxHeight;
-      };
-    })(this)).css({
-      width: maxWidth,
-      height: maxHeight
-    });
-    return [maxWidth, maxHeight];
   }
 
   requestImageInfo(img, callback) {

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -8,6 +8,12 @@ import '../../lib/utils/datetime_utility';
  */
 
 export default {
+  directives: {
+    tooltip,
+  },
+  mixins: [
+    timeagoMixin,
+  ],
   props: {
     time: {
       type: String,
@@ -26,14 +32,6 @@ export default {
       default: '',
     },
   },
-
-  mixins: [
-    timeagoMixin,
-  ],
-
-  directives: {
-    tooltip,
-  },
 };
 </script>
 <template>
@@ -43,6 +41,6 @@ export default {
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
     data-container="body">
-    {{timeFormated(time)}}
+    {{ timeFormated(time) }}
   </time>
 </template>

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -9,6 +9,16 @@
   const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 
   export default {
+    components: {
+      icon,
+      loadingIcon,
+    },
+
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+
     props: {
       name: {
         type: String,
@@ -31,16 +41,6 @@
       },
     },
 
-    components: {
-      icon,
-      loadingIcon,
-    },
-
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-
     computed: {
       toggleIcon() {
         return this.value ? ICON_ON : ICON_OFF;

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -22,6 +22,9 @@ import tooltip from '../../directives/tooltip';
 
 export default {
   name: 'UserAvatarImage',
+  directives: {
+    tooltip,
+  },
   props: {
     lazy: {
       type: Boolean,
@@ -59,9 +62,6 @@ export default {
       default: 'top',
     },
   },
-  directives: {
-    tooltip,
-  },
   computed: {
     // API response sends null when gravatar is disabled and
     // we provide an empty string when we use it inside user avatar link.
@@ -87,7 +87,7 @@ export default {
     v-tooltip
     class="avatar"
     :class="{
-      lazy,
+      lazy: lazy,
       [avatarSizeClass]: true,
       [cssClasses]: true
     }"

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

@@ -26,6 +26,9 @@ export default {
   components: {
     userAvatarImage,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     linkHref: {
       type: String,
@@ -76,9 +79,6 @@ export default {
       return this.shouldShowUsername ? '' : this.tooltipText;
     },
   },
-  directives: {
-    tooltip,
-  },
 };
 </script>
 
@@ -98,6 +98,6 @@ export default {
       v-tooltip
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
-    >{{username}}</span>
+    >{{ username }}</span>
   </a>
 </template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

@@ -39,7 +39,7 @@ export default {
     :class="avatarSizeClass"
     :height="size"
     :width="size"
-    v-html="svg">
-  </svg>
+    v-html="svg"
+    />
 </template>