diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index d0f60e1d4cb..b4bfaee1d85 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -72,11 +72,11 @@ export default {
       rel="noopener noreferrer"
     >
       <img
-        class="project-badge"
         :src="imageUrlWithRetries"
+        class="project-badge"
+        aria-hidden="true"
         @load="onLoad"
         @error="onError"
-        aria-hidden="true"
       />
     </a>
 
@@ -91,9 +91,9 @@ export default {
     >
       <div class="btn btn-default btn-sm disabled">
         <icon
+          :size="16"
           class="prepend-left-8 append-right-8"
           name="doc_image"
-          :size="16"
           aria-hidden="true"
         />
       </div>
@@ -105,16 +105,16 @@ export default {
     </div>
 
     <button
+      v-tooltip
       v-show="hasError"
+      :title="s__('Badges|Reload badge image')"
       class="btn btn-transparent btn-sm text-primary"
       type="button"
-      v-tooltip
-      :title="s__('Badges|Reload badge image')"
       @click="reloadImage"
     >
       <icon
-        name="retry"
         :size="16"
+        name="retry"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 5975cb9669e..7a13f74c570 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -153,10 +153,10 @@ export default {
       <label for="badge-link-url">{{ s__('Badges|Link') }}</label>
       <input
         id="badge-link-url"
-        type="text"
-        class="form-control"
         v-model="linkUrl"
         :placeholder="$options.badgeLinkUrlPlaceholder"
+        type="text"
+        class="form-control"
         @input="debouncedPreview"
       />
       <span
@@ -169,10 +169,10 @@ export default {
       <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label>
       <input
         id="badge-image-url"
-        type="text"
-        class="form-control"
         v-model="imageUrl"
         :placeholder="$options.badgeImageUrlPlaceholder"
+        type="text"
+        class="form-control"
         @input="debouncedPreview"
       />
       <span
@@ -184,8 +184,8 @@ export default {
     <div class="form-group">
       <label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label>
       <badge
-        id="badge-preview"
         v-show="renderedBadge && !isRendering"
+        id="badge-preview"
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
@@ -202,16 +202,16 @@ export default {
 
     <div class="row-content-block">
       <loading-button
-        type="submit"
-        container-class="btn btn-success"
         :disabled="!canSubmit"
         :loading="isSaving"
         :label="submitButtonLabel"
+        type="submit"
+        container-class="btn btn-success"
       />
       <button
+        v-if="isEditing"
         class="btn btn-cancel"
         type="button"
-        v-if="isEditing"
         @click="onCancel"
       >{{ __('Cancel') }}</button>
     </div>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index af062bdf8c6..98aa00af0d7 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -41,9 +41,9 @@ export default {
 <template>
   <div class="gl-responsive-table-row-layout gl-responsive-table-row">
     <badge
-      class="table-section section-30"
       :image-url="badge.renderedImageUrl"
       :link-url="badge.renderedLinkUrl"
+      class="table-section section-30"
     />
     <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span>
     <div class="table-section section-10">
@@ -54,29 +54,29 @@ export default {
         v-if="canEditBadge"
         class="table-action-buttons">
         <button
+          :disabled="badge.isDeleting"
           class="btn btn-default append-right-8"
           type="button"
-          :disabled="badge.isDeleting"
           @click="editBadge(badge)"
         >
           <icon
-            name="pencil"
             :size="16"
             :aria-label="__('Edit')"
+            name="pencil"
           />
         </button>
         <button
+          :disabled="badge.isDeleting"
           class="btn btn-danger"
           type="button"
           data-toggle="modal"
           data-target="#delete-badge-modal"
-          :disabled="badge.isDeleting"
           @click="updateBadgeInModal(badge)"
         >
           <icon
-            name="remove"
             :size="16"
             :aria-label="__('Delete')"
+            name="remove"
           />
         </button>
         <loading-icon
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 83f78394238..cc47e56dd1e 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -44,8 +44,8 @@ export default {
     <gl-modal
       id="delete-badge-modal"
       :header-title-text="s__('Badges|Delete badge?')"
-      footer-primary-button-variant="danger"
       :footer-primary-button-text="s__('Badges|Delete badge')"
+      footer-primary-button-variant="danger"
       @submit="onSubmitModal">
       <div class="well">
         <badge
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index ac06d79fb60..86b888c66c8 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -14,17 +14,28 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.Board = Vue.extend({
-  template: '#js-board-template',
   components: {
     boardList,
     'board-delete': gl.issueBoards.BoardDelete,
     BoardBlankState,
   },
   props: {
-    list: Object,
-    disabled: Boolean,
-    issueLinkBase: String,
-    rootPath: String,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
     boardId: {
       type: String,
       required: true,
@@ -82,20 +93,6 @@ gl.issueBoards.Board = Vue.extend({
       deep: true
     }
   },
-  methods: {
-    showNewIssueForm() {
-      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    },
-    toggleExpanded(e) {
-      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
-        this.list.isExpanded = !this.list.isExpanded;
-
-        if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
-        }
-      }
-    },
-  },
   mounted () {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
       disabled: this.disabled,
@@ -125,4 +122,19 @@ gl.issueBoards.Board = Vue.extend({
       this.list.isExpanded = !isCollapsed;
     }
   },
+  methods: {
+    showNewIssueForm() {
+      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+    },
+    toggleExpanded(e) {
+      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe()) {
+          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+        }
+      }
+    },
+  },
+  template: '#js-board-template',
 });
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index 2049eeb9c30..286529b4d13 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -72,8 +72,8 @@ export default {
         :key="index"
       >
         <span
-          class="label-color"
-          :style="{ backgroundColor: label.color }">
+          :style="{ backgroundColor: label.color }"
+          class="label-color">
         </span>
         {{ label.title }}
       </li>
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 33e3369b971..b7d3574bc80 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -77,7 +77,6 @@ export default {
 
 <template>
   <li
-    class="board-card"
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
@@ -85,6 +84,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
+    class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
     @mouseup="showIssue($event)">
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index 7be98825fda..4482b3b3e70 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -8,7 +8,10 @@ window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardDelete = Vue.extend({
   props: {
-    list: Object
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   methods: {
     deleteBoard () {
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 0692c96e767..5c7565234d8 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -205,22 +205,22 @@ export default {
 <template>
   <div class="board-list-component">
     <div
+      v-if="loading"
       class="board-list-loading text-center"
-      aria-label="Loading issues"
-      v-if="loading">
+      aria-label="Loading issues">
       <loading-icon />
     </div>
     <board-new-issue
+      v-if="list.type !== 'closed' && showIssueForm"
       :group-id="groupId"
-      :list="list"
-      v-if="list.type !== 'closed' && showIssueForm"/>
+      :list="list"/>
     <ul
-      class="board-list js-board-list"
       v-show="!loading"
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
-      :class="{ 'is-smaller': showIssueForm }">
+      :class="{ 'is-smaller': showIssueForm }"
+      class="board-list js-board-list">
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
@@ -233,8 +233,8 @@ export default {
         :disabled="disabled"
         :key="issue.id" />
       <li
-        class="board-list-count text-center"
         v-if="showCount"
+        class="board-list-count text-center"
         data-issue-id="-1">
         <loading-icon
           v-show="list.loadingMore"
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 297c9eff38c..ec23b1e7c11 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -96,26 +96,26 @@ export default {
     <div class="board-card">
       <form @submit="submit($event)">
         <div
-          class="flash-container"
           v-if="error"
+          class="flash-container"
         >
           <div class="flash-alert">
             An error occurred. Please try again.
           </div>
         </div>
         <label
-          class="label-light"
           :for="list.id + '-title'"
+          class="label-light"
         >
           Title
         </label>
         <input
+          ref="input"
+          v-model="title"
+          :id="list.id + '-title'"
           class="form-control"
           type="text"
-          v-model="title"
-          ref="input"
           autocomplete="off"
-          :id="list.id + '-title'"
         />
         <project-select
           v-if="groupId"
@@ -123,10 +123,10 @@ export default {
         />
         <div class="clearfix prepend-top-10">
           <button
+            ref="submit-button"
+            :disabled="disabled"
             class="btn btn-success float-left"
             type="submit"
-            :disabled="disabled"
-            ref="submit-button"
           >
             Submit issue
           </button>
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index c4ee4f6c855..82fe6b0c5fb 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -21,8 +21,17 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardSidebar = Vue.extend({
+  components: {
+    assigneeTitle,
+    assignees,
+    removeBtn: gl.issueBoards.RemoveIssueBtn,
+    subscriptions,
+  },
   props: {
-    currentUser: Object
+    currentUser: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -64,6 +73,26 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       deep: true
     },
   },
+  created () {
+    // Get events from glDropdown
+    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$on('sidebar.addAssignee', this.addAssignee);
+    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$off('sidebar.addAssignee', this.addAssignee);
+    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
+  },
+  mounted () {
+    new IssuableContext(this.currentUser);
+    new MilestoneSelect();
+    new DueDateSelectors();
+    new LabelsSelect();
+    new Sidebar();
+  },
   methods: {
     closeSidebar () {
       this.detail.issue = {};
@@ -97,30 +126,4 @@ gl.issueBoards.BoardSidebar = Vue.extend({
         });
     },
   },
-  created () {
-    // Get events from glDropdown
-    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$on('sidebar.addAssignee', this.addAssignee);
-    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
-  },
-  beforeDestroy() {
-    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$off('sidebar.addAssignee', this.addAssignee);
-    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
-  },
-  mounted () {
-    new IssuableContext(this.currentUser);
-    new MilestoneSelect();
-    new DueDateSelectors();
-    new LabelsSelect();
-    new Sidebar();
-  },
-  components: {
-    assigneeTitle,
-    assignees,
-    removeBtn: gl.issueBoards.RemoveIssueBtn,
-    subscriptions,
-  },
 });
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index dcc07810d01..f7d7b910e2f 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -9,6 +9,9 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.IssueCardInner = Vue.extend({
+  components: {
+    UserAvatarLink,
+  },
   props: {
     issue: {
       type: Object,
@@ -35,6 +38,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     groupId: {
       type: Number,
       required: false,
+      default: null,
     },
   },
   data() {
@@ -44,9 +48,6 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
-  components: {
-    UserAvatarLink,
-  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
index 1e5f2383223..888bc9d7ef2 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js
@@ -4,9 +4,6 @@ import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalEmptyState = Vue.extend({
   mixins: [modalMixin],
-  data() {
-    return ModalStore.store;
-  },
   props: {
     newIssuePath: {
       type: String,
@@ -17,6 +14,9 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
       required: true,
     },
   },
+  data() {
+    return ModalStore.store;
+  },
   computed: {
     contents() {
       const obj = {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index 11bb3e98334..2745ca219ad 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -7,6 +7,9 @@ import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalFooter = Vue.extend({
+  components: {
+    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+  },
   mixins: [modalMixin],
   data() {
     return {
@@ -52,9 +55,6 @@ gl.issueBoards.ModalFooter = Vue.extend({
       this.toggleModal(false);
     },
   },
-  components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
-  },
   template: `
     <footer
       class="form-actions add-issues-footer">
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index 67c29ebca72..5e511bb8935 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -5,6 +5,10 @@ import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalHeader = Vue.extend({
+  components: {
+    'modal-tabs': gl.issueBoards.ModalTabs,
+    modalFilters,
+  },
   mixins: [modalMixin],
   props: {
     projectId: {
@@ -42,10 +46,6 @@ gl.issueBoards.ModalHeader = Vue.extend({
       ModalStore.toggleAll();
     },
   },
-  components: {
-    'modal-tabs': gl.issueBoards.ModalTabs,
-    modalFilters,
-  },
   template: `
     <div>
       <header class="add-issues-header form-actions">
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 3083b3e4405..c8b2f45f177 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -10,6 +10,13 @@ import './empty_state';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.IssuesModal = Vue.extend({
+  components: {
+    'modal-header': gl.issueBoards.ModalHeader,
+    'modal-list': gl.issueBoards.ModalList,
+    'modal-footer': gl.issueBoards.ModalFooter,
+    'empty-state': gl.issueBoards.ModalEmptyState,
+    loadingIcon,
+  },
   props: {
     newIssuePath: {
       type: String,
@@ -43,6 +50,22 @@ gl.issueBoards.IssuesModal = Vue.extend({
   data() {
     return ModalStore.store;
   },
+  computed: {
+    showList() {
+      if (this.activeTab === 'selected') {
+        return this.selectedIssues.length > 0;
+      }
+
+      return this.issuesCount > 0;
+    },
+    showEmptyState() {
+      if (!this.loading && this.issuesCount === 0) {
+        return true;
+      }
+
+      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
+    },
+  },
   watch: {
     page() {
       this.loadIssues();
@@ -80,6 +103,9 @@ gl.issueBoards.IssuesModal = Vue.extend({
       deep: true,
     },
   },
+  created() {
+    this.page = 1;
+  },
   methods: {
     loadIssues(clearIssues = false) {
       if (!this.showAddIssuesModal) return false;
@@ -112,32 +138,6 @@ gl.issueBoards.IssuesModal = Vue.extend({
       });
     },
   },
-  computed: {
-    showList() {
-      if (this.activeTab === 'selected') {
-        return this.selectedIssues.length > 0;
-      }
-
-      return this.issuesCount > 0;
-    },
-    showEmptyState() {
-      if (!this.loading && this.issuesCount === 0) {
-        return true;
-      }
-
-      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
-    },
-  },
-  created() {
-    this.page = 1;
-  },
-  components: {
-    'modal-header': gl.issueBoards.ModalHeader,
-    'modal-list': gl.issueBoards.ModalList,
-    'modal-footer': gl.issueBoards.ModalFooter,
-    'empty-state': gl.issueBoards.ModalEmptyState,
-    loadingIcon,
-  },
   template: `
     <div
       class="add-issues-modal"
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index f86896d2178..11061c72a7b 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -3,6 +3,9 @@ import bp from '../../../breakpoints';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.ModalList = Vue.extend({
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
   props: {
     issueLinkBase: {
       type: String,
@@ -20,13 +23,6 @@ gl.issueBoards.ModalList = Vue.extend({
   data() {
     return ModalStore.store;
   },
-  watch: {
-    activeTab() {
-      if (this.activeTab === 'all') {
-        ModalStore.purgeUnselectedIssues();
-      }
-    },
-  },
   computed: {
     loopIssues() {
       if (this.activeTab === 'all') {
@@ -50,6 +46,25 @@ gl.issueBoards.ModalList = Vue.extend({
       return groups;
     },
   },
+  watch: {
+    activeTab() {
+      if (this.activeTab === 'all') {
+        ModalStore.purgeUnselectedIssues();
+      }
+    },
+  },
+  mounted() {
+    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
+    this.setColumnCountWrapper = this.setColumnCount.bind(this);
+    this.setColumnCount();
+
+    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
+    window.addEventListener('resize', this.setColumnCountWrapper);
+  },
+  beforeDestroy() {
+    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
+    window.removeEventListener('resize', this.setColumnCountWrapper);
+  },
   methods: {
     scrollHandler() {
       const currentPage = Math.floor(this.issues.length / this.perPage);
@@ -96,21 +111,6 @@ gl.issueBoards.ModalList = Vue.extend({
       }
     },
   },
-  mounted() {
-    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
-    this.setColumnCountWrapper = this.setColumnCount.bind(this);
-    this.setColumnCount();
-
-    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
-    window.addEventListener('resize', this.setColumnCountWrapper);
-  },
-  beforeDestroy() {
-    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
-    window.removeEventListener('resize', this.setColumnCountWrapper);
-  },
-  components: {
-    'issue-card-inner': gl.issueBoards.IssueCardInner,
-  },
   template: `
     <section
       class="add-issues-list add-issues-list-columns"
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 98c0b9c22a8..ec52fdfdf32 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -125,8 +125,8 @@
 
 <template>
   <div
-    class="gl-responsive-table-row gl-responsive-table-row-col-span"
     :class="rowJsClass"
+    class="gl-responsive-table-row gl-responsive-table-row-col-span"
   >
     <div
       class="gl-responsive-table-row-layout"
@@ -155,8 +155,8 @@
         <slot name="description"></slot>
       </div>
       <div
-        class="table-section table-button-footer section-align-top"
         :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }"
+        class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
         <div
@@ -164,18 +164,18 @@
           class="btn-group table-action-buttons"
         >
           <a
-            class="btn"
             :href="manageLink"
+            class="btn"
           >
             {{ manageButtonLabel }}
           </a>
         </div>
         <div class="btn-group table-action-buttons">
           <loading-button
-            class="js-cluster-application-install-button"
             :loading="installButtonLoading"
             :disabled="installButtonDisabled"
             :label="installButtonLabel"
+            class="js-cluster-application-install-button"
             @click="installClicked"
           />
         </div>
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 9d6be555a2c..8ee7279e544 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -152,11 +152,11 @@ export default {
         <application-row
           id="helm"
           :title="applications.helm.title"
-          title-link="https://docs.helm.sh/"
           :status="applications.helm.status"
           :status-reason="applications.helm.statusReason"
           :request-status="applications.helm.requestStatus"
           :request-reason="applications.helm.requestReason"
+          title-link="https://docs.helm.sh/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|Helm streamlines installing
@@ -168,11 +168,11 @@ export default {
         <application-row
           :id="ingressId"
           :title="applications.ingress.title"
-          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
           :status="applications.ingress.status"
           :status-reason="applications.ingress.statusReason"
           :request-status="applications.ingress.requestStatus"
           :request-reason="applications.ingress.requestReason"
+          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
         >
           <div slot="description">
             <p>
@@ -191,10 +191,10 @@ export default {
                   class="input-group"
                 >
                   <input
-                    type="text"
                     id="ingress-ip-address"
-                    class="form-control js-ip-address"
                     :value="ingressExternalIp"
+                    type="text"
+                    class="form-control js-ip-address"
                     readonly
                   />
                   <span class="input-group-append">
@@ -255,12 +255,12 @@ export default {
         <application-row
           id="prometheus"
           :title="applications.prometheus.title"
-          title-link="https://prometheus.io/docs/introduction/overview/"
           :manage-link="managePrometheusPath"
           :status="applications.prometheus.status"
           :status-reason="applications.prometheus.statusReason"
           :request-status="applications.prometheus.requestStatus"
           :request-reason="applications.prometheus.requestReason"
+          title-link="https://prometheus.io/docs/introduction/overview/"
         >
           <div
             slot="description"
@@ -271,11 +271,11 @@ export default {
         <application-row
           id="runner"
           :title="applications.runner.title"
-          title-link="https://docs.gitlab.com/runner/"
           :status="applications.runner.status"
           :status-reason="applications.runner.statusReason"
           :request-status="applications.runner.requestStatus"
           :request-reason="applications.runner.requestReason"
+          title-link="https://docs.gitlab.com/runner/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|GitLab Runner connects to this
@@ -287,12 +287,12 @@ export default {
         <application-row
           id="jupyter"
           :title="applications.jupyter.title"
-          title-link="https://jupyterhub.readthedocs.io/en/stable/"
           :status="applications.jupyter.status"
           :status-reason="applications.jupyter.statusReason"
           :request-status="applications.jupyter.requestStatus"
           :request-reason="applications.jupyter.requestReason"
           :install-application-request-params="{ hostname: applications.jupyter.hostname }"
+          title-link="https://jupyterhub.readthedocs.io/en/stable/"
         >
           <div slot="description">
             <p>
@@ -311,10 +311,10 @@ export default {
 
                 <div class="input-group">
                   <input
-                    type="text"
-                    class="form-control js-hostname"
                     v-model="applications.jupyter.hostname"
                     :readonly="jupyterInstalled"
+                    type="text"
+                    class="form-control js-hostname"
                   />
                   <span
                     class="input-group-btn"
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 24d63b99a29..95c4be64d35 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -77,9 +77,9 @@
   <div class="content-list pipelines">
 
     <loading-icon
+      v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
       size="3"
-      v-if="isLoading"
       class="prepend-top-20"
     />
 
@@ -91,8 +91,8 @@
     />
 
     <div
-      class="table-holder"
       v-else-if="shouldRenderTable"
+      class="table-holder"
     >
       <pipelines-table-component
         :pipelines="state.pipelines"
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 3204b8dd8e7..410d4873e55 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -23,9 +23,9 @@
 <template>
   <div class="landing content-block">
     <button
+      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       class="js-ca-dismiss-button dismiss-button"
       type="button"
-      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       @click="dismissOverviewDialog"
     >
       <i
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index 5be17081b58..b626b187651 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -19,14 +19,14 @@
     class="events-info float-right"
   >
     <i
-      class="fa fa-warning"
       v-tooltip
-      aria-hidden="true"
       :title="n__(
         'Limited to showing %d event at most',
         'Limited to showing %d events at most',
         50
       )"
+      class="fa fa-warning"
+      aria-hidden="true"
       data-placement="top"
     >
     </i>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 907638d798a..312fe75dde4 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -38,8 +38,8 @@
           <user-avatar-image :img-src="issue.author.avatarUrl"/>
           <h5 class="item-title issue-title">
             <a
-              class="issue-title"
               :href="issue.url"
+              class="issue-title"
             >
               {{ issue.title }}
             </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index 34aa04083e6..d4735d030fc 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -74,12 +74,12 @@
           </template>
           <template v-else>
             <span
-              class="merge-request-branch"
               v-if="mergeRequest.branch"
+              class="merge-request-branch"
             >
               <icon
-                name="fork"
                 :size="16"
+                name="fork"
               />
               <a :href="mergeRequest.branch.url">
                 {{ mergeRequest.branch.name }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 92f2a95a66a..22637485c01 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -38,8 +38,8 @@
     <ul class="stage-event-list">
       <li
         v-for="(build, i) in items"
-        class="stage-event-item item-build-component"
         :key="i"
+        class="stage-event-item item-build-component"
       >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
@@ -52,8 +52,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index b84bb6ed792..a0796f299e7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -64,8 +64,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 67dda0e29cb..7399fc97d45 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -40,9 +40,9 @@ export default {
 
 <template>
   <button
-    class="btn"
     :class="[{ disabled: isLoading }, btnCssClass]"
     :disabled="isLoading"
+    class="btn"
     @click="doAction">
     <slot></slot>
     <loading-icon
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index c41fe55db63..2cfa13fdc75 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -116,8 +116,8 @@ export default {
   <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
-      size="2"
       :label="s__('DeployKeys|Loading deploy keys')"
+      size="2"
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
@@ -138,16 +138,16 @@ export default {
 
         <navigation-tabs
           :tabs="tabs"
-          @onChangeTab="onChangeTab"
           scope="deployKeys"
+          @onChangeTab="onChangeTab"
         />
       </div>
       <keys-panel
-        class="qa-project-deploy-keys"
         :project-id="projectId"
         :keys="keys[currentTab]"
         :store="store"
         :endpoint="endpoint"
+        class="qa-project-deploy-keys"
       />
     </template>
   </div>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 6c2af7fa768..f66ca070445 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -135,9 +135,9 @@ export default {
       <div class="table-mobile-content deploy-project-list">
         <template v-if="projects.length > 0">
           <a
-            class="label deploy-project-label"
-            :title="projectTooltipTitle(firstProject)"
             v-tooltip
+            :title="projectTooltipTitle(firstProject)"
+            class="label deploy-project-label"
           >
             <span>
               {{ firstProject.project.full_name }}
@@ -145,22 +145,22 @@ export default {
             <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
           </a>
           <a
+            v-tooltip
             v-if="isExpandable"
+            :title="restProjectsTooltip"
             class="label deploy-project-label"
             @click="toggleExpanded"
-            :title="restProjectsTooltip"
-            v-tooltip
           >
             <span>{{ restProjectsLabel }}</span>
           </a>
           <a
-            v-else-if="isExpanded"
+            v-tooltip
             v-for="deployKeysProject in restProjects"
+            v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
-            class="label deploy-project-label"
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
-            v-tooltip
+            class="label deploy-project-label"
           >
             <span>
               {{ deployKeysProject.project.full_name }}
@@ -181,8 +181,8 @@ export default {
       </div>
       <div class="table-mobile-content text-secondary key-created-at">
         <span
-          :title="tooltipTitle(deployKey.created_at)"
-          v-tooltip>
+          v-tooltip
+          :title="tooltipTitle(deployKey.created_at)">
           <icon name="calendar"/>
           <span>{{ timeFormated(deployKey.created_at) }}</span>
         </span>
@@ -198,34 +198,34 @@ export default {
           {{ __('Enable') }}
         </action-btn>
         <a
+          v-tooltip
           v-if="deployKey.can_edit"
-          class="btn btn-default text-secondary"
           :href="editDeployKeyPath"
           :title="__('Edit')"
+          class="btn btn-default text-secondary"
           data-container="body"
-          v-tooltip
         >
           <icon name="pencil"/>
         </a>
         <action-btn
+          v-tooltip
           v-if="isRemovable"
           :deploy-key="deployKey"
+          :title="__('Remove')"
           btn-css-class="btn-danger"
           type="remove"
-          :title="__('Remove')"
           data-container="body"
-          v-tooltip
         >
           <icon name="remove"/>
         </action-btn>
         <action-btn
+          v-tooltip
           v-else-if="isEnabled"
           :deploy-key="deployKey"
+          :title="__('Disable')"
           btn-css-class="btn-warning"
           type="disable"
-          :title="__('Disable')"
           data-container="body"
-          v-tooltip
         >
           <icon name="cancel"/>
         </action-btn>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index 3b146c7389a..2f057ca29f6 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -59,8 +59,8 @@ export default {
       />
     </template>
     <div
-      class="settings-message text-center"
       v-else
+      class="settings-message text-center"
     >
       {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index d1260ff5373..ed24d1775f4 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -6,7 +6,10 @@ import Vue from 'vue';
 
 const CommentAndResolveBtn = Vue.extend({
   props: {
-    discussionId: String,
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index fe9b0795609..40f7c2fe5f3 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -7,7 +7,15 @@ import Notes from '../../notes';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
-  props: ['discussionId'],
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    discussionId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       isVisible: false,
@@ -17,77 +25,6 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
-  components: {
-    userAvatarImage,
-  },
-  template: `
-    <div class="diff-comment-avatar-holders"
-      :class="discussionClassName"
-      v-show="notesCount !== 0">
-      <div v-if="!isVisible">
-        <!-- FIXME: Pass an alt attribute here for accessibility -->
-        <user-avatar-image
-          v-for="note in notesSubset"
-          :key="note.id"
-          class="diff-comment-avatar js-diff-comment-avatar"
-          @click.native="clickedAvatar($event)"
-          :img-src="note.authorAvatar"
-          :tooltip-text="getTooltipText(note)"
-          :data-line-type="lineType"
-          :size="19"
-          data-html="true"
-        />
-        <span v-if="notesCount > shownAvatars"
-          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
-          data-container="body"
-          data-placement="top"
-          ref="extraComments"
-          role="button"
-          :data-line-type="lineType"
-          :title="extraNotesTitle"
-          @click="clickedAvatar($event)">{{ moreText }}</span>
-      </div>
-      <button class="diff-notes-collapse js-diff-comment-avatar"
-        type="button"
-        aria-label="Show comments"
-        :data-line-type="lineType"
-        @click="clickedAvatar($event)"
-        v-if="isVisible"
-        v-html="collapseIcon">
-      </button>
-    </div>
-  `,
-  mounted() {
-    this.$nextTick(() => {
-      this.addNoCommentClass();
-      this.setDiscussionVisible();
-
-      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
-    });
-
-    $(document).on('toggle.comments', () => {
-      this.$nextTick(() => {
-        this.setDiscussionVisible();
-      });
-    });
-  },
-  beforeDestroy() {
-    this.addNoCommentClass();
-    $(document).off('toggle.comments');
-  },
-  watch: {
-    storeState: {
-      handler() {
-        this.$nextTick(() => {
-          $('.has-tooltip', this.$el).tooltip('_fixTitle');
-
-          // We need to add/remove a class to an element that is outside the Vue instance
-          this.addNoCommentClass();
-        });
-      },
-      deep: true,
-    },
-  },
   computed: {
     discussionClassName() {
       return `js-diff-avatars-${this.discussionId}`;
@@ -128,6 +65,37 @@ const DiffNoteAvatars = Vue.extend({
       return `${plusSign}${this.notesCount - this.shownAvatars}`;
     },
   },
+  watch: {
+    storeState: {
+      handler() {
+        this.$nextTick(() => {
+          $('.has-tooltip', this.$el).tooltip('_fixTitle');
+
+          // We need to add/remove a class to an element that is outside the Vue instance
+          this.addNoCommentClass();
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.addNoCommentClass();
+      this.setDiscussionVisible();
+
+      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+    });
+
+    $(document).on('toggle.comments', () => {
+      this.$nextTick(() => {
+        this.setDiscussionVisible();
+      });
+    });
+  },
+  beforeDestroy() {
+    this.addNoCommentClass();
+    $(document).off('toggle.comments');
+  },
   methods: {
     clickedAvatar(e) {
       Notes.instance.onAddDiffNote(e);
@@ -164,6 +132,43 @@ const DiffNoteAvatars = Vue.extend({
       return `${note.authorName}: ${note.noteTruncated}`;
     },
   },
+  template: `
+    <div class="diff-comment-avatar-holders"
+      :class="discussionClassName"
+      v-show="notesCount !== 0">
+      <div v-if="!isVisible">
+        <!-- FIXME: Pass an alt attribute here for accessibility -->
+        <user-avatar-image
+          v-for="note in notesSubset"
+          :key="note.id"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
+          :data-line-type="lineType"
+          :size="19"
+          data-html="true"
+        />
+        <span v-if="notesCount > shownAvatars"
+          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
+          data-container="body"
+          data-placement="top"
+          ref="extraComments"
+          role="button"
+          :data-line-type="lineType"
+          :title="extraNotesTitle"
+          @click="clickedAvatar($event)">{{ moreText }}</span>
+      </div>
+      <button class="diff-notes-collapse js-diff-comment-avatar"
+        type="button"
+        aria-label="Show comments"
+        :data-line-type="lineType"
+        @click="clickedAvatar($event)"
+        v-if="isVisible"
+        v-html="collapseIcon">
+      </button>
+    </div>
+  `,
 });
 
 Vue.component('diff-note-avatars', DiffNoteAvatars);
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 8f9186dfb9a..2ce4b050763 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -10,7 +10,10 @@ import '../mixins/discussion';
 const JumpToDiscussion = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    discussionId: String
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -52,6 +55,9 @@ const JumpToDiscussion = Vue.extend({
       return lastId;
     }
   },
+  created() {
+    this.discussion = this.discussions[this.discussionId];
+  },
   methods: {
     jumpToNextUnresolvedDiscussion: function () {
       let discussionsSelector;
@@ -202,9 +208,6 @@ const JumpToDiscussion = Vue.extend({
       });
     }
   },
-  created() {
-    this.discussion = this.discussions[this.discussionId];
-  },
 });
 
 Vue.component('jump-to-discussion', JumpToDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index 8d66417abac..07f3be29090 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -8,14 +8,38 @@ import Flash from '../../flash';
 
 const ResolveBtn = Vue.extend({
   props: {
-    noteId: Number,
-    discussionId: String,
-    resolved: Boolean,
-    canResolve: Boolean,
-    resolvedBy: String,
-    authorName: String,
-    authorAvatar: String,
-    noteTruncated: String,
+    noteId: {
+      type: Number,
+      required: true,
+    },
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    resolved: {
+      type: Boolean,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
+    resolvedBy: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+    },
+    authorAvatar: {
+      type: String,
+      required: true,
+    },
+    noteTruncated: {
+      type: String,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -23,12 +47,6 @@ const ResolveBtn = Vue.extend({
       loading: false
     };
   },
-  watch: {
-    'discussions': {
-      handler: 'updateTooltip',
-      deep: true
-    }
-  },
   computed: {
     discussion: function () {
       return this.discussions[this.discussionId];
@@ -56,6 +74,32 @@ const ResolveBtn = Vue.extend({
       return this.note.resolved_by;
     },
   },
+  watch: {
+    'discussions': {
+      handler: 'updateTooltip',
+      deep: true
+    }
+  },
+  mounted: function () {
+    $(this.$refs.button).tooltip({
+      container: 'body'
+    });
+  },
+  beforeDestroy: function () {
+    CommentsStore.delete(this.discussionId, this.noteId);
+  },
+  created: function () {
+    CommentsStore.create({
+      discussionId: this.discussionId,
+      noteId: this.noteId,
+      canResolve: this.canResolve,
+      resolved: this.resolved,
+      resolvedBy: this.resolvedBy,
+      authorName: this.authorName,
+      authorAvatar: this.authorAvatar,
+      noteTruncated: this.noteTruncated,
+    });
+  },
   methods: {
     updateTooltip: function () {
       this.$nextTick(() => {
@@ -95,26 +139,6 @@ const ResolveBtn = Vue.extend({
         .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
     }
   },
-  mounted: function () {
-    $(this.$refs.button).tooltip({
-      container: 'body'
-    });
-  },
-  beforeDestroy: function () {
-    CommentsStore.delete(this.discussionId, this.noteId);
-  },
-  created: function () {
-    CommentsStore.create({
-      discussionId: this.discussionId,
-      noteId: this.noteId,
-      canResolve: this.canResolve,
-      resolved: this.resolved,
-      resolvedBy: this.resolvedBy,
-      authorName: this.authorName,
-      authorAvatar: this.authorAvatar,
-      noteTruncated: this.noteTruncated,
-    });
-  }
 });
 
 Vue.component('resolve-btn', ResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
index fe7cf8f5fc1..9f613410e81 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -9,7 +9,10 @@ import '../mixins/discussion';
 window.ResolveCount = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    loggedOut: Boolean
+    loggedOut: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function () {
     return {
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
index 6a036e96171..210a00c5fc2 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
@@ -6,9 +6,18 @@ import Vue from 'vue';
 
 const ResolveDiscussionBtn = Vue.extend({
   props: {
-    discussionId: String,
-    mergeRequestId: Number,
-    canResolve: Boolean,
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    mergeRequestId: {
+      type: Number,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function() {
     return {
@@ -45,16 +54,16 @@ const ResolveDiscussionBtn = Vue.extend({
       }
     }
   },
+  created: function () {
+    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+    this.discussion = CommentsStore.state[this.discussionId];
+  },
   methods: {
     resolve: function () {
       ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
     }
   },
-  created: function () {
-    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
-
-    this.discussion = CommentsStore.state[this.discussionId];
-  }
 });
 
 Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 6bd7c6b49cb..9aa224fa407 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -43,17 +43,17 @@
   <div class="environments-container">
 
     <loading-icon
+      v-if="isLoading"
       class="prepend-top-default"
       label="Loading environments"
-      v-if="isLoading"
       size="3"
     />
 
     <slot name="emptyState"></slot>
 
     <div
-      class="table-holder"
-      v-if="!isLoading && environments.length > 0">
+      v-if="!isLoading && environments.length > 0"
+      class="table-holder">
 
       <environment-table
         :environments="environments"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 0b3fef9fcca..e3652fe739e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -52,18 +52,18 @@
     role="group">
     <button
       v-tooltip
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading"
       type="button"
       class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
       data-container="body"
       data-toggle="dropdown"
-      :title="title"
-      :aria-label="title"
-      :disabled="isLoading"
     >
       <span>
         <icon
-          name="play"
           :size="12"
+          name="play"
         />
         <i
           class="fa fa-caret-down"
@@ -79,15 +79,15 @@
         v-for="(action, i) in actions"
         :key="i">
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
           <icon
-            name="play"
             :size="12"
+            name="play"
           />
           <span>
             {{ action.name }}
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index ea6f1168c68..68195225d50 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -29,17 +29,17 @@
 <template>
   <a
     v-tooltip
+    :title="title"
+    :aria-label="title"
+    :href="externalUrl"
     class="btn external-url"
     data-container="body"
     target="_blank"
     rel="noopener noreferrer nofollow"
-    :title="title"
-    :aria-label="title"
-    :href="externalUrl"
   >
     <icon
-      name="external-link"
       :size="12"
+      name="external-link"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 23aaab2c441..866e91057ec 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -427,11 +427,11 @@
 </script>
 <template>
   <div
-    class="gl-responsive-table-row"
     :class="{
       'js-child-row environment-child-row': model.isChildren,
       'folder-row': model.isFolder,
     }"
+    class="gl-responsive-table-row"
     role="row">
     <div
       class="table-section section-10"
@@ -446,19 +446,19 @@
       </div>
       <a
         v-if="!model.isFolder"
-        class="environment-name flex-truncate-parent table-mobile-content"
-        :href="environmentPath">
+        :href="environmentPath"
+        class="environment-name flex-truncate-parent table-mobile-content">
         <span
-          class="flex-truncate-child"
           v-tooltip
           :title="model.name"
+          class="flex-truncate-child"
         >{{ model.name }}</span>
       </a>
       <span
         v-else
         class="folder-name"
-        @click="onClickFolder"
-        role="button">
+        role="button"
+        @click="onClickFolder">
 
         <span class="folder-icon">
           <i
@@ -503,11 +503,11 @@
       <span v-if="!model.isFolder && deploymentHasUser">
         by
         <user-avatar-link
-          class="js-deploy-user-container"
           :link-href="deploymentUser.web_url"
           :img-src="deploymentUser.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="deploymentUser.username"
+          class="js-deploy-user-container"
         />
       </span>
     </div>
@@ -518,8 +518,8 @@
     >
       <a
         v-if="shouldRenderBuildName"
-        class="build-link flex-truncate-parent"
         :href="buildPath"
+        class="build-link flex-truncate-parent"
       >
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 8df1b6317e3..947e8c901e9 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -28,16 +28,16 @@
 <template>
   <a
     v-tooltip
-    class="btn monitoring-url d-none d-sm-none d-md-block"
-    data-container="body"
-    rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
+    class="btn monitoring-url d-none d-sm-none d-md-block"
+    data-container="body"
+    rel="noopener noreferrer nofollow"
   >
     <icon
-      name="chart"
       :size="12"
+      name="chart"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 7515d711c50..310835c5ea9 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -39,10 +39,10 @@
 </script>
 <template>
   <button
+    :disabled="isLoading"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
-    :disabled="isLoading"
   >
 
     <span v-if="isLastDeployment">
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 7055f208451..faaaf899a0d 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -54,13 +54,13 @@
 <template>
   <button
     v-tooltip
+    :disabled="isLoading"
+    :title="title"
+    :aria-label="title"
     type="button"
     class="btn stop-env-link d-none d-sm-none d-md-block"
     data-container="body"
     @click="onClick"
-    :disabled="isLoading"
-    :title="title"
-    :aria-label="title"
   >
     <i
       class="fa fa-stop stop-env-icon"
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 0dbbbb75e07..f8e3165f8cd 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -30,15 +30,15 @@
 <template>
   <a
     v-tooltip
-    class="btn terminal-button d-none d-sm-none d-md-block"
-    data-container="body"
     :title="title"
     :aria-label="title"
     :href="terminalPath"
+    class="btn terminal-button d-none d-sm-none d-md-block"
+    data-container="body"
   >
     <icon
-      name="terminal"
       :size="12"
+      name="terminal"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 3da762446c9..b18f02343d6 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -93,8 +93,8 @@
     <div class="top-area">
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
 
       <div
@@ -119,8 +119,8 @@
       @onChangePage="onChangePage"
     >
       <empty-state
-        slot="emptyState"
         v-if="!isLoading && state.environments.length === 0"
+        slot="emptyState"
         :new-path="newEnvironmentPath"
         :help-path="helpPagePath"
         :can-create-environment="canCreateEnvironment"
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 5ef5e347387..5f72a39c5cb 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -39,8 +39,8 @@
 <template>
   <div :class="cssContainerClass">
     <div
-      class="top-area"
       v-if="!isLoading"
+      class="top-area"
     >
 
       <h4 class="js-folder-name environments-folder-name">
@@ -49,8 +49,8 @@
 
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
     </div>
 
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
index 26618af9515..a8eb8d94be3 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
@@ -72,9 +72,9 @@ export default {
           @click="onItemActivated(item.text)">
           <span>
             <span
-              class="filtered-search-history-dropdown-token"
               v-for="(token, index) in item.tokens"
               :key="`dropdown-token-${index}`"
+              class="filtered-search-history-dropdown-token"
             >
               <span class="name">{{ token.prefix }}</span>
               <span class="value">{{ token.suffix }}</span>
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 22eb7bd44c5..1def38bb336 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -216,10 +216,10 @@ export default {
 <template>
   <div>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoading"
       :label="s__('GroupsTree|Loading groups')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <groups-component
       v-if="!isLoading"
@@ -230,10 +230,10 @@ export default {
     />
     <deprecated-modal
       v-show="showModal"
-      kind="warning"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"
       :text="groupLeaveConfirmationMessage"
+      kind="warning"
       @cancel="hideLeaveGroupModal"
       @submit="leaveGroup"
     />
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 7f64a9bd741..efbf2e3a295 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -71,14 +71,14 @@ export default {
 
 <template>
   <li
-    @click.stop="onClickRowGroup"
     :id="groupDomId"
     :class="rowClass"
     class="group-row"
+    @click.stop="onClickRowGroup"
   >
     <div
-      class="group-row-contents"
-      :class="{ 'project-row-contents': !isGroup }">
+      :class="{ 'project-row-contents': !isGroup }"
+      class="group-row-contents">
       <item-actions
         v-if="isGroup"
         :group="group"
@@ -99,8 +99,8 @@ export default {
         />
       </div>
       <div
-        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
         :class="{ 'content-loading': group.isChildrenLoading }"
+        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
       >
         <a
           :href="group.relativePath"
@@ -108,14 +108,14 @@ export default {
         >
           <img
             v-if="hasAvatar"
-            class="avatar s24"
             :src="group.avatarUrl"
+            class="avatar s24"
           />
           <identicon
             v-else
-            size-class="s24"
             :entity-id="group.id"
             :entity-name="group.name"
+            size-class="s24"
           />
         </a>
       </div>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 87065b3d6e3..24eec4901ec 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -54,13 +54,13 @@ export default {
     <a
       v-tooltip
       v-if="group.canLeave"
-      @click.prevent="onLeaveGroup"
       :href="group.leavePath"
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn no-expand">
+      class="leave-group btn no-expand"
+      @click.prevent="onLeaveGroup">
       <icon name="leave"/>
     </a>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 168b4e4af2c..87ab5480c15 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -45,44 +45,44 @@
   <div class="stats">
     <item-stats-value
       v-if="isGroup"
-      css-class="number-subgroups"
-      icon-name="folder"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
+      css-class="number-subgroups"
+      icon-name="folder"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-projects"
-      icon-name="bookmark"
       :title="__('Projects')"
       :value="item.projectCount"
+      css-class="number-projects"
+      icon-name="bookmark"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-users"
-      icon-name="users"
       :title="__('Members')"
       :value="item.memberCount"
+      css-class="number-users"
+      icon-name="users"
     />
     <item-stats-value
       v-if="isProject"
+      :value="item.starCount"
       css-class="project-stars"
       icon-name="star"
-      :value="item.starCount"
     />
     <item-stats-value
-      css-class="item-visibility"
-      tooltip-placement="left"
       :icon-name="visibilityIcon"
       :title="visibilityTooltip"
+      css-class="item-visibility"
+      tooltip-placement="left"
     />
     <div
-      class="last-updated"
       v-if="isProject"
+      class="last-updated"
     >
       <time-ago-tooltip
-        tooltip-placement="bottom"
         :time="item.updatedAt"
+        tooltip-placement="bottom"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index 4d86ac8023c..ef9f2bca76c 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -52,10 +52,10 @@
 <template>
   <span
     v-tooltip
-    data-container="body"
     :data-placement="tooltipPlacement"
     :class="cssClass"
     :title="title"
+    data-container="body"
   >
     <icon :name="iconName" />
     <span
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 6efcad6adea..62697e0ecc3 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -39,12 +39,12 @@ export default {
       <li v-once>
         <a
           v-tooltip
-          data-container="body"
-          data-placement="right"
           :href="goBackUrl"
-          class="ide-sidebar-link"
           :title="s__('IDE|Go back')"
           :aria-label="s__('IDE|Go back')"
+          data-container="body"
+          data-placement="right"
+          class="ide-sidebar-link"
         >
           <icon
             :size="16"
@@ -55,16 +55,16 @@ export default {
       <li>
         <button
           v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.edit
+          }"
+          :title="s__('IDE|Edit')"
+          :aria-label="s__('IDE|Edit')"
           data-container="body"
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-edit-mode"
-          :class="{
-            active: currentActivityView === $options.activityBarViews.edit
-          }"
           @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
-          :title="s__('IDE|Edit')"
-          :aria-label="s__('IDE|Edit')"
         >
           <icon
             name="code"
@@ -74,16 +74,16 @@ export default {
       <li>
         <button
           v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.review
+          }"
+          :title="s__('IDE|Review')"
+          :aria-label="s__('IDE|Review')"
           data-container="body"
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
-          :class="{
-            active: currentActivityView === $options.activityBarViews.review
-          }"
           @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
-          :title="s__('IDE|Review')"
-          :aria-label="s__('IDE|Review')"
         >
           <icon
             name="file-modified"
@@ -93,16 +93,16 @@ export default {
       <li v-show="hasChanges">
         <button
           v-tooltip
+          :class="{
+            active: currentActivityView === $options.activityBarViews.commit
+          }"
+          :title="s__('IDE|Commit')"
+          :aria-label="s__('IDE|Commit')"
           data-container="body"
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"
-          :class="{
-            active: currentActivityView === $options.activityBarViews.commit
-          }"
           @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
-          :title="s__('IDE|Commit')"
-          :aria-label="s__('IDE|Commit')"
         >
           <icon
             name="commit"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index e2b42ab2642..955d9280728 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -91,7 +91,6 @@ export default {
 
 <template>
   <div
-    class="multi-file-commit-form"
     :class="{
       'is-compact': isCompact,
       'is-full': !isCompact
@@ -99,6 +98,7 @@ export default {
     :style="{
       height: componentHeight ? `${componentHeight}px` : null,
     }"
+    class="multi-file-commit-form"
   >
     <transition
       name="commit-form-slide-up"
@@ -108,12 +108,12 @@ export default {
     >
       <div
         v-if="isCompact"
-        class="commit-form-compact"
         ref="compactEl"
+        class="commit-form-compact"
       >
         <button
-          type="button"
           :disabled="!hasChanges"
+          type="button"
           class="btn btn-primary btn-sm btn-block"
           @click="toggleIsSmall"
         >
@@ -126,8 +126,8 @@ export default {
       </div>
       <form
         v-if="!isCompact"
-        @submit.prevent.stop="commitChanges"
         ref="formEl"
+        @submit.prevent.stop="commitChanges"
       >
         <transition name="fade">
           <success-message
@@ -143,8 +143,8 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm float-left"
             :label="__('Commit')"
+            container-class="btn btn-success btn-sm float-left"
             @click="commitChanges"
           />
           <button
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 0ac0af2feaa..40496c80a46 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -66,10 +66,10 @@ export default {
 <template>
   <fieldset class="common-note-form ide-commit-message-field">
     <div
-      class="md-area"
       :class="{
         'is-focused': isFocused
       }"
+      class="md-area"
     >
       <div
         v-once
@@ -92,10 +92,10 @@ export default {
       <div class="ide-commit-message-textarea-container">
         <div class="ide-commit-message-highlights-container">
           <div
-            class="note-textarea highlights monospace"
             :style="{
               transform: `translate3d(0, ${-scrollTop}px, 0)`
             }"
+            class="note-textarea highlights monospace"
           >
             <div
               v-for="(line, index) in allLines"
@@ -113,15 +113,15 @@ export default {
           </div>
         </div>
         <textarea
-          class="note-textarea ide-commit-message-textarea"
-          name="commit-message"
+          ref="textarea"
           :placeholder="__('Write a commit message...')"
           :value="text"
+          class="note-textarea ide-commit-message-textarea"
+          name="commit-message"
           @scroll="handleScroll"
           @input="onInput"
           @focus="updateIsFocused(true)"
           @blur="updateIsFocused(false)"
-          ref="textarea"
         >
         </textarea>
       </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 00f2312ae51..35ab3fd11df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -58,12 +58,12 @@ export default {
       }"
     >
       <input
-        type="radio"
-        name="commit-action"
         :value="value"
-        @change="updateCommitAction($event.target.value)"
         :checked="commitAction === value"
         :disabled="disabled"
+        type="radio"
+        name="commit-action"
+        @change="updateCommitAction($event.target.value)"
       />
       <span class="prepend-left-10">
         <span
@@ -80,9 +80,9 @@ export default {
       class="ide-commit-new-branch"
     >
       <input
+        :placeholder="newBranchName"
         type="text"
         class="form-control monospace"
-        :placeholder="newBranchName"
         @input="updateBranchName($event.target.value)"
       />
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index 52dce8412ab..a786ec80ac2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -29,30 +29,30 @@ export default {
   >
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank append-right-5"
       :aria-label="__('Stage changes')"
       :title="__('Stage changes')"
+      type="button"
+      class="btn btn-blank append-right-5"
       data-container="body"
       @click.stop="stageChange(path)"
     >
       <icon
-        name="mobile-issue-close"
         :size="12"
+        name="mobile-issue-close"
       />
     </button>
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank"
       :aria-label="__('Discard changes')"
       :title="__('Discard changes')"
+      type="button"
+      class="btn btn-blank"
       data-container="body"
       @click.stop="discardFileChanges(path)"
     >
       <icon
-        name="remove"
         :size="12"
+        name="remove"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
index 123d60da47e..34b366f63ac 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -29,16 +29,16 @@ export default {
   >
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank"
       :aria-label="__('Unstage changes')"
       :title="__('Unstage changes')"
+      type="button"
+      class="btn btn-blank"
       data-container="body"
       @click="unstageChange(path)"
     >
       <icon
-        name="history"
         :size="12"
+        name="history"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index b9af4d27145..95598c9aca6 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -44,11 +44,11 @@ export default {
       <ul>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.mr)"
             :class="{
               'is-active': viewer === $options.viewerTypes.mr,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.mr)"
           >
             <strong class="dropdown-menu-inner-title">
               {{ mergeReviewLine }}
@@ -60,11 +60,11 @@ export default {
         </li>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.diff)"
             :class="{
               'is-active': viewer === $options.viewerTypes.diff,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.diff)"
           >
             <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
             <span class="dropdown-menu-inner-content">
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
index cf3316a8179..e24fe5bbccb 100644
--- a/app/assets/javascripts/ide/components/external_link.vue
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -26,15 +26,15 @@ export default {
   >
     <a
       :href="file.permalink"
-      target="_blank"
       :title="s__('IDE|Open in file view')"
+      target="_blank"
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">Open in file view</span>
       <icon
+        :size="16"
         name="external-link"
         css-classes="vertical-align-middle space-right"
-        :size="16"
       />
     </a>
   </div>
diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index cabb3f59b17..0ba33053717 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -173,38 +173,38 @@ export default {
     >
       <div class="dropdown-input">
         <input
+          ref="searchInput"
+          :placeholder="__('Search files')"
+          v-model="searchText"
           type="search"
           class="dropdown-input-field"
-          :placeholder="__('Search files')"
           autocomplete="off"
-          v-model="searchText"
-          ref="searchInput"
           @keydown="onKeydown($event)"
           @keyup="onKeyup($event)"
         />
         <i
-          aria-hidden="true"
-          class="fa fa-search dropdown-input-search"
           :class="{
             hidden: showClearInputButton
           }"
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search"
         ></i>
         <i
-          role="button"
           :aria-label="__('Clear search input')"
-          class="fa fa-times dropdown-input-clear"
           :class="{
             show: showClearInputButton
           }"
+          role="button"
+          class="fa fa-times dropdown-input-clear"
           @click="clearSearchInput"
         ></i>
       </div>
       <div>
         <virtual-list
+          ref="virtualScrollList"
           :size="listHeight"
           :remain="listShowCount"
           wtag="ul"
-          ref="virtualScrollList"
         >
           <template v-if="filteredBlobsLength">
             <li
@@ -212,11 +212,11 @@ export default {
               :key="file.key"
             >
               <item
-                class="disable-hover"
                 :file="file"
                 :search-text="searchText"
                 :focused="index === focusedIndex"
                 :index="index"
+                class="disable-hover"
                 @click="openFile"
                 @mouseover="onMouseOver"
                 @mousemove="onMouseMove"
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index d4427420207..a4cf3edb981 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -59,11 +59,11 @@ export default {
 
 <template>
   <button
-    type="button"
-    class="diff-changed-file"
     :class="{
       'is-focused': focused,
     }"
+    type="button"
+    class="diff-changed-file"
     @click.prevent="clickRow"
     @mouseover="mouseOverRow"
     @mousemove="mouseMove"
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index f5f832521c5..f5f7f967a92 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -93,8 +93,8 @@ export default {
             :merge-request-id="currentMergeRequestId"
           />
           <repo-editor
-            class="multi-file-edit-pane-content"
             :file="activeFile"
+            class="multi-file-edit-pane-content"
           />
         </template>
         <template
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 99fa2465a84..f9978762c45 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -36,8 +36,8 @@ export default {
 <template>
   <ide-tree-list
     :viewer-type="viewer"
-    header-class="ide-review-header"
     :disable-action-dropdown="true"
+    header-class="ide-review-header"
   >
     <template
       slot="header"
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 1dc2170edde..21906674c4b 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -115,17 +115,17 @@ export default {
     <div class="multi-file-commit-panel-inner">
       <template v-if="loading">
         <div
-          class="multi-file-loading-container"
           v-for="n in 3"
           :key="n"
+          class="multi-file-loading-container"
         >
           <skeleton-loading-container />
         </div>
       </template>
       <template v-else>
         <div
-          class="context-header ide-context-header dropdown"
           ref="mergeRequestDropdown"
+          class="context-header ide-context-header dropdown"
         >
           <button
             type="button"
@@ -136,18 +136,18 @@ export default {
               class="avatar-container s40 project-avatar"
             >
               <project-avatar-image
-                class="avatar-container project-avatar"
                 :link-href="currentProject.path"
                 :img-src="currentProject.avatar_url"
                 :img-alt="currentProject.name"
                 :img-size="40"
+                class="avatar-container project-avatar"
               />
             </div>
             <identicon
               v-else
-              size-class="s40"
               :entity-id="currentProject.id"
               :entity-name="currentProject.name"
+              size-class="s40"
             />
             <div class="ide-sidebar-project-title">
               <div class="sidebar-context-title">
@@ -155,11 +155,11 @@ export default {
               </div>
               <div class="d-flex">
                 <div
-                  v-if="currentBranchId"
-                  class="sidebar-context-title ide-sidebar-branch-title"
-                  ref="branchId"
                   v-tooltip
+                  v-if="currentBranchId"
+                  ref="branchId"
                   :title="branchTooltipTitle"
+                  class="sidebar-context-title ide-sidebar-branch-title"
                 >
                   <icon
                     name="branch"
@@ -168,10 +168,10 @@ export default {
                 </div>
                 <div
                   v-if="currentMergeRequestId"
-                  class="sidebar-context-title ide-sidebar-branch-title"
                   :class="{
                     'prepend-left-8': currentBranchId
                   }"
+                  class="sidebar-context-title ide-sidebar-branch-title"
                 >
                   <icon
                     name="git-merge"
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index e40f137d998..0582ad32e92 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -75,22 +75,22 @@ export default {
 <template>
   <footer class="ide-status-bar">
     <div
-      class="ide-status-branch"
       v-if="lastCommit && lastCommitFormatedAge"
+      class="ide-status-branch"
     >
       <span
-        class="ide-status-pipeline"
         v-if="latestPipeline && latestPipeline.details"
+        class="ide-status-pipeline"
       >
         <ci-icon
-          :status="latestPipeline.details.status"
           v-tooltip
+          :status="latestPipeline.details.status"
           :title="latestPipeline.details.status.text"
         />
         Pipeline
         <a
-          class="monospace"
-          :href="latestPipeline.details.status.details_path">#{{ latestPipeline.id }}</a>
+          :href="latestPipeline.details.status.details_path"
+          class="monospace">#{{ latestPipeline.id }}</a>
         {{ latestPipeline.details.status.text }}
         for
       </span>
@@ -100,18 +100,18 @@ export default {
       />
       <a
         v-tooltip
-        class="commit-sha"
         :title="lastCommit.message"
         :href="getCommitPath(lastCommit.short_id)"
+        class="commit-sha"
       >{{ lastCommit.short_id }}</a>
       by
       {{ lastCommit.author_name }}
       <time
         v-tooltip
-        data-placement="top"
-        data-container="body"
         :datetime="lastCommit.committed_date"
         :title="tooltipTitle(lastCommit.committed_date)"
+        data-placement="top"
+        data-container="body"
       >
         {{ lastCommitFormatedAge }}
       </time>
@@ -129,8 +129,8 @@ export default {
       {{ file.eol }}
     </div>
     <div
-      class="ide-status-file"
-      v-if="file && !file.binary">
+      v-if="file && !file.binary"
+      class="ide-status-file">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
     <div
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index e64a09fcc90..0df99798d21 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -50,17 +50,17 @@ export default {
   >
     <template v-if="showLoading">
       <div
-        class="multi-file-loading-container"
         v-for="n in 3"
         :key="n"
+        class="multi-file-loading-container"
       >
         <skeleton-loading-container />
       </div>
     </template>
     <template v-else>
       <header
-        class="ide-tree-header"
         :class="headerClass"
+        class="ide-tree-header"
       >
         <slot name="header"></slot>
       </header>
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index 4d234a36fe5..c7098c88934 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -93,10 +93,10 @@ export default {
         <a
           v-tooltip
           :title="__('Show complete raw log')"
+          :href="detailJob.rawPath"
           data-placement="top"
           data-container="body"
           class="controllers-buttons"
-          :href="detailJob.rawPath"
           target="_blank"
         >
           <i
@@ -105,20 +105,20 @@ export default {
           ></i>
         </a>
         <scroll-button
-          direction="up"
           :disabled="isScrolledToTop"
+          direction="up"
           @click="scrollUp"
         />
         <scroll-button
-          direction="down"
           :disabled="isScrolledToBottom"
+          direction="down"
           @click="scrollDown"
         />
       </div>
     </div>
     <pre
-      class="build-trace mb-0 h-100"
       ref="buildTrace"
+      class="build-trace mb-0 h-100"
       @scroll="scrollBuildLog"
     >
       <code
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
index def6bac3157..7e24974f7e5 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/description.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -24,10 +24,10 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <ci-icon
-      class="d-flex"
       :status="job.status"
       :borderless="true"
       :size="24"
+      class="d-flex"
     />
     <span class="prepend-left-8">
       {{ job.name }}
@@ -38,8 +38,8 @@ export default {
       >
         {{ jobId }}
         <icon
-          name="external-link"
           :size="12"
+          name="external-link"
         />
       </a>
     </span>
diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
index 4e19e6e9c84..103a407987f 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
@@ -47,15 +47,15 @@ export default {
 <template>
   <div
     v-tooltip
+    :title="tooltipTitle"
     class="controllers-buttons"
     data-container="body"
     data-placement="top"
-    :title="tooltipTitle"
   >
     <button
+      :disabled="disabled"
       class="btn-scroll btn-transparent btn-blank"
       type="button"
-      :disabled="disabled"
       @click="clickedScroll"
     >
       <icon
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index c8e621504f0..7f4695a0451 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -27,8 +27,8 @@ export default {
 <template>
   <div class="ide-job-item">
     <job-description
-      class="append-right-default"
       :job="job"
+      class="append-right-default"
     />
     <div class="ml-auto align-self-center">
       <button
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index b1428f885fb..15e881b7bc8 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -60,10 +60,10 @@ export default {
     class="ide-stage card prepend-top-default"
   >
     <div
-      class="card-header"
       :class="{
         'border-bottom-0': stage.isCollapsed
       }"
+      class="card-header"
       @click="toggleCollapsed"
     >
       <ci-icon
@@ -72,10 +72,10 @@ export default {
       />
       <strong
         v-tooltip="showTooltip"
+        ref="stageTitle"
         :title="showTooltip ? stage.name : null"
         data-container="body"
         class="prepend-left-8 ide-stage-title"
-        ref="stageTitle"
       >
         {{ stage.name }}
       </strong>
@@ -93,8 +93,8 @@ export default {
       />
     </div>
     <div
-      class="card-body"
       v-show="!stage.isCollapsed"
+      class="card-body"
     >
       <loading-icon
         v-if="showLoadingIcon"
diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
index 8cc8345db2e..4b9824bf04b 100644
--- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
@@ -42,8 +42,8 @@ export default {
           </span>
         </template>
         <list
-          type="created"
           :empty-text="__('You have not created any merge requests')"
+          type="created"
         />
       </tab>
       <tab>
@@ -54,8 +54,8 @@ export default {
           </span>
         </template>
         <list
-          type="assigned"
           :empty-text="__('You do not have any assigned merge requests')"
+          type="assigned"
         />
       </tab>
     </tabs>
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index b50fc8a3dbb..4e18376bd48 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -47,8 +47,8 @@ export default {
     <span class="d-flex append-right-default ide-merge-request-current-icon">
       <icon
         v-if="isActive"
-        name="mobile-issue-close"
         :size="18"
+        name="mobile-issue-close"
       />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 5896e3a147d..19d3e48ee10 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -80,12 +80,12 @@ export default {
   <div>
     <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
       <input
-        type="search"
-        class="dropdown-input-field"
+        ref="searchInput"
         :placeholder="__('Search merge requests')"
         v-model="search"
+        type="search"
+        class="dropdown-input-field"
         @input="searchMergeRequests"
-        ref="searchInput"
       />
       <i
         aria-hidden="true"
@@ -94,8 +94,8 @@ export default {
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <loading-icon
-        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
         v-if="isLoading"
+        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
         size="2"
       />
       <ul
diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue
index 179a589d1ac..821be319cce 100644
--- a/app/assets/javascripts/ide/components/mr_file_icon.vue
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -14,10 +14,10 @@ export default {
 
 <template>
   <icon
-    name="git-merge"
     v-tooltip
     :title="__('Part of merge request changes')"
-    css-classes="append-right-8"
     :size="12"
+    name="git-merge"
+    css-classes="append-right-8"
   />
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index f0b29702497..1e398d7e1aa 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -55,10 +55,10 @@ export default {
 <template>
   <div class="ide-new-btn">
     <div
-      class="dropdown"
       :class="{
         show: dropdownOpen,
       }"
+      class="dropdown"
     >
       <button
         type="button"
@@ -67,19 +67,19 @@ export default {
         @click.stop="openDropdown()"
       >
         <icon
-          name="plus"
           :size="12"
+          name="plus"
           css-classes="float-left"
         />
         <icon
-          name="arrow-down"
           :size="12"
+          name="arrow-down"
           css-classes="float-left"
         />
       </button>
       <ul
-        class="dropdown-menu dropdown-menu-right"
         ref="dropdownMenu"
+        class="dropdown-menu dropdown-menu-right"
       >
         <li>
           <a
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index dd2800179ff..1e9668d5154 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -71,18 +71,18 @@ export default {
   >
     <form
       slot="body"
-      @submit.prevent="createEntryInStore"
       class="form-group row"
+      @submit.prevent="createEntryInStore"
     >
       <label class="label-light col-form-label col-sm-3">
         {{ __('Name') }}
       </label>
       <div class="col-sm-9">
         <input
+          ref="fieldName"
+          v-model="entryName"
           type="text"
           class="form-control"
-          v-model="entryName"
-          ref="fieldName"
         />
       </div>
     </form>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index c165af5ce52..1814924be39 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -67,9 +67,9 @@
     </a>
     <input
       id="file-upload"
+      ref="fileUpload"
       type="file"
       class="hidden"
-      ref="fileUpload"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index dd7fc8f1e01..dedc2988618 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -44,10 +44,10 @@ export default {
   >
     <resizable-panel
       v-if="rightPane"
-      class="multi-file-commit-panel-inner"
       :collapsible="false"
       :initial-width="350"
       :min-size="350"
+      class="multi-file-commit-panel-inner"
       side="right"
     >
       <component :is="rightPane" />
@@ -57,13 +57,13 @@ export default {
         <li>
           <button
             v-tooltip
-            data-container="body"
-            data-placement="left"
             :title="__('Pipelines')"
-            class="ide-sidebar-link is-right"
             :class="{
               active: pipelinesActive
             }"
+            data-container="body"
+            data-placement="left"
+            class="ide-sidebar-link is-right"
             type="button"
             @click="clickTab($event, $options.rightSidebarViews.pipelines)"
           >
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 06455fac439..4d29e9f8060 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -75,8 +75,8 @@ export default {
           >
             #{{ latestPipeline.id }}
             <icon
-              name="external-link"
               :size="12"
+              name="external-link"
             />
           </a>
         </span>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index c5092d8e04d..0b696596f77 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -72,8 +72,8 @@ export default {
     <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
-      kind="success"
       :title="__('Branch has changed')"
+      kind="success"
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
@@ -85,22 +85,22 @@ export default {
       v-if="showStageUnstageArea"
     >
       <commit-files-list
-        class="is-first"
-        icon-name="unstaged"
         :title="__('Unstaged')"
         :file-list="changedFiles"
-        action="stageAllChanges"
         :action-btn-text="__('Stage all')"
+        class="is-first"
+        icon-name="unstaged"
+        action="stageAllChanges"
         item-action-component="stage-button"
       />
       <commit-files-list
-        icon-name="staged"
         :title="__('Staged')"
         :file-list="stagedFiles"
-        action="unstageAllChanges"
         :action-btn-text="__('Unstage all')"
-        item-action-component="unstage-button"
         :staged-list="true"
+        icon-name="staged"
+        action="unstageAllChanges"
+        item-action-component="unstage-button"
       />
     </template>
     <empty-state
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index d365745d78b..a726eae3a96 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -190,8 +190,8 @@ export default {
   >
     <div class="ide-mode-tabs clearfix" >
       <ul
-        class="nav-links float-left"
         v-if="!shouldHideEditor && isEditModeActive"
+        class="nav-links float-left"
       >
         <li :class="editTabCSS">
           <a
@@ -224,10 +224,10 @@ export default {
     <div
       v-show="!shouldHideEditor && file.viewMode === 'edit'"
       ref="editor"
-      class="multi-file-editor-holder"
       :class="{
         'is-readonly': isCommitModeActive,
       }"
+      class="multi-file-editor-holder"
     >
     </div>
     <content-viewer
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index f56aeced806..c34547fcc60 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -120,17 +120,17 @@ export default {
 <template>
   <div>
     <div
-      class="file"
       :class="fileClass"
-      @click="clickFile"
+      class="file"
       role="button"
+      @click="clickFile"
     >
       <div
         class="file-name"
       >
         <span
-          class="ide-file-name str-truncated"
           :style="levelIndentation"
+          class="ide-file-name str-truncated"
         >
           <file-icon
             :file-name="file.name"
@@ -156,10 +156,10 @@ export default {
             <icon
               v-tooltip
               :title="folderChangesTooltip"
+              :size="12"
               data-container="body"
               data-placement="right"
               name="file-modified"
-              :size="12"
               css-classes="prepend-left-5 multi-file-modified"
             />
           </span>
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index 97589e116c5..76a3333be50 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -26,8 +26,8 @@ export default {
 
 <template>
   <span
-    v-if="file.file_lock"
     v-tooltip
+    v-if="file.file_lock"
     :title="lockTooltip"
     data-container="body"
   >
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 3e47da88050..7a5ede82253 100644
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -33,8 +33,8 @@
 
       <td class="d-none d-sm-block">
         <skeleton-loading-container
-          class="animation-container-right"
           :small="true"
+          class="animation-container-right"
         />
       </td>
     </template>
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index fb26b973236..1ad52c1bd83 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -76,8 +76,8 @@ export default {
     @mouseout="mouseOutTab"
   >
     <div
-      class="multi-file-tab"
       :title="tab.url"
+      class="multi-file-tab"
     >
       <file-icon
         :file-name="tab.name"
@@ -89,16 +89,16 @@ export default {
       />
     </div>
     <button
+      :aria-label="closeLabel"
+      :disabled="tab.pending"
       type="button"
       class="multi-file-tab-close"
       @click.stop.prevent="closeFile(tab)"
-      :aria-label="closeLabel"
-      :disabled="tab.pending"
     >
       <icon
         v-if="!showChangedIcon"
-        name="close"
         :size="12"
+        name="close"
       />
       <changed-file-icon
         v-else
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 99e51097e12..c12a63e26be 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -52,8 +52,8 @@ export default {
 <template>
   <div class="multi-file-tabs">
     <ul
-      class="list-unstyled append-bottom-0"
       ref="tabsScroller"
+      class="list-unstyled append-bottom-0"
     >
       <repo-tab
         v-for="tab in files"
diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue
index 5ea2a2f6825..7277fcb7617 100644
--- a/app/assets/javascripts/ide/components/resizable_panel.vue
+++ b/app/assets/javascripts/ide/components/resizable_panel.vue
@@ -63,11 +63,11 @@ export default {
 
 <template>
   <div
-    class="multi-file-commit-panel"
     :class="{
       'is-collapsed': collapsed && collapsible,
     }"
     :style="panelStyle"
+    class="multi-file-commit-panel"
     @click="toggleFullbarCollapsed"
   >
     <slot></slot>
@@ -77,9 +77,9 @@ export default {
       :start-size="initialWidth"
       :min-size="minSize"
       :max-size="$options.maxSize"
+      :side="side === 'right' ? 'left' : 'right'"
       @resize-start="setResizingStatus(true)"
       @resize-end="setResizingStatus(false)"
-      :side="side === 'right' ? 'left' : 'right'"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index ae577e04a56..1174177f561 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -110,25 +110,25 @@
 <template>
   <div
     v-if="descriptionHtml"
-    class="description"
     :class="{
       'js-task-list-container': canUpdate
     }"
+    class="description"
   >
     <div
-      class="wiki"
+      ref="gfm-content"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
-      v-html="descriptionHtml"
-      ref="gfm-content">
+      class="wiki"
+      v-html="descriptionHtml">
     </div>
     <textarea
-      class="hidden js-task-list-field"
       v-if="descriptionText"
       v-model="descriptionText"
       :data-update-url="updateUrl"
+      class="hidden js-task-list-field"
     >
     </textarea>
 
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 7ef5e679881..8cb0ab22bfb 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -51,16 +51,16 @@
 <template>
   <div class="prepend-top-default append-bottom-default clearfix">
     <button
-      class="btn btn-save float-left"
       :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
-      type="submit"
       :disabled="formState.updateLoading || !isSubmitEnabled"
+      class="btn btn-save float-left"
+      type="submit"
       @click.prevent="updateIssuable">
       Save changes
       <i
+        v-if="formState.updateLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="formState.updateLoading">
+        aria-hidden="true">
       </i>
     </button>
     <button
@@ -71,16 +71,16 @@
     </button>
     <button
       v-if="shouldShowDeleteButton"
-      class="btn btn-danger float-right append-right-default"
       :class="{ disabled: deleteLoading }"
-      type="button"
       :disabled="deleteLoading"
+      class="btn btn-danger float-right append-right-default"
+      type="button"
       @click="deleteIssuable">
       Delete
       <i
+        v-if="deleteLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="deleteLoading">
+        aria-hidden="true">
       </i>
     </button>
   </div>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 01097b5b35e..5ff5b1630b1 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -37,16 +37,16 @@
     Edited
     <time-ago-tooltip
       v-if="updatedAt"
-      tooltip-placement="bottom"
       :time="updatedAt"
+      tooltip-placement="bottom"
     />
     <span
       v-if="hasUpdatedBy"
     >
       by
       <a
-        class="author_link"
         :href="updatedByPath"
+        class="author_link"
       >
         <span>{{ updatedByName }}</span>
       </a>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index d9fa2764d65..a4556e66046 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -52,12 +52,12 @@
     >
       <textarea
         id="issue-description"
+        ref="textarea"
+        slot="textarea"
+        v-model="formState.description"
         class="note-textarea js-gfm-input js-autosize markdown-area"
         data-supports-quick-actions="false"
         aria-label="Description"
-        v-model="formState.description"
-        ref="textarea"
-        slot="textarea"
         placeholder="Write a comment or drag your files here..."
         @keydown.meta.enter="updateIssuable"
         @keydown.ctrl.enter="updateIssuable">
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index 7db0488e306..e90d9fad94e 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -48,15 +48,15 @@
     class="dropdown js-issuable-selector-wrap"
     data-issuable-type="issue">
     <button
-      class="dropdown-menu-toggle js-issuable-selector"
-      type="button"
       ref="toggle"
-      data-field-name="issuable_template"
-      data-selected="null"
-      data-toggle="dropdown"
       :data-namespace-path="projectNamespace"
       :data-project-path="projectPath"
-      :data-data="issuableTemplatesJson">
+      :data-data="issuableTemplatesJson"
+      class="dropdown-menu-toggle js-issuable-selector"
+      type="button"
+      data-field-name="issuable_template"
+      data-selected="null"
+      data-toggle="dropdown">
       <span class="dropdown-toggle-text">
         Choose a template
       </span>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index c3abb9fd9d5..7d1526a64b4 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -21,11 +21,11 @@
     </label>
     <input
       id="issuable-title"
+      v-model="formState.title"
       class="form-control"
       type="text"
       placeholder="Title"
       aria-label="Title"
-      v-model="formState.title"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable" />
   </fieldset>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index ab8bd34762f..5bfc072e3da 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -72,8 +72,8 @@
     <locked-warning v-if="formState.lockedWarningVisible" />
     <div class="row">
       <div
-        class="col-sm-4 col-lg-3"
-        v-if="hasIssuableTemplates">
+        v-if="hasIssuableTemplates"
+        class="col-sm-4 col-lg-3">
         <description-template
           :form-state="formState"
           :issuable-templates="issuableTemplates"
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index aec890a2ff6..12101c0daa5 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -67,11 +67,11 @@
 <template>
   <div class="title-container">
     <h2
-      class="title"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
+      class="title"
       v-html="titleHtml"
     >
     </h2>
@@ -80,11 +80,11 @@
       v-if="showInlineEditButton && canUpdate"
       type="button"
       class="btn btn-default btn-edit btn-svg js-issuable-edit"
-      v-html="pencilIcon"
       title="Edit title and description"
       data-placement="bottom"
       data-container="body"
       @click="edit"
+      v-html="pencilIcon"
     >
     </button>
   </div>
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 5704d753277..1e7f4b2c3f7 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -74,13 +74,13 @@ export default {
       <ci-header
         v-if="shouldRenderContent"
         :status="status"
-        item-name="Job"
         :item-id="job.id"
         :time="headerTime"
         :user="job.user"
         :actions="actions"
         :has-sidebar-button="true"
         :should-render-triggered-label="jobStarted"
+        item-name="Job"
       />
       <loading-icon
         v-if="isLoading"
diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
index 8f3c66b0cbe..d2adf628050 100644
--- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
@@ -101,8 +101,8 @@ export default {
         {{ __('Retry') }}
       </a>
       <button
-        type="button"
         :aria-label="__('Toggle Sidebar')"
+        type="button"
         class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
       >
         <i
@@ -114,20 +114,20 @@ export default {
     </div>
     <template v-if="shouldRenderContent">
       <div
-        class="block retry-link"
         v-if="job.retry_path || job.new_issue_path"
+        class="block retry-link"
       >
         <a
           v-if="job.new_issue_path"
-          class="js-new-issue btn btn-new btn-inverted"
           :href="job.new_issue_path"
+          class="js-new-issue btn btn-new btn-inverted"
         >
           {{ __('New issue') }}
         </a>
         <a
           v-if="canUserRetry"
-          class="js-retry-job btn btn-inverted-secondary"
           :href="job.retry_path"
+          class="js-retry-job btn btn-inverted-secondary"
           data-method="post"
           rel="nofollow"
         >
@@ -136,8 +136,8 @@ export default {
       </div>
       <div :class="{block : renderBlock }">
         <p
-          class="build-detail-row js-job-mr"
           v-if="job.merge_request"
+          class="build-detail-row js-job-mr"
         >
           <span class="build-light-text">
             {{ __('Merge Request:') }}
@@ -148,51 +148,51 @@ export default {
         </p>
 
         <detail-row
-          class="js-job-duration"
           v-if="job.duration"
-          title="Duration"
           :value="duration"
+          class="js-job-duration"
+          title="Duration"
         />
         <detail-row
-          class="js-job-finished"
           v-if="job.finished_at"
-          title="Finished"
           :value="timeFormated(job.finished_at)"
+          class="js-job-finished"
+          title="Finished"
         />
         <detail-row
-          class="js-job-erased"
           v-if="job.erased_at"
-          title="Erased"
           :value="timeFormated(job.erased_at)"
+          class="js-job-erased"
+          title="Erased"
         />
         <detail-row
-          class="js-job-queued"
           v-if="job.queued"
-          title="Queued"
           :value="queued"
+          class="js-job-queued"
+          title="Queued"
         />
         <detail-row
-          class="js-job-timeout"
           v-if="hasTimeout"
-          title="Timeout"
           :help-url="runnerHelpUrl"
           :value="timeout"
+          class="js-job-timeout"
+          title="Timeout"
         />
         <detail-row
-          class="js-job-runner"
           v-if="job.runner"
-          title="Runner"
           :value="runnerId"
+          class="js-job-runner"
+          title="Runner"
         />
         <detail-row
-          class="js-job-coverage"
           v-if="job.coverage"
-          title="Coverage"
           :value="coverage"
+          class="js-job-coverage"
+          title="Coverage"
         />
         <p
-          class="build-detail-row js-job-tags"
           v-if="job.tags.length"
+          class="build-detail-row js-job-tags"
         >
           <span class="build-light-text">
             {{ __('Tags:') }}
@@ -210,8 +210,8 @@ export default {
           class="btn-group prepend-top-5"
           role="group">
           <a
-            class="js-cancel-job btn btn-sm btn-default"
             :href="job.cancel_path"
+            class="js-cancel-job btn btn-sm btn-default"
             data-method="post"
             rel="nofollow"
           >
@@ -221,8 +221,8 @@ export default {
       </div>
     </template>
     <loading-icon
-      class="prepend-top-10"
       v-if="isLoading"
+      class="prepend-top-10"
       size="2"
     />
   </div>
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index 2cb238529aa..e4ed8111824 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -11,9 +11,18 @@ import { __ } from '~/locale';
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
     props: {
-      file: Object,
-      onCancelDiscardConfirmation: Function,
-      onAcceptDiscardConfirmation: Function
+      file: {
+        type: Object,
+        required: true,
+      },
+      onCancelDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
+      onAcceptDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
     },
     data() {
       return {
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
index 56d6678e1bd..7f078d420c4 100644
--- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
@@ -6,9 +6,12 @@ import Vue from 'vue';
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.inlineConflictLines = Vue.extend({
-    props: {
-      file: Object
-    },
     mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index 0fc4a13450a..b38ee845fe5 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -6,10 +6,13 @@ import Vue from 'vue';
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({
-    props: {
-      file: Object
-    },
     mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
     template: `
       <table>
         <tr class="line_holder parallel" v-for="section in file.parallelLines">
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index c77f451c2d3..82b9a4b1adb 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -107,8 +107,8 @@ export default {
     <div class="state-button">
       <a
         v-if="currentState.buttonPath"
-        class="btn btn-success"
         :href="currentState.buttonPath"
+        class="btn btn-success"
       >
         {{ currentState.buttonText }}
       </a>
@@ -116,8 +116,8 @@ export default {
     <div class="state-button">
       <a
         v-if="currentState.secondaryButtonPath"
-        class="btn"
         :href="currentState.secondaryButtonPath"
+        class="btn"
       >
         {{ currentState.secondaryButtonText }}
       </a>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 503ee1ce3d1..20400154100 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -241,16 +241,16 @@ export default {
       </div>
     </div>
     <div
-      class="prometheus-svg-container"
       :style="paddingBottomRootSvg"
+      class="prometheus-svg-container"
     >
       <svg
-        :viewBox="outerViewBox"
         ref="baseSvg"
+        :viewBox="outerViewBox"
       >
         <g
-          class="x-axis"
           :transform="axisTransform"
+          class="x-axis"
         />
         <g
           class="y-axis"
@@ -265,9 +265,9 @@ export default {
           :unit-of-display="unitOfDisplay"
         />
         <svg
-          class="graph-data"
-          :viewBox="innerViewBox"
           ref="graphData"
+          :viewBox="innerViewBox"
+          class="graph-data"
         >
           <graph-path
             v-for="(path, index) in timeSeries"
@@ -287,11 +287,11 @@ export default {
             :graph-height-offset="graphHeightOffset"
           />
           <rect
-            class="prometheus-graph-overlay"
+            ref="graphOverlay"
             :width="(graphWidth - 70)"
             :height="(graphHeight - 100)"
+            class="prometheus-graph-overlay"
             transform="translate(-5, 20)"
-            ref="graphOverlay"
             @mousemove="handleMouseOverGraph($event)"
           />
         </svg>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index fc4b3689dfd..8a604a51eb2 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -92,48 +92,48 @@ export default {
 <template>
   <g class="axis-label-container">
     <line
+      :y1="yPosition"
+      :x2="graphWidth + 20"
+      :y2="yPosition"
       class="label-x-axis-line"
       stroke="#000000"
       stroke-width="1"
       x1="10"
-      :y1="yPosition"
-      :x2="graphWidth + 20"
-      :y2="yPosition"
     />
     <line
+      :x2="10"
+      :y2="yPosition"
       class="label-y-axis-line"
       stroke="#000000"
       stroke-width="1"
       x1="10"
       y1="0"
-      :x2="10"
-      :y2="yPosition"
     />
     <rect
-      class="rect-axis-text"
       :transform="rectTransform"
       :width="yLabelWidth"
       :height="yLabelHeight"
+      class="rect-axis-text"
     />
     <text
+      ref="ylabel"
+      :transform="textTransform"
       class="label-axis-text y-label-text"
       text-anchor="middle"
-      :transform="textTransform"
-      ref="ylabel"
     >
       {{ yAxisLabelSentenceCase }}
     </text>
     <rect
-      class="rect-axis-text"
       :x="xPosition + 60"
       :y="graphHeight - 80"
+      class="rect-axis-text"
       width="35"
       height="50"
     />
     <text
-      class="label-axis-text x-label-text"
       :x="xPosition + 60"
       :y="yPosition"
+      class="label-axis-text x-label-text"
       dy=".35em"
     >
       {{ timeString }}
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 4012191ceb9..a7289ed53e8 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -33,18 +33,18 @@ export default {
       :key="index"
       :transform="transformDeploymentGroup(deployment)">
       <rect
+        :height="calculatedHeight"
         x="0"
         y="0"
-        :height="calculatedHeight"
         width="3"
         fill="url(#shadow-gradient)"
       />
       <line
+        :y2="calculatedHeight"
         class="deployment-line"
         x1="0"
         y1="0"
         x2="0"
-        :y2="calculatedHeight"
         stroke="#000"
       />
     </g>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 8a771107de8..282c5c24384 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -117,13 +117,13 @@ export default {
 
 <template>
   <div
-    class="prometheus-graph-cursor"
     :style="cursorStyle"
+    class="prometheus-graph-cursor"
   >
     <div
       v-if="showFlagContent"
-      class="prometheus-graph-flag popover"
       :class="flagOrientation"
+      class="prometheus-graph-flag popover"
     >
       <div class="arrow"></div>
       <div class="popover-title">
@@ -139,8 +139,8 @@ export default {
       >
         <div>
           <icon
-            name="commit"
             :size="12"
+            name="commit"
           />
           <a :href="deploymentFlagData.commitUrl">
             {{ deploymentFlagData.sha.slice(0, 8) }}
@@ -150,8 +150,8 @@ export default {
           v-if="deploymentFlagData.tag"
         >
           <icon
-            name="label"
             :size="12"
+            name="label"
           />
           <a :href="deploymentFlagData.tagUrl">
             {{ deploymentFlagData.ref }}
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index da9280cf1f1..3276f3a1ceb 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -31,8 +31,8 @@ export default {
     <table class="prometheus-table">
       <tr
         v-for="(series, index) in timeSeries"
-        :key="index"
         v-if="series.shouldRenderLegend"
+        :key="index"
         :class="isStable(series)"
       >
         <td>
@@ -40,11 +40,11 @@ export default {
         </td>
         <track-line :track="series" />
         <td
-          class="legend-metric-title"
-          v-if="timeSeries.length > 1">
+          v-if="timeSeries.length > 1"
+          class="legend-metric-title">
           <track-info
-            :track="series"
-            v-if="series.metricTag" />
+            v-if="series.metricTag"
+            :track="series" />
           <track-info
             v-else
             :track="series">
@@ -62,8 +62,8 @@ export default {
             :key="`track-line-${trackIndex}`"/>
           <td :key="`track-info-${trackIndex}`">
             <track-info
-              class="legend-metric-title"
-              :track="track" />
+              :track="track"
+              class="legend-metric-title" />
           </td>
         </template>
       </tr>
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
index 52f8aa2ee3f..a9b7ce586ce 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -44,26 +44,26 @@ export default {
 <template>
   <g transform="translate(-5, 20)">
     <circle
-      class="circle-path"
+      v-if="showDot"
       :cx="currentCoordinates.currentX"
       :cy="currentCoordinates.currentY"
       :fill="lineColor"
       :stroke="lineColor"
+      class="circle-path"
       r="3"
-      v-if="showDot"
     />
     <path
-      class="metric-area"
       :d="generatedAreaPath"
       :fill="areaColor"
+      class="metric-area"
     />
     <path
-      class="metric-line"
       :d="generatedLinePath"
       :stroke="lineColor"
+      :stroke-dasharray="strokeDashArray"
+      class="metric-line"
       fill="none"
       stroke-width="1"
-      :stroke-dasharray="strokeDashArray"
     />
   </g>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index 18be65fd1ef..ba3f93b39ff 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -24,11 +24,11 @@ export default {
       <line
         :stroke-dasharray="stylizedLine"
         :stroke="track.lineColor"
-        stroke-width="4"
         :x1="0"
         :x2="16"
         :y1="4"
         :y2="4"
+        stroke-width="4"
       />
     </svg>
   </td>
diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index b4067d229aa..18cef82cec0 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -39,10 +39,10 @@ export default {
 <template>
   <div class="cell">
     <code-cell
-      type="input"
       :raw-code="rawInputCode"
       :count="cell.execution_count"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+      type="input" />
     <output-cell
       v-if="hasOutput"
       :count="cell.execution_count"
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 0f3083f05b2..7d2a1a33b98 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -48,9 +48,9 @@
       :type="promptType"
       :count="count" />
     <pre
-      class="language-python"
-      :class="codeCssClass"
       ref="code"
+      :class="codeCssClass"
+      class="language-python"
       v-text="code">
     </pre>
   </div>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 91b2269a83a..4183b976814 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -78,10 +78,10 @@
 <template>
   <component
     :is="componentName"
-    type="output"
     :output-type="outputType"
     :count="count"
     :raw-code="rawCode"
     :code-css-class="codeCssClass"
+    type="output"
   />
 </template>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 72d7e22fba0..dbe398cc694 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -312,8 +312,8 @@ Please check your network connection and try again.`;
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget
-      issuable-type="issue"
       v-else-if="isLocked(getNoteableData) && !canCreateNote"
+      issuable-type="issue"
     />
     <ul
       v-else-if="canCreateNote"
@@ -345,22 +345,22 @@ Please check your network connection and try again.`;
               />
 
               <markdown-field
+                ref="markdownField"
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
-                :add-spacing-classes="false"
-                ref="markdownField">
+                :add-spacing-classes="false">
                 <textarea
                   id="note-body"
+                  ref="textarea"
+                  slot="textarea"
+                  v-model="note"
+                  :disabled="isSubmitting"
                   name="note[note]"
                   class="note-textarea js-vue-comment-form
 js-gfm-input js-autosize markdown-area js-vue-textarea"
                   data-supports-quick-actions="true"
                   aria-label="Description"
-                  v-model="note"
-                  ref="textarea"
-                  slot="textarea"
-                  :disabled="isSubmitting"
                   placeholder="Write a comment or drag your files here..."
                   @keydown.up="editCurrentUserLastNote()"
                   @keydown.meta.enter="handleSave()"
@@ -372,10 +372,10 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
                   class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
-                    @click.prevent="handleSave()"
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button"
-                    type="submit">
+                    type="submit"
+                    @click.prevent="handleSave()">
                     {{ __(commentButtonTitle) }}
                   </button>
                   <button
@@ -434,20 +434,20 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 <loading-button
                   v-if="canUpdateIssue"
                   :loading="isToggleStateButtonLoading"
-                  @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
                   :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
+                  @click="handleSave(true)"
                 />
 
                 <button
-                  type="button"
                   v-if="note.length"
-                  @click="discard"
-                  class="btn btn-cancel js-note-discard">
+                  type="button"
+                  class="btn btn-cancel js-note-discard"
+                  @click="discard">
                   Discard draft
                 </button>
               </div>
diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index 94d9dc69964..fc7b52be241 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/app/assets/javascripts/notes/components/diff_file_header.vue
@@ -29,12 +29,12 @@ export default {
       <span>
         <icon name="archive" />
         <strong
-          v-html="diffFile.submoduleLink"
           class="file-title-name"
+          v-html="diffFile.submoduleLink"
         ></strong>
         <clipboard-button
-          title="Copy file path to clipboard"
           :text="diffFile.submoduleLink"
+          title="Copy file path to clipboard"
           css-class="btn-default btn-transparent btn-clipboard"
         />
       </span>
@@ -48,16 +48,16 @@ export default {
         <span v-html="diffFile.blobIcon"></span>
         <span v-if="diffFile.renamedFile">
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.oldPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.oldPath }}
           </strong>
           &rarr;
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.newPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.newPath }}
@@ -66,8 +66,8 @@ export default {
 
         <strong
           v-else
-          class="file-title-name has-tooltip"
           :title="diffFile.oldPath"
+          class="file-title-name has-tooltip"
           data-container="body"
         >
           {{ diffFile.filePath }}
@@ -78,8 +78,8 @@ export default {
       </component>
 
       <clipboard-button
-        title="Copy file path to clipboard"
         :text="diffFile.filePath"
+        title="Copy file path to clipboard"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index ee01ec85bbb..cafb28910eb 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -60,8 +60,8 @@ export default {
 <template>
   <div
     ref="fileHolder"
-    class="diff-file file-holder"
     :class="diffFileClass"
+    class="diff-file file-holder"
   >
     <div class="js-file-title file-title file-title-flex-parent">
       <diff-file-header
@@ -74,11 +74,11 @@ export default {
     >
       <table>
         <component
+          v-for="(html, index) in diffRows"
           :is="rowTag(html)"
           :class="html.className"
-          v-for="(html, index) in diffRows"
-          v-html="html.outerHTML"
           :key="index"
+          v-html="html.outerHTML"
         />
         <tr class="notes_holder">
           <td
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index cbe4774a360..68e17ac8055 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -95,8 +95,8 @@ export default {
         class="btn-group"
         role="group">
         <a
-          :href="resolveAllDiscussionsIssuePath"
           v-tooltip
+          :href="resolveAllDiscussionsIssuePath"
           title="Resolve all discussions in new issue"
           data-container="body"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
@@ -108,11 +108,11 @@ export default {
         class="btn-group"
         role="group">
         <button
-          @click="jumpToFirstDiscussion"
           v-tooltip
           title="Jump to first unresolved discussion"
           data-container="body"
-          class="btn btn-default discussion-next-btn">
+          class="btn btn-default discussion-next-btn"
+          @click="jumpToFirstDiscussion">
           <span v-html="nextDiscussionSvg"></span>
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index 13283b187d1..de0a5f8489b 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -14,8 +14,8 @@ export default {
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning inline">
       <icon
-        name="lock"
         :size="16"
+        name="lock"
         class="icon"
       />
       <span>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 626b0799581..0bf4258a257 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -129,12 +129,12 @@ export default {
       class="note-actions-item">
       <button
         v-tooltip
-        @click="onResolve"
         :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
         :title="resolveButtonTitle"
         :aria-label="resolveButtonTitle"
         type="button"
-        class="line-resolve-btn note-action-button">
+        class="line-resolve-btn note-action-button"
+        @click="onResolve">
         <template v-if="!isResolving">
           <div
             v-if="isResolved"
@@ -164,16 +164,16 @@ export default {
       >
         <loading-icon :inline="true" />
         <span
-          v-html="emojiSmiling"
-          class="link-highlight award-control-icon-neutral">
+          class="link-highlight award-control-icon-neutral"
+          v-html="emojiSmiling">
         </span>
         <span
-          v-html="emojiSmiley"
-          class="link-highlight award-control-icon-positive">
+          class="link-highlight award-control-icon-positive"
+          v-html="emojiSmiley">
         </span>
         <span
-          v-html="emojiSmile"
-          class="link-highlight award-control-icon-super-positive">
+          class="link-highlight award-control-icon-super-positive"
+          v-html="emojiSmile">
         </span>
       </a>
     </div>
@@ -181,16 +181,16 @@ export default {
       v-if="canEdit"
       class="note-actions-item">
       <button
-        @click="onEdit"
         v-tooltip
         type="button"
         title="Edit comment"
         class="note-action-button js-note-edit btn btn-transparent"
         data-container="body"
-        data-placement="bottom">
+        data-placement="bottom"
+        @click="onEdit">
         <span
-          v-html="editSvg"
-          class="link-highlight">
+          class="link-highlight"
+          v-html="editSvg">
         </span>
       </button>
     </div>
@@ -218,9 +218,9 @@ export default {
         </li>
         <li v-if="canEdit">
           <button
-            @click.prevent="onDelete"
             class="btn btn-transparent js-note-delete js-note-delete"
-            type="button">
+            type="button"
+            @click.prevent="onDelete">
             <span class="text-danger">
               Delete comment
             </span>
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index e8fd155a1ee..521b4d16286 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -199,10 +199,10 @@ export default {
         :key="index"
         :class="getAwardClassBindings(awardList, awardName)"
         :title="awardTitle(awardList)"
-        @click="handleAward(awardName)"
         class="btn award-control"
         data-placement="bottom"
-        type="button">
+        type="button"
+        @click="handleAward(awardName)">
         <span v-html="getAwardHTML(awardName)"></span>
         <span class="award-control-text js-counter">
           {{ awardList.length }}
@@ -220,16 +220,16 @@ export default {
           data-placement="bottom"
           type="button">
           <span
-            v-html="emojiSmiling"
-            class="award-control-icon award-control-icon-neutral">
+            class="award-control-icon award-control-icon-neutral"
+            v-html="emojiSmiling">
           </span>
           <span
-            v-html="emojiSmiley"
-            class="award-control-icon award-control-icon-positive">
+            class="award-control-icon award-control-icon-positive"
+            v-html="emojiSmiley">
           </span>
           <span
-            v-html="emojiSmile"
-            class="award-control-icon award-control-icon-super-positive">
+            class="award-control-icon award-control-icon-super-positive"
+            v-html="emojiSmile">
           </span>
           <i
             aria-hidden="true"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 0cb626c14f4..864edcd2ec6 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -80,20 +80,20 @@ export default {
 
 <template>
   <div
-    :class="{ 'js-task-list-container': canEdit }"
     ref="note-body"
+    :class="{ 'js-task-list-container': canEdit }"
     class="note-body">
     <div
-      v-html="note.note_html"
-      class="note-text md"></div>
+      class="note-text md"
+      v-html="note.note_html"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
-      @handleFormUpdate="handleFormUpdate"
-      @cancelFormEdition="formCancelHandler"
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelFormEdition="formCancelHandler"
     />
     <textarea
       v-if="canEdit"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index c59a2e7a406..a752f634c07 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -165,14 +165,14 @@ export default {
         :add-spacing-classes="false">
         <textarea
           id="note_note"
+          ref="textarea"
+          slot="textarea"
+          :data-supports-quick-actions="!isEditing"
+          v-model="updatedNoteBody"
           name="note[note]"
           class="note-textarea js-gfm-input
 js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
-          :data-supports-quick-actions="!isEditing"
           aria-label="Description"
-          v-model="updatedNoteBody"
-          ref="textarea"
-          slot="textarea"
           placeholder="Write a comment or drag your files here..."
           @keydown.meta.enter="handleUpdate()"
           @keydown.ctrl.enter="handleUpdate()"
@@ -182,23 +182,23 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
       </markdown-field>
       <div class="note-form-actions clearfix">
         <button
-          type="button"
-          @click="handleUpdate()"
           :disabled="isDisabled"
-          class="js-vue-issue-save btn btn-save">
+          type="button"
+          class="js-vue-issue-save btn btn-save"
+          @click="handleUpdate()">
           {{ saveButtonTitle }}
         </button>
         <button
           v-if="note.resolvable"
-          @click.prevent="handleUpdate(true)"
           class="btn btn-nr btn-default append-right-10 js-comment-resolve-button"
+          @click.prevent="handleUpdate(true)"
         >
           {{ resolveButtonTitle }}
         </button>
         <button
-          @click="cancelHandler()"
           class="btn btn-cancel note-edit-cancel"
-          type="button">
+          type="button"
+          @click="cancelHandler()">
           Cancel
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index a4081957207..ffe3ba9c805 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -66,9 +66,9 @@ export default {
       v-if="includeToggle"
       class="discussion-actions">
       <button
-        @click="handleToggle"
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
+        type="button"
+        @click="handleToggle">
         <i
           :class="toggleChevronClass"
           class="fa"
@@ -90,16 +90,16 @@ export default {
         </template>
         <span
           v-if="actionTextHtml"
-          v-html="actionTextHtml"
-          class="system-note-message">
+          class="system-note-message"
+          v-html="actionTextHtml">
         </span>
         <span class="system-note-separator">
           &middot;
         </span>
         <a
           :href="noteTimestampLink"
-          @click="updateTargetNoteHash"
-          class="note-timestamp system-note-separator">
+          class="note-timestamp system-note-separator"
+          @click="updateTargetNoteHash">
           <time-ago-tooltip
             :time="createdAt"
             tooltip-placement="bottom"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 7f5aacaa3a2..f9f5041a9f9 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -229,9 +229,9 @@ Please check your network connection and try again.`;
               :note-id="discussion.id"
               :include-toggle="true"
               :expanded="note.expanded"
-              @toggleHandler="toggleDiscussionHandler"
               action-text="started a discussion"
               class="discussion"
+              @toggleHandler="toggleDiscussionHandler"
             />
             <note-edited-text
               v-if="lastUpdatedAt"
@@ -269,19 +269,19 @@ Please check your network connection and try again.`;
                         class="btn-group"
                         role="group">
                         <button
-                          @click="showReplyForm"
                           type="button"
                           class="js-vue-discussion-reply btn btn-text-field"
-                          title="Add a reply">Reply...</button>
+                          title="Add a reply"
+                          @click="showReplyForm">Reply...</button>
                       </div>
                       <div
                         v-if="note.resolvable"
                         class="btn-group"
                         role="group">
                         <button
-                          @click="resolveHandler()"
                           type="button"
                           class="btn btn-default"
+                          @click="resolveHandler()"
                         >
                           <i
                             v-if="isResolving"
@@ -301,8 +301,8 @@ Please check your network connection and try again.`;
                           class="btn-group"
                           role="group">
                           <a
-                            :href="note.resolve_with_issue_path"
                             v-tooltip
+                            :href="note.resolve_with_issue_path"
                             class="new-issue-for-discussion btn
                               btn-default discussion-create-issue-btn"
                             title="Resolve this discussion in a new issue"
@@ -316,11 +316,11 @@ Please check your network connection and try again.`;
                           class="btn-group"
                           role="group">
                           <button
-                            @click="jumpToDiscussion"
                             v-tooltip
                             class="btn btn-default discussion-next-btn"
                             title="Jump to next unresolved discussion"
                             data-container="body"
+                            @click="jumpToDiscussion"
                           >
                             <span v-html="nextDiscussionsSvg"></span>
                           </button>
@@ -330,12 +330,12 @@ Please check your network connection and try again.`;
                   </template>
                   <note-form
                     v-if="isReplying"
-                    save-button-title="Comment"
+                    ref="noteForm"
                     :note="note"
                     :is-editing="false"
+                    save-button-title="Comment"
                     @handleFormUpdate="saveReply"
-                    @cancelFormEdition="cancelReplyForm"
-                    ref="noteForm" />
+                    @cancelFormEdition="cancelReplyForm" />
                   <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 566f5c68e66..ec3ee407f0a 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -151,10 +151,10 @@ export default {
 
 <template>
   <li
-    class="note timeline-entry"
     :id="noteAnchorId"
     :class="classNameBindings"
-    :data-award-url="note.toggle_award_path">
+    :data-award-url="note.toggle_award_path"
+    class="note timeline-entry">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link
@@ -191,12 +191,12 @@ export default {
           />
         </div>
         <note-body
+          ref="noteBody"
           :note="note"
           :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
           @handleFormUpdate="formUpdateHandler"
           @cancelFormEdition="formCancelHandler"
-          ref="noteBody"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index ba1d8e4d8db..bc84666779e 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -40,8 +40,8 @@
   <gl-modal
     id="stop-jobs-modal"
     :header-title-text="s__('AdminArea|Stop all jobs?')"
-    footer-primary-button-variant="danger"
     :footer-primary-button-text="s__('AdminArea|Stop jobs')"
+    footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
     {{ text }}
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 343c65edb37..ff66d3a8ac4 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -83,9 +83,9 @@
     id="delete-project-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -107,15 +107,15 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredProjectName"
           name="projectName"
           class="form-control"
           type="text"
-          v-model="enteredProjectName"
           aria-labelledby="input-label"
           autocomplete="off"
         />
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index 9ce176744ba..cc2805a1901 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -116,10 +116,10 @@
     id="delete-user-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :secondary-button-label="secondaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -141,15 +141,15 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredUsername"
           type="text"
           name="username"
           class="form-control"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
           autocomplete="off"
         />
@@ -160,11 +160,11 @@
       slot-scope="props"
     >
       <button
+        :disabled="!canSubmit"
         type="button"
         class="btn js-secondary-button btn-warning"
-        :disabled="!canSubmit"
-        @click="onSecondaryAction"
         data-dismiss="modal"
+        @click="onSecondaryAction"
       >
         {{ secondaryButtonLabel }}
       </button>
diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
index 16f792d635a..4061c11ba8f 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
@@ -96,8 +96,8 @@ Once deleted, it cannot be undone or recovered.`),
     id="delete-milestone-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Milestones|Delete milestone')"
+    kind="danger"
     @submit="onSubmit">
 
     <template
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index 2bda2aeb3a1..2c683a39f42 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -53,8 +53,8 @@
 <template>
   <gl-modal
     id="promote-milestone-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Milestones|Promote Milestone')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <template
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index ad6df51bb7a..5d2247f6c6d 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -71,8 +71,8 @@
 <template>
   <gl-modal
     id="promote-label-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Labels|Promote Label')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <div
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 2d18fa2044b..d0613804067 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -65,11 +65,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="custom"
-        class="label-light"
-        type="radio"
         :name="inputNameAttribute"
         :value="cronInterval"
         :checked="isEditable"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(true)"
       />
 
@@ -90,11 +90,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-day"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyDay"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -109,11 +109,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-week"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyWeek"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -128,11 +128,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-month"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyMonth"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -147,13 +147,13 @@
     <div class="cron-interval-input-wrapper">
       <input
         id="schedule_cron"
-        class="form-control inline cron-interval-input"
-        type="text"
         :placeholder="__('Define a custom pattern with cron syntax')"
-        required="true"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :disabled="!isEditable"
+        class="form-control inline cron-interval-input"
+        type="text"
+        required="true"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index 9b13b2a524f..06101290f6c 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -72,25 +72,25 @@
 
 <template>
   <div
-    class="project-feature-controls"
     :data-for="name"
+    class="project-feature-controls"
   >
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <project-feature-toggle
       :value="featureEnabled"
-      @change="toggleFeature"
       :disabled-input="disabledInput"
+      @change="toggleFeature"
     />
     <div class="select-wrapper">
       <select
+        :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"
         @change="selectOption"
-        :disabled="displaySelectInput"
       >
         <option
           v-for="[optionValue, optionName] in displayOptions"
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 06b0ab184ed..ae88b765abf 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -175,16 +175,16 @@
   <div>
     <div class="project-visibility-setting">
       <project-setting-row
-        label="Project visibility"
         :help-path="visibilityHelpPath"
+        label="Project visibility"
       >
         <div class="project-feature-controls">
           <div class="select-wrapper">
             <select
-              name="project[visibility_level]"
               v-model="visibilityLevel"
-              class="form-control select-control"
               :disabled="!canChangeVisibilityLevel"
+              name="project[visibility_level]"
+              class="form-control select-control"
             >
               <option
                 :value="visibilityOptions.PRIVATE"
@@ -219,30 +219,30 @@
           class="request-access"
         >
           <input
+            :value="requestAccessEnabled"
             type="hidden"
             name="project[request_access_enabled]"
-            :value="requestAccessEnabled"
           />
           <input
-            type="checkbox"
             v-model="requestAccessEnabled"
+            type="checkbox"
           />
           Allow users to request access
         </label>
       </project-setting-row>
     </div>
     <div
-      class="project-feature-settings"
       :class="{ 'highlight-changes': highlightChangesClass }"
+      class="project-feature-settings"
     >
       <project-setting-row
         label="Issues"
         help-text="Lightweight issue tracking system for this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][issues_access_level]"
           :options="featureAccessLevelOptions"
           v-model="issuesAccessLevel"
+          name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -250,9 +250,9 @@
         help-text="View and edit files in this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][repository_access_level]"
           :options="featureAccessLevelOptions"
           v-model="repositoryAccessLevel"
+          name="project[project_feature_attributes][repository_access_level]"
         />
       </project-setting-row>
       <div class="project-feature-setting-group">
@@ -261,10 +261,10 @@
           help-text="Submit changes to be merged upstream"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][merge_requests_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="mergeRequestsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][merge_requests_access_level]"
           />
         </project-setting-row>
         <project-setting-row
@@ -272,34 +272,34 @@
           help-text="Build, test, and deploy your changes"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][builds_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="buildsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][builds_access_level]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="registryAvailable"
-          label="Container registry"
           :help-path="registryHelpPath"
+          label="Container registry"
           help-text="Every project can have its own space to store its Docker images"
         >
           <project-feature-toggle
-            name="project[container_registry_enabled]"
             v-model="containerRegistryEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[container_registry_enabled]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="lfsAvailable"
-          label="Git Large File Storage"
           :help-path="lfsHelpPath"
+          label="Git Large File Storage"
           help-text="Manages large files such as audio, video, and graphics files"
         >
           <project-feature-toggle
-            name="project[lfs_enabled]"
             v-model="lfsEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[lfs_enabled]"
           />
         </project-setting-row>
       </div>
@@ -308,9 +308,9 @@
         help-text="Pages for project documentation"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][wiki_access_level]"
           :options="featureAccessLevelOptions"
           v-model="wikiAccessLevel"
+          name="project[project_feature_attributes][wiki_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -318,9 +318,9 @@
         help-text="Share code pastes with others out of Git repository"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][snippets_access_level]"
           :options="featureAccessLevelOptions"
           v-model="snippetsAccessLevel"
+          name="project[project_feature_attributes][snippets_access_level]"
         />
       </project-setting-row>
     </div>
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index 5765eed4d45..0289209ff1e 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -50,8 +50,8 @@ export default {
   <gl-modal
     id="delete-wiki-modal"
     :header-title-text="title"
-    footer-primary-button-variant="danger"
     :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
+    footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
     {{ message }}
@@ -68,9 +68,9 @@ export default {
         value="delete"
       />
       <input
+        :value="csrfToken"
         type="hidden"
         name="authenticity_token"
-        :value="csrfToken"
       />
     </form>
   </gl-modal>
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 00f32d9de78..2f480ecdc69 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -56,8 +56,8 @@
 
 <template>
   <div
-    class="pdf-viewer"
-    v-if="hasPDF">
+    v-if="hasPDF"
+    class="pdf-viewer">
     <page
       v-for="(page, index) in pages"
       :key="index"
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index fcba819beba..9f06833d560 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -43,9 +43,9 @@
 
 <template>
   <canvas
-    class="pdf-page"
     ref="canvas"
     :data-page="number"
+    class="pdf-page"
   >
   </canvas>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 96189e7033a..d765ff3b41c 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -39,9 +39,9 @@ export default {
 </script>
 <template>
   <div
+    v-if="currentRequest.details"
     :id="`peek-view-${metric}`"
     class="view"
-    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 82b4ce083fb..db0505a55fe 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -83,15 +83,15 @@ export default {
 </script>
 <template>
   <button
-    type="button"
-    @click="onClickAction"
     v-tooltip
     :title="tooltipText"
+    :class="cssClass"
+    :disabled="isDisabled"
+    type="button"
     class="js-ci-action btn btn-blank
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
-    :class="cssClass"
     data-container="body"
-    :disabled="isDisabled"
+    @click="onClickAction"
   >
     <icon :name="actionIcon"/>
   </button>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index e64afc94ef9..04120d45834 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -82,12 +82,12 @@ export default {
   <div class="ci-job-dropdown-container dropdown dropright">
     <button
       v-tooltip
+      :title="tooltipText"
       type="button"
       data-toggle="dropdown"
       data-container="body"
       data-boundary="viewport"
       class="dropdown-menu-toggle build-content"
-      :title="tooltipText"
     >
 
       <job-name-component
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index dc16d395bcb..886e62ab1a7 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -107,11 +107,11 @@ export default {
     </a>
 
     <div
-      v-else
       v-tooltip
-      class="js-job-component-tooltip non-details-job-component"
+      v-else
       :title="tooltipText"
       :class="cssClassJobName"
+      class="js-job-component-tooltip non-details-job-component"
       data-html="true"
       data-container="body"
     >
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index f32368947e8..2c728582b7c 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -52,8 +52,8 @@ export default {
 </script>
 <template>
   <li
-    class="stage-column"
-    :class="stageConnectorClass">
+    :class="stageConnectorClass"
+    class="stage-column">
     <div class="stage-name">
       {{ title }}
     </div>
@@ -62,9 +62,9 @@ export default {
         <li
           v-for="(job, index) in jobs"
           :key="job.id"
-          class="build"
           :class="buildConnnectorClass(index)"
           :id="jobId(job)"
+          class="build"
         >
 
           <div class="curve"></div>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index e08c2092680..5b212ee8931 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -82,11 +82,11 @@
     <ci-header
       v-if="shouldRenderContent"
       :status="status"
-      item-name="Pipeline"
       :item-id="pipeline.id"
       :time="pipeline.created_at"
       :user="pipeline.user"
       :actions="actions"
+      item-name="Pipeline"
       @actionClicked="postAction"
     />
     <loading-icon
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index eba5678e3e5..1fce9f16ee0 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -50,10 +50,10 @@
 
     <loading-button
       v-if="resetCachePath"
-      @click="onClickResetCache"
       :loading="isResetCacheButtonLoading"
-      class="btn btn-default js-clear-cache"
       :label="s__('Pipelines|Clear Runner Caches')"
+      class="btn btn-default js-clear-cache"
+      @click="onClickResetCache"
     />
 
     <a
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 4d965733f95..a107e579457 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -55,10 +55,10 @@
     <span>by</span>
     <user-avatar-link
       v-if="user"
-      class="js-pipeline-url-user"
       :link-href="pipeline.user.path"
       :img-src="pipeline.user.avatar_url"
       :tooltip-text="pipeline.user.name"
+      class="js-pipeline-url-user"
     />
     <span
       v-if="!user"
@@ -67,31 +67,31 @@
     </span>
     <div class="label-container">
       <span
-        v-if="pipeline.flags.latest"
         v-tooltip
+        v-if="pipeline.flags.latest"
         class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
-        v-if="pipeline.flags.yaml_errors"
         v-tooltip
-        class="js-pipeline-url-yaml badge badge-danger"
-        :title="pipeline.yaml_errors">
+        v-if="pipeline.flags.yaml_errors"
+        :title="pipeline.yaml_errors"
+        class="js-pipeline-url-yaml badge badge-danger">
         yaml invalid
       </span>
       <span
-        v-if="pipeline.flags.failure_reason"
         v-tooltip
-        class="js-pipeline-url-failure badge badge-danger"
-        :title="pipeline.failure_reason">
+        v-if="pipeline.flags.failure_reason"
+        :title="pipeline.failure_reason"
+        class="js-pipeline-url-failure badge badge-danger">
         error
       </span>
       <a
+        v-popover="popoverOptions"
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
-        v-popover="popoverOptions"
         role="button">
         Auto DevOps
       </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 497a09cec65..b31b4bad7a0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -282,8 +282,8 @@
 <template>
   <div class="pipelines-container">
     <div
-      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="shouldRenderTabs || shouldRenderButtons"
+      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
     >
       <div class="fade-left">
         <i
@@ -303,8 +303,8 @@
       <navigation-tabs
         v-if="shouldRenderTabs"
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="pipelines"
+        @onChangeTab="onChangeTab"
       />
 
       <navigation-controls
@@ -312,8 +312,8 @@
         :new-pipeline-path="newPipelinePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
-        @resetRunnersCache="handleResetRunnersCache"
         :is-reset-cache-button-loading="isResetCacheButtonLoading"
+        @resetRunnersCache="handleResetRunnersCache"
       />
     </div>
 
@@ -347,8 +347,8 @@
       />
 
       <div
-        class="table-holder"
         v-else-if="stateToRender === $options.stateMap.tableList"
+        class="table-holder"
       >
 
         <pipelines-table-component
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index e9bc3cf14ca..5070c253f11 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -44,13 +44,13 @@
   <div class="btn-group">
     <button
       v-tooltip
+      :disabled="isLoading"
       type="button"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
       title="Manual job"
       data-toggle="dropdown"
       data-placement="top"
       aria-label="Manual job"
-      :disabled="isLoading"
     >
       <icon
         name="play"
@@ -69,11 +69,11 @@
         :key="i"
       >
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-pipeline-action-link no-btn btn"
           @click="onClickAction(action.path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
           {{ action.name }}
         </button>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 31fcc9dd412..490df47e154 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -42,9 +42,9 @@
         v-for="(artifact, i) in artifacts"
         :key="i">
         <a
+          :href="artifact.path"
           rel="nofollow"
           download
-          :href="artifact.path"
         >
           Download {{ artifact.name }} artifacts
         </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 4318abe97e0..2e777783636 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -114,8 +114,8 @@
     <modal
       id="confirmation-modal"
       :header-title-text="modalTitle"
-      footer-primary-button-variant="danger"
       :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
+      footer-primary-button-variant="danger"
       @submit="onSubmit"
     >
       <span v-html="modalText"></span>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index a3c17479e6f..b2744a30c2a 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -301,9 +301,9 @@
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">
           <div
-            class="stage-container dropdown js-mini-pipeline-graph"
             v-for="(stage, index) in pipeline.details.stages"
-            :key="index">
+            :key="index"
+            class="stage-container dropdown js-mini-pipeline-graph">
             <pipeline-stage
               :type="$options.pipelinesTable"
               :stage="stage"
@@ -331,28 +331,28 @@
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
-          class="d-none d-sm-none d-md-block"
           :artifacts="pipeline.details.artifacts"
+          class="d-none d-sm-none d-md-block"
         />
 
         <loading-button
           v-if="pipeline.flags.retryable"
-          @click="handleRetryClick"
-          container-class="js-pipelines-retry-button btn btn-default btn-retry"
           :loading="isRetrying"
           :disabled="isRetrying"
+          container-class="js-pipelines-retry-button btn btn-default btn-retry"
+          @click="handleRetryClick"
         >
           <icon name="repeat" />
         </loading-button>
 
         <loading-button
           v-if="pipeline.flags.cancelable"
-          @click="handleCancelClick"
+          :loading="isCancelling"
+          :disabled="isCancelling"
           data-toggle="modal"
           data-target="#confirmation-modal"
           container-class="js-pipelines-cancel-button btn btn-remove"
-          :loading="isCancelling"
-          :disabled="isCancelling"
+          @click="handleCancelClick"
         >
           <icon name="close" />
         </loading-button>
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index f9769815796..4dd2fb9fbed 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -158,22 +158,22 @@ export default {
   <div class="dropdown">
     <button
       v-tooltip
+      id="stageDropdown"
+      ref="dropdown"
       :class="triggerButtonClass"
-      @click="onClickStage"
-      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       :title="stage.title"
+      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       data-placement="top"
       data-toggle="dropdown"
       type="button"
-      id="stageDropdown"
       aria-haspopup="true"
       aria-expanded="false"
-      ref="dropdown"
+      @click="onClickStage"
     >
 
       <span
-        aria-hidden="true"
         :aria-label="stage.title"
+        aria-hidden="true"
       >
         <icon :name="borderlessIcon" />
       </span>
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index 79dbdca4010..0a97df2dc18 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -66,8 +66,8 @@
     </div>
     <div class="table-mobile-content">
       <p
-        class="duration"
         v-if="hasDuration"
+        class="duration"
       >
         <span v-html="iconTimerSvg">
         </span>
@@ -75,8 +75,8 @@
       </p>
 
       <p
-        class="finished-at d-none d-sm-none d-md-block"
         v-if="hasFinishedTime"
+        class="finished-at d-none d-sm-none d-md-block"
       >
 
         <i
@@ -87,9 +87,9 @@
 
         <time
           v-tooltip
+          :title="tooltipTitle(finishedTime)"
           data-placement="top"
-          data-container="body"
-          :title="tooltipTitle(finishedTime)">
+          data-container="body">
           {{ timeFormated(finishedTime) }}
         </time>
       </p>
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index f50002afbf2..974629fa2af 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -80,10 +80,10 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
     id="delete-account-modal"
     :title="s__('Profiles|Delete your account?')"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Profiles|Delete account')"
-    @submit="onSubmit"
-    :submit-disabled="!canSubmit()">
+    :submit-disabled="!canSubmit()"
+    kind="danger"
+    @submit="onSubmit">
 
     <template
       slot="body"
@@ -101,9 +101,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
 
         <p
@@ -114,18 +114,18 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 
         <input
           v-if="confirmWithPassword"
+          v-model="enteredPassword"
           name="password"
           class="form-control"
           type="password"
-          v-model="enteredPassword"
           aria-labelledby="input-label"
         />
         <input
           v-else
+          v-model="enteredUsername"
           name="username"
           class="form-control"
           type="text"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
         />
       </form>
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index b37febe523c..ef484ddfd61 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -93,10 +93,10 @@ Please update your Git repository remotes as soon as possible.`),
         </div>
         <input
           :id="$options.inputId"
-          class="form-control"
-          required="required"
           v-model="newUsername"
           :disabled="isRequestPending"
+          class="form-control"
+          required="required"
         />
       </div>
       <p class="form-text text-muted">
@@ -105,18 +105,18 @@ Please update your Git repository remotes as soon as possible.`),
     </div>
     <button
       :data-target="`#${$options.modalId}`"
+      :disabled="isRequestPending || newUsername === username"
       class="btn btn-warning"
       type="button"
       data-toggle="modal"
-      :disabled="isRequestPending || newUsername === username"
     >
       {{ $options.buttonText }}
     </button>
     <gl-modal
       :id="$options.modalId"
       :header-title-text="s__('Profiles|Change username') + '?'"
-      footer-primary-button-variant="warning"
       :footer-primary-button-text="$options.buttonText"
+      footer-primary-button-variant="warning"
       @submit="onConfirm"
     >
       <span v-html="modalText"></span>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 6ed35c0a981..d4497924ad8 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -131,12 +131,12 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
+      v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
-      v-if="hasErrors"
+      class="form-text"
     >
       {{ errorMessage }}
     </span>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 542d4d21a22..08d0a122579 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -192,11 +192,11 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
+      class="form-text"
       v-html="helpText"
     ></span>
   </div>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index bc28f8b5df4..b5476684c6a 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -105,12 +105,12 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
+      v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
-      v-if="hasErrors"
+      class="form-text"
     >
       {{ errorMessage }}
     </span>
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 63f20a0041d..c772fca14bb 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -100,9 +100,9 @@
 <template>
   <div>
     <loading-icon
+      v-if="isLoading"
       label="Loading pipeline status"
       size="3"
-      v-if="isLoading"
     />
     <a
       v-else
@@ -112,8 +112,8 @@
         v-tooltip
         :title="statusTitle"
         :aria-label="statusTitle"
-        data-container="body"
         :status="ciStatus"
+        data-container="body"
       />
     </a>
   </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/app.vue b/app/assets/javascripts/projects_dropdown/components/app.vue
index 0bbd8a41753..73d49488299 100644
--- a/app/assets/javascripts/projects_dropdown/components/app.vue
+++ b/app/assets/javascripts/projects_dropdown/components/app.vue
@@ -132,14 +132,14 @@ export default {
   <div>
     <search/>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoadingProjects"
       :label="s__('ProjectsDropdown|Loading projects')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <div
-      class="section-header"
       v-if="isFrequentsListVisible"
+      class="section-header"
     >
       {{ s__('ProjectsDropdown|Frequently visited') }}
     </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
index 246dbeaaded..625e0aa548c 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
@@ -37,14 +37,14 @@
       class="list-unstyled"
     >
       <li
-        class="section-empty"
         v-if="isListEmpty"
+        class="section-empty"
       >
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
index 759cdd1ded9..eafbf6c99e2 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
@@ -79,36 +79,36 @@
     class="projects-list-item-container"
   >
     <a
-      class="clearfix"
       :href="webUrl"
+      class="clearfix"
     >
       <div
         class="project-item-avatar-container"
       >
         <img
           v-if="hasAvatar"
-          class="avatar s32"
           :src="avatarUrl"
+          class="avatar s32"
         />
         <identicon
           v-else
-          size-class="s32"
           :entity-id="projectId"
           :entity-name="projectName"
+          size-class="s32"
         />
       </div>
       <div
         class="project-item-metadata-container"
       >
         <div
-          class="project-title"
           :title="projectName"
+          class="project-title"
           v-html="highlightedProjectName"
         >
         </div>
         <div
-          class="project-namespace"
           :title="namespace"
+          class="project-namespace"
         >{{ truncatedNamespace }}</div>
       </div>
     </a>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
index 8d0c29177e6..76e9cb9e53f 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
@@ -48,8 +48,8 @@ export default {
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue
index 7fcd62dcdb8..28f2a18f2a6 100644
--- a/app/assets/javascripts/projects_dropdown/components/search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/search.vue
@@ -49,11 +49,11 @@
     class="search-input-container d-none d-sm-block"
   >
     <input
-      type="search"
-      class="form-control"
       ref="search"
       v-model="searchQuery"
       :placeholder="s__('ProjectsDropdown|Search your projects')"
+      type="search"
+      class="form-control"
     />
     <i
       v-if="!searchQuery"
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index ea0f7199a70..31f88675912 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -48,8 +48,8 @@
     />
 
     <collapsible-container
-      v-else-if="!isLoading && repos.length"
       v-for="(item, index) in repos"
+      v-else-if="!isLoading && repos.length"
       :key="index"
       :repo="item"
     />
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index 2fc3778820b..4116c4a0489 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -62,15 +62,15 @@
     <div class="container-image-head">
       <button
         type="button"
-        @click="toggleRepo"
         class="js-toggle-repo btn-link"
+        @click="toggleRepo"
       >
         <i
-          class="fa"
           :class="{
             'fa-chevron-right': !isOpen,
             'fa-chevron-up': isOpen,
           }"
+          class="fa"
           aria-hidden="true"
         >
         </i>
@@ -86,12 +86,12 @@
 
       <div class="controls d-none d-sm-block float-right">
         <button
+          v-tooltip
           v-if="repo.canDelete"
-          type="button"
-          class="js-remove-repo btn btn-danger"
           :title="s__('ContainerRegistry|Remove repository')"
           :aria-label="s__('ContainerRegistry|Remove repository')"
-          v-tooltip
+          type="button"
+          class="js-remove-repo btn btn-danger"
           @click="handleDeleteRepository"
         >
           <i
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index e4a4b3bb129..9f4973c3490 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -118,13 +118,13 @@
 
           <td class="content">
             <button
+              v-tooltip
               v-if="item.canDelete"
-              type="button"
-              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
+              type="button"
+              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               data-container="body"
-              v-tooltip
               @click="handleDeleteRegistry(item)"
             >
               <i
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 5a374d84796..d22a1e1ac66 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -125,13 +125,13 @@ export default {
 <template>
   <div>
     <div
-      class="sidebar-collapsed-icon sidebar-collapsed-user"
-      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
       v-tooltip
+      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
+      :title="collapsedTooltipTitle"
+      class="sidebar-collapsed-icon sidebar-collapsed-user"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="collapsedTooltipTitle"
     >
       <i
         v-if="hasNoUsers"
@@ -140,17 +140,17 @@ export default {
       >
       </i>
       <button
-        type="button"
-        class="btn-link"
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
         :key="user.id"
+        type="button"
+        class="btn-link"
       >
         <img
-          width="24"
-          class="avatar avatar-inline s24"
           :alt="assigneeAlt(user)"
           :src="avatarUrl(user)"
+          width="24"
+          class="avatar avatar-inline s24"
         />
         <span class="author">
           {{ user.name }}
@@ -186,14 +186,14 @@ export default {
       </template>
       <template v-else-if="hasOneUser">
         <a
-          class="author_link bold"
           :href="assigneeUrl(firstUser)"
+          class="author_link bold"
         >
           <img
-            width="32"
-            class="avatar avatar-inline s32"
             :alt="assigneeAlt(firstUser)"
             :src="avatarUrl(firstUser)"
+            width="32"
+            class="avatar avatar-inline s32"
           />
           <span class="author">
             {{ firstUser.name }}
@@ -206,23 +206,23 @@ export default {
       <template v-else>
         <div class="user-list">
           <div
-            class="user-item"
             v-for="(user, index) in users"
             v-if="renderAssignee(index)"
             :key="user.id"
+            class="user-item"
           >
             <a
+              :href="assigneeUrl(user)"
+              :data-title="user.name"
               class="user-link has-tooltip"
               data-container="body"
               data-placement="bottom"
-              :href="assigneeUrl(user)"
-              :data-title="user.name"
             >
               <img
-                width="32"
-                class="avatar avatar-inline s32"
                 :alt="assigneeAlt(user)"
                 :src="avatarUrl(user)"
+                width="32"
+                class="avatar avatar-inline s32"
               />
             </a>
           </div>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index b04a2eff798..123c92aff64 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -90,12 +90,12 @@ export default {
     />
     <assignees
       v-if="!store.isFetching.assignees"
-      class="value"
       :root-path="store.rootPath"
       :users="store.assignees"
       :editable="store.editable"
-      @assign-self="assignSelf"
       :issuable-type="issuableType"
+      class="value"
+      @assign-self="assignSelf"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 3f6e2f05396..1b866cca4b1 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -70,13 +70,13 @@ export default {
 <template>
   <div class="block issuable-sidebar-item confidentiality">
     <div
-      class="sidebar-collapsed-icon"
-      @click="toggleForm"
       v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="tooltipLabel"
+      @click="toggleForm"
     >
       <icon
         :name="confidentialityIcon"
@@ -104,8 +104,8 @@ export default {
         v-if="!isConfidential"
         class="no-value sidebar-item-value">
         <icon
-          name="eye"
           :size="16"
+          name="eye"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
@@ -115,8 +115,8 @@ export default {
         v-else
         class="value sidebar-item-value hide-collapsed">
         <icon
-          name="eye-slash"
           :size="16"
+          name="eye-slash"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index d392977e5e2..4906dad22e1 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -44,14 +44,14 @@ export default {
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
-        class="text"
         v-if="isLocked"
+        class="text"
         v-html="unlockWarning">
       </p>
 
       <p
-        class="text"
         v-else
+        class="text"
         v-html="lockWarning">
       </p>
 
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index fb69c741dcd..10bedf8af1f 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -94,13 +94,13 @@ export default {
 <template>
   <div class="block issuable-sidebar-item lock">
     <div
-      class="sidebar-collapsed-icon"
-      @click="toggleForm"
       v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="tooltipLabel"
+      @click="toggleForm"
     >
       <icon
         :name="lockIcon"
@@ -134,8 +134,8 @@ export default {
         class="value sidebar-item-value"
       >
         <icon
-          name="lock"
           :size="16"
+          name="lock"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
@@ -147,8 +147,8 @@ export default {
         class="no-value sidebar-item-value hide-collapsed"
       >
         <icon
-          name="lock-open"
           :size="16"
+          name="lock-open"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 0a945fc7fd5..33dd6c981b6 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -80,12 +80,12 @@
 <template>
   <div>
     <div
-      class="sidebar-collapsed-icon"
       v-tooltip
+      :title="participantLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="participantLabel"
       @click="onClickCollapsedIcon"
     >
       <i
@@ -119,15 +119,15 @@
         class="participants-author js-participants-author"
       >
         <a
-          class="author_link"
           :href="participant.web_url"
+          class="author_link"
         >
           <user-avatar-image
             :lazy="true"
             :img-src="participant.avatar_url"
-            css-classes="avatar-inline"
             :size="24"
             :tooltip-text="participant.name"
+            css-classes="avatar-inline"
             tooltip-placement="bottom"
           />
         </a>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 6745c1aafff..448c8fc3602 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -97,9 +97,9 @@
     </span>
     <toggle-button
       ref="toggleButton"
-      class="float-right hide-collapsed js-issuable-subscribe-button"
       :is-loading="showLoadingState"
       :value="subscribed"
+      class="float-right hide-collapsed js-issuable-subscribe-button"
       @change="toggleSubscription"
     />
   </div>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
index 209af1ce152..1d030c4f67f 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -110,12 +110,12 @@
 
 <template>
   <div
-    class="sidebar-collapsed-icon"
     v-tooltip
+    :title="tooltipText"
+    class="sidebar-collapsed-icon"
     data-container="body"
     data-placement="left"
     data-boundary="viewport"
-    :title="tooltipText"
   >
     <icon name="timer" />
     <div class="time-tracking-collapsed-summary">
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index 6f79310b1cc..3acffa425ac 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -50,19 +50,19 @@ export default {
 <template>
   <div class="time-tracking-comparison-pane">
     <div
-      class="compare-meter"
-      data-toggle="tooltip"
-      data-placement="top"
-      role="timeRemainingDisplay"
       :aria-valuenow="timeRemainingTooltip"
       :title="timeRemainingTooltip"
       :data-original-title="timeRemainingTooltip"
       :class="timeRemainingStatusClass"
+      class="compare-meter"
+      data-toggle="tooltip"
+      data-placement="top"
+      role="timeRemainingDisplay"
     >
       <div
+        :aria-valuenow="timeRemainingPercent"
         class="meter-container"
         role="timeSpentPercent"
-        :aria-valuenow="timeRemainingPercent"
       >
         <div
           :style="{ width: timeRemainingPercent }"
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 825063d9ba6..19ec0f05a26 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -45,8 +45,8 @@ export default {
       <p v-html="spendText">
       </p>
       <a
-        class="btn btn-default learn-more-button"
         :href="href"
+        class="btn btn-default learn-more-button"
       >
         {{ __('Learn more') }}
       </a>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 7d56d2fa5ee..ca3b9338c29 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -101,8 +101,8 @@ export default {
 
 <template>
   <div
-    class="time_tracker time-tracking-component-wrap"
     v-cloak
+    class="time_tracker time-tracking-component-wrap"
   >
     <time-tracking-collapsed-state
       :show-comparison-state="showComparisonState"
@@ -116,8 +116,8 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div
-        class="help-button float-right"
         v-if="!showHelpState"
+        class="help-button float-right"
         @click="toggleHelpState(true)"
       >
         <i
@@ -127,8 +127,8 @@ export default {
         </i>
       </div>
       <div
-        class="close-help-button float-right"
         v-if="showHelpState"
+        class="close-help-button float-right"
         @click="toggleHelpState(false)"
       >
         <i
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 1608858da22..c44419d24e6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -118,8 +118,8 @@ export default {
             </a>
           </template>
           <span
-            v-if="hasDeploymentTime"
             v-tooltip
+            v-if="hasDeploymentTime"
             :title="deployment.deployed_at_formatted"
             class="js-deploy-time"
           >
@@ -127,9 +127,9 @@ export default {
           </span>
           <loading-button
             v-if="deployment.stop_url"
+            :loading="isStopping"
             container-class="btn btn-default btn-sm prepend-left-default"
             label="Stop environment"
-            :loading="isStopping"
             @click="stopEnvironment"
           />
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index 8338fde61c7..22c2f74f900 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
@@ -35,17 +35,17 @@
 <template>
   <a
     :href="authorUrl"
-    class="author-link inline"
     :v-tooltip="showAuthorTooltip"
     :title="author.name"
+    class="author-link inline"
   >
     <img
       :src="avatarUrl"
       class="avatar avatar-inline s16"
     />
     <span
-      class="author"
       v-if="showAuthorName"
+      class="author"
     >
       {{ author.name }}
     </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 51a0fda6555..3ce9d8dc26a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -59,11 +59,11 @@ export default {
       <strong>
         {{ s__("mrWidget|Request to merge") }}
         <span
-          class="label-branch js-source-branch"
           :class="{ 'label-truncated': isSourceBranchLong }"
           :title="isSourceBranchLong ? mr.sourceBranch : ''"
-          data-placement="bottom"
           :v-tooltip="isSourceBranchLong"
+          class="label-branch js-source-branch"
+          data-placement="bottom"
           v-html="mr.sourceBranchLink"
         >
         </span>
@@ -77,10 +77,10 @@ export default {
         {{ s__("mrWidget|into") }}
 
         <span
-          class="label-branch"
           :v-tooltip="isTargetBranchLong"
           :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
           :title="isTargetBranchLong ? mr.targetBranch : ''"
+          class="label-branch"
           data-placement="bottom"
         >
           <a
@@ -108,9 +108,9 @@ export default {
         {{ s__("mrWidget|Web IDE") }}
       </a>
       <button
+        :disabled="mr.sourceBranchRemoved"
         data-target="#modal_merge_info"
         data-toggle="modal"
-        :disabled="mr.sourceBranchRemoved"
         class="btn btn-sm btn-default inline js-check-out-branch"
         type="button"
       >
@@ -134,8 +134,8 @@ export default {
         <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
-              class="js-download-email-patches"
               :href="mr.emailPatchesPath"
+              class="js-download-email-patches"
               download
             >
               {{ s__("mrWidget|Email patches") }}
@@ -143,8 +143,8 @@ export default {
           </li>
           <li>
             <a
-              class="js-download-plain-diff"
               :href="mr.plainDiffPath"
+              class="js-download-plain-diff"
               download
             >
               {{ s__("mrWidget|Plain diff") }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 48dff8c4916..2f0b5e12c12 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -67,8 +67,8 @@ export default {
       </template>
       <template v-else-if="hasPipeline">
         <a
-          class="append-right-10"
           :href="status.details_path"
+          class="append-right-10"
         >
           <ci-icon :status="status" />
         </a>
@@ -96,8 +96,8 @@ export default {
 
           <span class="mr-widget-pipeline-graph">
             <span
-              class="stage-cell"
               v-if="hasStages"
+              class="stage-cell"
             >
               <div
                 v-for="(stage, i) in pipeline.details.stages"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index 460437ceeff..56879c04d16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -25,9 +25,9 @@
     </span>
     <i
       v-tooltip
-      class="fa fa-question-circle"
       :title="tooltipTitle"
       :aria-label="tooltipTitle"
+      class="fa fa-question-circle"
     >
     </i>
   </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index b404a592234..2133124347c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -39,10 +39,10 @@
         {{ s__("mrWidget|This merge request failed to be merged automatically") }}
       </span>
       <button
-        @click="refreshWidget"
         :disabled="isRefreshing"
         type="button"
         class="btn btn-sm btn-default"
+        @click="refreshWidget"
       >
         <loading-icon
           v-if="isRefreshing"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index caeaac75b45..ae6630dcd6f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="loading"
       :show-disabled-button="true"
+      status="loading"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index 5c1500ab801..dff9ec657b9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -20,8 +20,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index 05fecd4de35..e58d7f026c5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -76,14 +76,14 @@ export default {
     </template>
     <template v-else>
       <status-icon
-        status="warning"
         :show-disabled-button="true"
+        status="warning"
       />
       <div class="media-body space-children">
         <span class="bold">
           <span
-            class="has-error-message"
             v-if="mr.mergeError"
+            class="has-error-message"
           >
             {{ mr.mergeError }}.
           </span>
@@ -97,9 +97,9 @@ export default {
           </span>
         </span>
         <button
-          @click="refresh"
           class="btn btn-default btn-sm js-refresh-button"
           type="button"
+          @click="refresh"
         >
           {{ s__("mrWidget|Refresh now") }}
         </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
index e8352c362d6..0d9a560c88e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -90,11 +90,11 @@
         </span>
         <a
           v-if="mr.canCancelAutomaticMerge"
-          @click.prevent="cancelAutomaticMerge"
           :disabled="isCancellingAutoMerge"
           role="button"
           href="#"
-          class="btn btn-sm btn-default js-cancel-auto-merge">
+          class="btn btn-sm btn-default js-cancel-auto-merge"
+          @click.prevent="cancelAutomaticMerge">
           <i
             v-if="isCancellingAutoMerge"
             class="fa fa-spinner fa-spin"
@@ -127,10 +127,10 @@
           <a
             v-if="canRemoveSourceBranch"
             :disabled="isRemovingSourceBranch"
-            @click.prevent="removeSourceBranch"
             role="button"
             class="btn btn-sm btn-default js-remove-source-branch"
             href="#"
+            @click.prevent="removeSourceBranch"
           >
             <i
               v-if="isRemovingSourceBranch"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index eb581b807a2..a9285d58035 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -116,44 +116,44 @@
           :date-readable="mr.metrics.readableMergedAt"
         />
         <a
-          v-if="mr.canRevertInCurrentMR"
           v-tooltip
+          v-if="mr.canRevertInCurrentMR"
+          :title="revertTitle"
           class="btn btn-close btn-sm"
           href="#modal-revert-commit"
           data-toggle="modal"
           data-container="body"
-          :title="revertTitle"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-else-if="mr.revertInForkPath"
           v-tooltip
-          class="btn btn-close btn-sm"
-          data-method="post"
+          v-else-if="mr.revertInForkPath"
           :href="mr.revertInForkPath"
           :title="revertTitle"
+          class="btn btn-close btn-sm"
+          data-method="post"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-if="mr.canCherryPickInCurrentMR"
           v-tooltip
+          v-if="mr.canCherryPickInCurrentMR"
+          :title="cherryPickTitle"
           class="btn btn-default btn-sm"
           href="#modal-cherry-pick-commit"
           data-toggle="modal"
           data-container="body"
-          :title="cherryPickTitle"
         >
           {{ cherryPickLabel }}
         </a>
         <a
-          v-else-if="mr.cherryPickInForkPath"
           v-tooltip
-          class="btn btn-default btn-sm"
-          data-method="post"
+          v-else-if="mr.cherryPickInForkPath"
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
+          class="btn btn-default btn-sm"
+          data-method="post"
         >
           {{ cherryPickLabel }}
         </a>
@@ -186,10 +186,10 @@
         >
           <span>{{ s__("mrWidget|You can remove source branch now") }}</span>
           <button
-            @click="removeSourceBranch"
             :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-default js-remove-branch-button"
+            @click="removeSourceBranch"
           >
             {{ s__("mrWidget|Remove Source Branch") }}
           </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 718c0e4b3c6..b0e96f74626 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -39,8 +39,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
@@ -51,9 +51,9 @@
         {{ missingBranchNameMessage }}
         <i
           v-tooltip
-          class="fa fa-question-circle"
           :title="message"
           :aria-label="message"
+          class="fa fa-question-circle"
         >
         </i>
       </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index e4af50b09f8..92eee2cf5dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -12,8 +12,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="success"
       :show-disabled-button="true"
+      status="success"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 6d7cc03f7ad..37ee5215cea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 143fd328d88..2d8c3d6be87 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -110,9 +110,9 @@
 js-toggle-container accept-action media space-children"
         >
           <button
+            :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
-            :disabled="isMakingRequest"
             @click="rebase"
           >
             <loading-icon v-if="isMakingRequest" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
index 875c3323dbb..25c1044fe2b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -37,23 +37,23 @@ export default {
   <div class="accept-control inline">
     <label class="merge-param-checkbox">
       <input
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
         type="checkbox"
         name="squash"
         class="qa-squash-checkbox"
-        :disabled="isMergeButtonDisabled"
-        v-model="squashBeforeMerge"
         @change="updateSquashModel"
       />
       {{ __('Squash commits') }}
     </label>
     <a
+      v-tooltip
       :href="mr.squashBeforeMergeHelpPath"
       data-title="About this feature"
       data-placement="bottom"
       target="_blank"
       rel="noopener noreferrer nofollow"
       data-container="body"
-      v-tooltip
     >
       <icon
         name="question-o"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
index 8d55477929f..2bb1a34412e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -12,8 +12,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 3a194320bd8..fe777a07189 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -235,11 +235,11 @@ export default {
       <div class="mr-widget-body-controls media space-children">
         <span class="btn-group append-bottom-5">
           <button
-            @click="handleMergeButtonClick()"
             :disabled="isMergeButtonDisabled"
             :class="mergeButtonClass"
             type="button"
-            class="qa-merge-button">
+            class="qa-merge-button"
+            @click="handleMergeButtonClick()">
             <i
               v-if="isMakingRequest"
               class="fa fa-spinner fa-spin"
@@ -265,28 +265,28 @@ export default {
             role="menu">
             <li>
               <a
-                @click.prevent="handleMergeButtonClick(true)"
                 class="merge_when_pipeline_succeeds"
-                href="#">
+                href="#"
+                @click.prevent="handleMergeButtonClick(true)">
                 <span class="media">
                   <span
-                    v-html="successSvg"
                     class="merge-opt-icon"
-                    aria-hidden="true"></span>
+                    aria-hidden="true"
+                    v-html="successSvg"></span>
                   <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
                 </span>
               </a>
             </li>
             <li>
               <a
-                @click.prevent="handleMergeButtonClick(false, true)"
                 class="accept-merge-request"
-                href="#">
+                href="#"
+                @click.prevent="handleMergeButtonClick(false, true)">
                 <span class="media">
                   <span
-                    v-html="warningSvg"
                     class="merge-opt-icon"
-                    aria-hidden="true"></span>
+                    aria-hidden="true"
+                    v-html="warningSvg"></span>
                   <span class="media-body merge-opt-title">Merge immediately</span>
                 </span>
               </a>
@@ -299,8 +299,8 @@ export default {
               <input
                 id="remove-source-branch-input"
                 v-model="removeSourceBranch"
-                class="js-remove-source-branch-checkbox"
                 :disabled="isRemoveSourceBranchButtonDisabled"
+                class="js-remove-source-branch-checkbox"
                 type="checkbox"/> Remove source branch
             </label>
 
@@ -317,10 +317,10 @@ export default {
             </span>
             <button
               v-else
-              @click="toggleCommitMessageEditor"
               :disabled="isMergeButtonDisabled"
               class="js-modify-commit-message-button btn btn-default btn-sm"
-              type="button">
+              type="button"
+              @click="toggleCommitMessageEditor">
               Modify commit message
             </button>
           </template>
@@ -356,8 +356,8 @@ export default {
             </p>
             <div class="hint">
               <a
-                @click.prevent="updateCommitMessage"
                 href="#"
+                @click.prevent="updateCommitMessage"
               >
                 {{ commitMessageLinkTitle }}
               </a>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 7cc07401911..16c903c923f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -12,8 +12,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 8ea3f22ecc2..5eb2058a03b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -18,8 +18,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index fe2608e8212..7078e19d8bf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -43,8 +43,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="Boolean(mr.removeWIPPath)"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
@@ -60,10 +60,10 @@ export default {
       </span>
       <button
         v-if="mr.removeWIPPath"
-        @click="removeWIP"
         :disabled="isMakingRequest"
         type="button"
-        class="btn btn-default btn-xs js-remove-wip">
+        class="btn btn-default btn-xs js-remove-wip"
+        @click="removeWIP">
         <i
           v-if="isMakingRequest"
           class="fa fa-spinner fa-spin"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 098e8178265..bc4ba3d050b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -283,8 +283,8 @@ export default {
       />
     </div>
     <div
-      class="mr-widget-footer"
       v-if="shouldRenderMergeHelp"
+      class="mr-widget-footer"
     >
       <mr-widget-merge-help />
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 0d64efcbf68..a2518e2a611 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -50,9 +50,9 @@ export default {
 </script>
 <template>
   <a
+    v-tooltip
     :href="status.details_path"
     :class="cssClass"
-    v-tooltip
     :title="!showText ? status.text : ''"
   >
     <ci-icon :status="status" />
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index cb2cc3901ad..dc5760bce28 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -49,14 +49,14 @@ export default {
 
 <template>
   <button
-    type="button"
-    class="btn"
+    v-tooltip
     :class="cssClass"
     :title="title"
     :data-clipboard-text="text"
-    v-tooltip
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
+    type="button"
+    class="btn"
   >
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 8f250a6c989..13bca99dcb3 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -124,11 +124,11 @@ export default {
       </div>
 
       <a
-        class="ref-name"
-        :href="commitRef.ref_url"
         v-tooltip
-        data-container="body"
+        :href="commitRef.ref_url"
         :title="commitRef.name"
+        class="ref-name"
+        data-container="body"
       >
         {{ commitRef.name }}
       </a>
@@ -139,8 +139,8 @@ export default {
     />
 
     <a
-      class="commit-sha"
       :href="commitUrl"
+      class="commit-sha"
     >
       {{ shortSha }}
     </a>
@@ -152,15 +152,15 @@ export default {
       >
         <user-avatar-link
           v-if="hasAuthor"
-          class="avatar-image-container"
           :link-href="author.path"
           :img-src="author.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="author.username"
+          class="avatar-image-container"
         />
         <a
-          class="commit-row-message"
           :href="commitUrl"
+          class="commit-row-message"
         >
           {{ title }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index 7b5367ac19b..f9fda5356e6 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -41,9 +41,9 @@ export default {
         download
         target="_blank">
         <icon
+          :size="16"
           name="download"
           css-classes="float-left append-right-8"
-          :size="16"
         />
         {{ __('Download') }}
       </a>
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
index 424af5a0293..9c1e5c68649 100644
--- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
@@ -86,8 +86,8 @@
   <div class="modal-open">
     <div
       :id="id"
-      class="modal"
       :class="id ? '' : 'd-block'"
+      class="modal"
       role="dialog"
       tabindex="-1"
     >
@@ -105,9 +105,9 @@
               <button
                 type="button"
                 class="close float-right"
-                @click="emitCancel($event)"
                 data-dismiss="modal"
                 aria-label="Close"
+                @click="emitCancel($event)"
               >
                 <span aria-hidden="true">&times;</span>
               </button>
@@ -115,22 +115,22 @@
           </div>
           <div class="modal-body">
             <slot
-              name="body"
               :text="text"
+              name="body"
             >
               <p>{{ text }}</p>
             </slot>
           </div>
           <div
-            class="modal-footer"
             v-if="!hideFooter"
+            class="modal-footer"
           >
             <button
+              :class="btnCancelKindClass"
               type="button"
               class="btn"
-              :class="btnCancelKindClass"
-              @click="emitCancel($event)"
               data-dismiss="modal"
+              @click="emitCancel($event)"
             >
               {{ closeButtonLabel }}
             </button>
@@ -151,12 +151,12 @@
 
             <button
               v-if="primaryButtonLabel"
-              type="button"
-              class="btn js-primary-button"
               :disabled="submitDisabled"
               :class="btnKindClass"
-              @click="emitSubmit($event)"
+              type="button"
+              class="btn js-primary-button"
               data-dismiss="modal"
+              @click="emitSubmit($event)"
             >
               {{ primaryButtonLabel }}
             </button>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index c159333d89a..3cba0c5e633 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -28,11 +28,11 @@ export default {
 
 <template>
   <button
+    :disabled="isDisabled || isLoading"
     class="dropdown-menu-toggle dropdown-menu-full-width"
     type="button"
     data-toggle="dropdown"
     aria-expanded="false"
-    :disabled="isDisabled || isLoading"
   >
     <loading-icon
       v-show="isLoading"
@@ -42,8 +42,8 @@ export default {
       {{ toggleText }}
     </span>
     <span
-      class="dropdown-toggle-icon"
       v-show="!isLoading"
+      class="dropdown-toggle-icon"
     >
       <i
         class="fa fa-chevron-down"
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
index 1fe27eb97ab..b7a4613bdd2 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
@@ -15,8 +15,8 @@ export default {
 
 <template>
   <input
-    type="hidden"
     :name="name"
     :value="value"
+    type="hidden"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index c2145a26e64..7f1912f6405 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -23,10 +23,10 @@ export default {
 <template>
   <div class="dropdown-input">
     <input
-      class="dropdown-input-field"
-      type="search"
       v-model="searchQuery"
       :placeholder="placeholderText"
+      class="dropdown-input-field"
+      type="search"
       autocomplete="off"
     />
     <i
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index 9295be3e2b2..0fdea651130 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -32,10 +32,10 @@ export default {
 <template>
   <span>
     <button
-      type="button"
       v-show="isCollapsed"
-      class="text-expander btn-blank"
       :aria-label="ariaLabel"
+      type="button"
+      class="text-expander btn-blank"
       @click="onClick">
       ...
     </button>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index be2755452e2..878c805ada5 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -73,8 +73,8 @@ export default {
 <template>
   <span>
     <svg
-      :class="[iconSizeClass, cssClasses]"
       v-if="!loading && !folder"
+      :class="[iconSizeClass, cssClasses]"
     >
       <use v-bind="{ 'xlink:href':spriteHref }" />
     </svg>
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index 7ba58bd5959..c03a342e777 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -57,8 +57,8 @@ export default {
     role="dialog"
   >
     <div
-      class="modal-dialog"
       :class="modalSizeClass"
+      class="modal-dialog"
       role="document"
     >
       <div class="modal-content">
@@ -70,10 +70,10 @@ export default {
               </slot>
             </h4>
             <button
+              :aria-label="s__('Modal|Close')"
               type="button"
               class="close js-modal-close-action"
               data-dismiss="modal"
-              :aria-label="s__('Modal|Close')"
               @click="emitCancel($event)"
             >
               <span aria-hidden="true">&times;</span>
@@ -96,9 +96,9 @@ export default {
               {{ s__('Modal|Cancel') }}
             </button>
             <button
+              :class="`btn-${footerPrimaryButtonVariant}`"
               type="button"
               class="btn js-modal-primary-action"
-              :class="`btn-${footerPrimaryButtonVariant}`"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index ca17fa06a00..62d35f6547d 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -117,8 +117,8 @@ export default {
     </section>
 
     <section
-      class="header-action-buttons"
       v-if="actions.length"
+      class="header-action-buttons"
     >
       <template
         v-for="(action, i) in actions"
@@ -135,21 +135,21 @@ export default {
         <a
           v-else-if="action.type === 'ujs-link'"
           :href="action.path"
-          data-method="post"
-          rel="nofollow"
           :class="action.cssClass"
           :key="i"
+          data-method="post"
+          rel="nofollow"
         >
           {{ action.label }}
         </a>
 
         <button
           v-else-if="action.type === 'button'"
-          @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button"
           :key="i"
+          type="button"
+          @click="onClickAction(action)"
         >
           {{ action.label }}
           <i
@@ -162,11 +162,11 @@ export default {
       </template>
       <button
         v-if="hasSidebarButton"
+        id="toggleSidebar"
         type="button"
         class="btn btn-default d-block d-sm-none d-md-none
 sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
         aria-label="Toggle Sidebar"
-        id="toggleSidebar"
       >
         <i
           class="fa fa-angle-double-left"
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 23010f40f26..4ffc811e714 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -43,9 +43,9 @@ export default {
 
 <template>
   <div
-    class="avatar identicon"
     :class="sizeClass"
-    :style="identiconStyles">
+    :style="identiconStyles"
+    class="avatar identicon">
     {{ identiconTitle }}
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 3d39b3ab173..ca8ce554588 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -33,11 +33,11 @@
 <template>
   <div class="issuable-note-warning">
     <icon
+      v-if="!isLockedAndConfidential"
       :name="warningIcon"
       :size="16"
       class="icon inline"
       aria-hidden="true"
-      v-if="!isLockedAndConfidential"
     />
 
     <span v-if="isLockedAndConfidential">
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 88c13a1f340..2ff0c056b9c 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -54,19 +54,19 @@
 
 <template>
   <button
-    @click="onClick"
-    type="button"
     :class="containerClass"
     :disabled="loading || disabled"
+    type="button"
+    @click="onClick"
   >
     <transition name="fade">
       <loading-icon
         v-if="loading"
         :inline="true"
-        class="js-loading-button-icon"
         :class="{
           'append-right-5': label
         }"
+        class="js-loading-button-icon"
       />
     </transition>
     <transition name="fade">
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 12a75e016d7..db22c5f02cd 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -35,10 +35,10 @@
     :is="rootElementType"
     class="loading-container text-center">
     <i
-      class="fa fa-spin fa-spinner"
       :class="cssClass"
-      aria-hidden="true"
       :aria-label="label"
+      class="fa fa-spin fa-spinner"
+      aria-hidden="true"
     >
     </i>
   </component>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 12c7d125062..05e8ed2da2c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -117,17 +117,17 @@
 
 <template>
   <div
-    class="md-area js-vue-markdown-field"
+    ref="gl-form"
     :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
-    ref="gl-form">
+    class="md-area js-vue-markdown-field">
     <markdown-header
       :preview-markdown="previewMarkdown"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
     />
     <div
-      class="md-write-holder"
       v-show="!previewMarkdown"
+      class="md-write-holder"
     >
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
@@ -137,8 +137,8 @@
           aria-label="Enter zen mode"
         >
           <icon
-            name="screen-normal"
             :size="32"
+            name="screen-normal"
           />
         </a>
         <markdown-toolbar
@@ -149,8 +149,8 @@
       </div>
     </div>
     <div
-      class="md md-preview-holder md-preview"
       v-show="previewMarkdown"
+      class="md md-preview-holder md-preview"
     >
       <div
         ref="markdown-preview"
@@ -164,8 +164,8 @@
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div
         v-if="referencedCommands"
-        v-html="referencedCommands"
         class="referenced-commands"
+        v-html="referencedCommands"
       >
       </div>
       <div
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index db453c30576..ee3628b1e3f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -54,8 +54,8 @@
   <div class="md-header">
     <ul class="nav-links clearfix">
       <li
-        class="md-header-tab"
         :class="{ active: !previewMarkdown }"
+        class="md-header-tab"
       >
         <a
           class="js-write-link"
@@ -67,8 +67,8 @@
         </a>
       </li>
       <li
-        class="md-header-tab"
         :class="{ active: previewMarkdown }"
+        class="md-header-tab"
       >
         <a
           class="js-preview-link"
@@ -80,8 +80,8 @@
         </a>
       </li>
       <li
-        class="md-header-toolbar"
         :class="{ active: !previewMarkdown }"
+        class="md-header-toolbar"
       >
         <toolbar-button
           tag="**"
@@ -94,8 +94,8 @@
           icon="italic"
         />
         <toolbar-button
-          tag="> "
           :prepend="true"
+          tag="> "
           button-title="Insert a quote"
           icon="quote"
         />
@@ -106,20 +106,20 @@
           icon="code"
         />
         <toolbar-button
-          tag="* "
           :prepend="true"
+          tag="* "
           button-title="Add a bullet list"
           icon="list-bulleted"
         />
         <toolbar-button
-          tag="1. "
           :prepend="true"
+          tag="1. "
           button-title="Add a numbered list"
           icon="list-numbered"
         />
         <toolbar-button
-          tag="* [ ] "
           :prepend="true"
+          tag="* [ ] "
           button-title="Add a task list"
           icon="task-done"
         />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 2d2d69ebeb2..9f1e009efdd 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -39,15 +39,15 @@
 <template>
   <button
     v-tooltip
-    type="button"
-    class="toolbar-btn js-md"
-    tabindex="-1"
-    data-container="body"
     :data-md-tag="tag"
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
     :title="buttonTitle"
     :aria-label="buttonTitle"
+    type="button"
+    class="toolbar-btn js-md"
+    tabindex="-1"
+    data-container="body"
   >
     <icon
       :name="icon"
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index b07f6b07afe..522091ea889 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.vue
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -113,19 +113,19 @@ export default {
 <template>
   <div class="memory-graph-container">
     <svg
-      class="has-tooltip"
       :title="getFormattedMedian"
       :width="width"
       :height="height"
+      class="has-tooltip"
       xmlns="http://www.w3.org/2000/svg">
       <path
         :d="pathD"
         :viewBox="pathViewBox"
       />
       <circle
-        r="1.5"
         :cx="dotX"
         :cy="dotY"
+        r="1.5"
         tranform="translate(0 -1)"
       />
     </svg>
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index 08d4936f480..99d61b5639d 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -59,9 +59,9 @@ export default {
       }"
     >
       <a
+        :class="`js-${scope}-tab-${tab.scope}`"
         role="button"
         @click="onTabClick(tab)"
-        :class="`js-${scope}-tab-${tab.scope}`"
       >
         {{ tab.name }}
 
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index abbe9a22717..8c2dcc2d902 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -82,9 +82,9 @@
 
 <template>
   <div
-    class="dragHandle"
     :class="className"
     :style="cursorStyle"
+    class="dragHandle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
index 279cc1de5bb..97ca4d93bd7 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -85,7 +85,6 @@
 <template>
   <img
     v-tooltip
-    class="avatar"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -99,5 +98,6 @@
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 21ffdc1dc86..a2a9a5e6987 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -66,10 +66,10 @@
 
 <template>
   <deprecated-modal
-    kind="warning"
-    class="recaptcha-modal js-recaptcha-modal"
     :hide-footer="true"
     :title="__('Please solve the reCAPTCHA')"
+    kind="warning"
+    class="recaptcha-modal js-recaptcha-modal"
     @cancel="close"
   >
     <div slot="body">
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 71ec34f2c7a..74998a4787d 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -97,8 +97,8 @@
 
 <template>
   <div
-    class="block"
     :class="blockClass"
+    class="block"
   >
     <div class="issuable-sidebar-header">
       <toggle-sidebar
@@ -107,8 +107,8 @@
       />
     </div>
     <collapsed-calendar-icon
-      class="sidebar-collapsed-icon"
       :text="collapsedText"
+      class="sidebar-collapsed-icon"
     />
     <div class="title">
       {{ label }}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index f155ac2be02..a3fc358130f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -143,8 +143,8 @@ export default {
         :value="label.id"
       />
       <div
-        class="dropdown"
         ref="dropdown"
+        class="dropdown"
       >
         <dropdown-button
           :ability-name="abilityName"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
index 47497c1de98..48d2f16f554 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
@@ -53,10 +53,7 @@ export default {
 
 <template>
   <button
-    type="button"
     ref="dropdownButton"
-    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
-    data-toggle="dropdown"
     :class="{ 'js-extra-options': showExtraOptions }"
     :data-ability-name="abilityName"
     :data-field-name="fieldName"
@@ -64,6 +61,9 @@ export default {
     :data-labels="labelsPath"
     :data-namespace-path="namespace"
     :data-show-any="showExtraOptions"
+    type="button"
+    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
+    data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text">
       {{ dropdownToggleText }}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
index 3c400afdc1d..fe895136ccc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
@@ -19,9 +19,9 @@ export default {
   <div class="dropdown-page-two dropdown-new-label">
     <div class="dropdown-title">
       <button
+        :aria-label="__('Go back')"
         type="button"
         class="dropdown-title-button dropdown-menu-back"
-        :aria-label="__('Go back')"
       >
         <i
           aria-hidden="true"
@@ -32,9 +32,9 @@ export default {
       </button>
       {{ headerTitle }}
       <button
+        :aria-label="__('Close')"
         type="button"
         class="dropdown-title-button dropdown-menu-close"
-        :aria-label="__('Close')"
       >
         <i
           aria-hidden="true"
@@ -48,19 +48,19 @@ export default {
       <div class="dropdown-labels-error js-label-error"></div>
       <input
         id="new_label_name"
+        :placeholder="__('Name new label')"
         type="text"
         class="default-dropdown-input"
-        :placeholder="__('Name new label')"
       />
       <div class="suggest-colors suggest-colors-dropdown">
         <a
           v-for="(color, index) in suggestedColors"
-          href="#"
           :key="index"
           :data-color="color"
           :style="{
             backgroundColor: color,
           }"
+          href="#"
         >
           &nbsp;
         </a>
@@ -69,9 +69,9 @@ export default {
         <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div>
         <input
           id="new_label_color"
+          :placeholder="__('Assign custom color like #FF0000')"
           type="text"
           class="default-dropdown-input"
-          :placeholder="__('Assign custom color like #FF0000')"
         />
       </div>
       <div class="clearfix">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
index 5f61e9fbe80..d64ad016f9b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
@@ -34,9 +34,9 @@ export default {
       </li>
       <li>
         <a
+          :href="labelsWebUrl"
           data-is-link="true"
           class="dropdown-external-link"
-          :href="labelsWebUrl"
         >
           {{ manageLabelsTitle }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
index 7664acdf19c..e98b6392827 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
@@ -6,9 +6,9 @@ export default {};
   <div class="dropdown-title">
     <span>{{ __('Assign labels') }}</span>
     <button
+      :aria-label="__('Close')"
       type="button"
       class="dropdown-title-button dropdown-menu-close"
-      :aria-label="__('Close')"
     >
       <i
         aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
index ae633460c95..80d65a2a534 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
@@ -5,10 +5,10 @@ export default {};
 <template>
   <div class="dropdown-input">
     <input
+      :placeholder="__('Search')"
       autocomplete="off"
       class="dropdown-input-field"
       type="search"
-      :placeholder="__('Search')"
     />
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
index 88360b46f24..10e990f8a80 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
@@ -36,10 +36,10 @@ export default {
 
 <template>
   <div
-    class="hide-collapsed value issuable-show-labels js-value"
     :class="{
       'has-labels':!isEmpty,
     }"
+    class="hide-collapsed value issuable-show-labels js-value"
   >
     <span
       v-if="isEmpty"
@@ -48,18 +48,18 @@ export default {
       <slot>{{ __('None') }}</slot>
     </span>
     <a
-      v-else
       v-for="label in labels"
+      v-else
       :key="label.id"
       :href="labelFilterUrl(label)"
     >
       <span
         v-tooltip
+        :style="labelStyle(label)"
+        :title="label.description"
         class="badge color-label"
         data-placement="bottom"
         data-container="body"
-        :style="labelStyle(label)"
-        :title="label.description"
       >
         {{ label.title }}
       </span>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
index 68fa2ab8d01..af297f3c408 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
@@ -37,10 +37,10 @@ export default {
 <template>
   <div
     v-tooltip
+    :title="labelsList"
     class="sidebar-collapsed-icon"
     data-placement="left"
     data-container="body"
-    :title="labelsList"
     @click="handleClick"
   >
     <i
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
index de6f8c32e74..ac2e99abe77 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -28,21 +28,21 @@ export default {
 
 <template>
   <button
+    v-tooltip
+    :title="tooltipLabel"
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
-    @click="toggle"
-    v-tooltip
     data-container="body"
     data-placement="left"
-    :title="tooltipLabel"
+    @click="toggle"
   >
     <i
-      aria-label="toggle collapse"
-      class="fa"
       :class="{
         'fa-angle-double-right': !collapsed,
         'fa-angle-double-left': collapsed
       }"
+      aria-label="toggle collapse"
+      class="fa"
     >
     </i>
   </button>
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index 16304e4815d..4a5ffbe5d5a 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -22,10 +22,10 @@
 
 <template>
   <div
-    class="animation-container"
     :class="{
       'animation-container-small': small,
     }"
+    class="animation-container"
   >
     <div
       v-for="(css, index) in lineClasses"
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index 86f06c8d266..b1c2df54ef6 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <div
-    class="stacked-progress-bar"
     :class="cssClass"
+    class="stacked-progress-bar"
   >
     <span
       v-if="!totalCount"
@@ -96,30 +96,30 @@ export default {
     <span
       v-tooltip
       v-if="successPercent"
-      class="status-green"
-      data-placement="bottom"
       :title="successTooltip"
       :style="successBarStyle"
+      class="status-green"
+      data-placement="bottom"
     >
       {{ successPercent }}%
     </span>
     <span
       v-tooltip
       v-if="neutralPercent"
-      class="status-neutral"
-      data-placement="bottom"
       :title="neutralTooltip"
       :style="neutralBarStyle"
+      class="status-neutral"
+      data-placement="bottom"
     >
       {{ neutralPercent }}%
     </span>
     <span
       v-tooltip
       v-if="failurePercent"
-      class="status-red"
-      data-placement="bottom"
       :title="failureTooltip"
       :style="failureBarStyle"
+      class="status-red"
+      data-placement="bottom"
     >
       {{ failurePercent }}%
     </span>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 6f231619f26..2370e59d017 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -153,8 +153,8 @@
         class="page-item"
       >
         <a
-          @click.prevent="changePage(item.title, item.disabled)"
           class="page-link"
+          @click.prevent="changePage(item.title, item.disabled)"
         >
           {{ item.title }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
index 9b2f46186ac..1c6011dcfd0 100644
--- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue
+++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
@@ -36,10 +36,10 @@ export default {
 
 <template>
   <div
-    class="tab-pane"
     :class="{
       active: localActive
     }"
+    class="tab-pane"
     role="tabpanel"
   >
     <slot></slot>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 09031d3ffa1..a897300b62b 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -63,26 +63,26 @@
   <label class="toggle-wrapper">
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <button
-      type="button"
-      class="project-feature-toggle"
       :aria-label="ariaLabel"
       :class="{
         'is-checked': value,
         'is-disabled': disabledInput,
         'is-loading': isLoading
       }"
+      type="button"
+      class="project-feature-toggle"
       @click="toggleFeature"
     >
       <loadingIcon class="loading-icon" />
       <span class="toggle-icon">
         <icon
-          css-classes="toggle-icon-svg"
-          :name="toggleIcon"/>
+          :name="toggleIcon"
+          css-classes="toggle-icon-svg"/>
       </span>
     </button>
   </label>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index cc9cc46bb4c..de4d3045238 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -85,7 +85,6 @@ export default {
 <template>
   <img
     v-tooltip
-    class="avatar"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -99,5 +98,6 @@ export default {
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 6955d164def..01c36fec41a 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <a
-    class="user-avatar-link"
-    :href="linkHref">
+    :href="linkHref"
+    class="user-avatar-link">
     <user-avatar-image
       :img-src="imgSrc"
       :img-alt="imgAlt"
@@ -94,8 +94,8 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     /><span
-      v-if="shouldShowUsername"
       v-tooltip
+      v-if="shouldShowUsername"
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
     >{{ username }}</span>
diff --git a/package.json b/package.json
index 4a3dbb34bee..4e1ca905ee8 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jasmine": "^2.1.0",
     "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-vue": "^4.0.1",
+    "eslint-plugin-vue": "^4.5.0",
     "ignore": "^3.3.7",
     "istanbul": "^0.4.5",
     "jasmine-core": "^2.9.0",
diff --git a/yarn.lock b/yarn.lock
index 7a417428ce2..65d78173a5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -270,10 +270,14 @@ acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
+acorn@^5.0.0, acorn@^5.3.0:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
 
+acorn@^5.5.0:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
@@ -2903,12 +2907,11 @@ eslint-plugin-promise@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
 
-eslint-plugin-vue@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.0.1.tgz#afda92cfd7e7363b1fbdb1a772dd63359a9ce96a"
+eslint-plugin-vue@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.5.0.tgz#09d6597f4849e31a3846c2c395fccf17685b69c3"
   dependencies:
-    require-all "^2.2.0"
-    vue-eslint-parser "^2.0.1"
+    vue-eslint-parser "^2.0.3"
 
 eslint-restricted-globals@^0.1.1:
   version "0.1.1"
@@ -2987,30 +2990,25 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
 
 esquery@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   dependencies:
     estraverse "^4.0.0"
 
 esrecurse@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
   dependencies:
-    estraverse "~4.1.0"
-    object-assign "^4.0.1"
+    estraverse "^4.1.0"
 
 estraverse@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
 
-estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
-estraverse@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
-
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -6774,10 +6772,6 @@ requestretry@^1.2.2:
     request "^2.74.0"
     when "^3.7.7"
 
-require-all@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/require-all/-/require-all-2.2.0.tgz#b4420c233ac0282d0ff49b277fb880a8b5de0894"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8046,7 +8040,7 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-eslint-parser@^2.0.1:
+vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
   dependencies: