diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index ca1662313c2..ae6029142fe 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -65,12 +65,7 @@ export default {
 
 <template>
   <div>
-    <a
-      v-show="!isLoading && !hasError"
-      :href="linkUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <a v-show="!isLoading && !hasError" :href="linkUrl" target="_blank" rel="noopener noreferrer">
       <img
         :src="imageUrlWithRetries"
         class="project-badge"
@@ -80,15 +75,9 @@ export default {
       />
     </a>
 
-    <gl-loading-icon
-      v-show="isLoading"
-      :inline="true"
-    />
+    <gl-loading-icon v-show="isLoading" :inline="true" />
 
-    <div
-      v-show="hasError"
-      class="btn-group"
-    >
+    <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
         <icon
           :size="16"
@@ -97,9 +86,7 @@ export default {
           aria-hidden="true"
         />
       </div>
-      <div
-        class="btn btn-default btn-sm disabled"
-      >
+      <div class="btn btn-default btn-sm disabled">
         <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
       </div>
     </div>
@@ -112,10 +99,7 @@ export default {
       type="button"
       @click="reloadImage"
     >
-      <icon
-        :size="16"
-        name="retry"
-      />
+      <icon :size="16" name="retry" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 0eff922d93c..85a15b38de1 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -155,10 +155,7 @@ export default {
     @submit.prevent.stop="onSubmit"
   >
     <div class="form-group">
-      <label
-        for="badge-link-url"
-        class="label-bold"
-      >{{ s__('Badges|Link') }}</label>
+      <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
       <p v-html="helpText"></p>
       <input
         id="badge-link-url"
@@ -168,19 +165,12 @@ export default {
         required
         @input="debouncedPreview"
       />
-      <div class="invalid-feedback">
-        {{ s__('Badges|Please fill in a valid URL') }}
-      </div>
-      <span class="form-text text-muted">
-        {{ badgeLinkUrlExample }}
-      </span>
+      <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
+      <span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
     </div>
 
     <div class="form-group">
-      <label
-        for="badge-image-url"
-        class="label-bold"
-      >{{ s__('Badges|Badge image URL') }}</label>
+      <label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
       <p v-html="helpText"></p>
       <input
         id="badge-image-url"
@@ -190,12 +180,8 @@ export default {
         required
         @input="debouncedPreview"
       />
-      <div class="invalid-feedback">
-        {{ s__('Badges|Please fill in a valid URL') }}
-      </div>
-      <span class="form-text text-muted">
-        {{ badgeImageUrlExample }}
-      </span>
+      <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
+      <span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
     </div>
 
     <div class="form-group">
@@ -206,37 +192,22 @@ export default {
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
-      <p v-show="isRendering">
-        <gl-loading-icon
-          :inline="true"
-        />
+      <p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
+      <p v-show="!renderedBadge && !isRendering" class="disabled-content">
+        {{ s__('Badges|No image to preview') }}
       </p>
-      <p
-        v-show="!renderedBadge && !isRendering"
-        class="disabled-content"
-      >{{ s__('Badges|No image to preview') }}</p>
     </div>
 
-    <div
-      v-if="isEditing"
-      class="row-content-block"
-    >
+    <div v-if="isEditing" class="row-content-block">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Save changes')"
         type="submit"
         container-class="btn btn-success"
       />
-      <button
-        class="btn btn-cancel"
-        type="button"
-        @click="onCancel"
-      >{{ __('Cancel') }}</button>
+      <button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
     </div>
-    <div
-      v-else
-      class="form-group"
-    >
+    <div v-else class="form-group">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Add badge')"
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index 5b64ea1080c..d2767dd6c64 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -26,32 +26,15 @@ export default {
   <div class="card">
     <div class="card-header">
       {{ s__('Badges|Your badges') }}
-      <span
-        v-show="!isLoading"
-        class="badge badge-pill"
-      >{{ badges.length }}</span>
+      <span v-show="!isLoading" class="badge badge-pill">{{ badges.length }}</span>
     </div>
-    <gl-loading-icon
-      v-show="isLoading"
-      :size="2"
-      class="card-body"
-    />
-    <div
-      v-if="hasNoBadges"
-      class="card-body"
-    >
+    <gl-loading-icon v-show="isLoading" :size="2" class="card-body" />
+    <div v-if="hasNoBadges" class="card-body">
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
-    <div
-      v-else
-      class="card-body"
-    >
-      <badge-list-row
-        v-for="badge in badges"
-        :key="badge.id"
-        :badge="badge"
-      />
+    <div v-else class="card-body">
+      <badge-list-row v-for="badge in badges" :key="badge.id" :badge="badge" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index d01465232a7..9051be1e102 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -50,20 +50,14 @@ export default {
       <span class="badge badge-pill">{{ badgeKindText }}</span>
     </div>
     <div class="table-section section-15 table-button-footer">
-      <div
-        v-if="canEditBadge"
-        class="table-action-buttons">
+      <div v-if="canEditBadge" class="table-action-buttons">
         <button
           :disabled="badge.isDeleting"
           class="btn btn-default append-right-8"
           type="button"
-          @click="editBadge(badge)"
+          @click="editBadge(badge);"
         >
-          <icon
-            :size="16"
-            :aria-label="__('Edit')"
-            name="pencil"
-          />
+          <icon :size="16" :aria-label="__('Edit')" name="pencil" />
         </button>
         <button
           :disabled="badge.isDeleting"
@@ -71,18 +65,11 @@ export default {
           type="button"
           data-toggle="modal"
           data-target="#delete-badge-modal"
-          @click="updateBadgeInModal(badge)"
+          @click="updateBadgeInModal(badge);"
         >
-          <icon
-            :size="16"
-            :aria-label="__('Delete')"
-            name="remove"
-          />
+          <icon :size="16" :aria-label="__('Delete')" name="remove" />
         </button>
-        <gl-loading-icon
-          v-show="badge.isDeleting"
-          :inline="true"
-        />
+        <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index cc47e56dd1e..75a522efe7e 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -46,7 +46,8 @@ export default {
       :header-title-text="s__('Badges|Delete badge?')"
       :footer-primary-button-text="s__('Badges|Delete badge')"
       footer-primary-button-variant="danger"
-      @submit="onSubmitModal">
+      @submit="onSubmitModal"
+    >
       <div class="well">
         <badge
           :image-url="badgeInModal ? badgeInModal.renderedImageUrl : ''"
@@ -56,15 +57,9 @@ export default {
       <p v-html="deleteModalText"></p>
     </gl-modal>
 
-    <badge-form
-      v-show="isEditing"
-      :is-editing="true"
-    />
+    <badge-form v-show="isEditing" :is-editing="true" />
 
-    <badge-form
-      v-show="!isEditing"
-      :is-editing="false"
-    />
+    <badge-form v-show="!isEditing" :is-editing="false" />
     <badge-list v-show="!isEditing" />
   </div>
 </template>
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index befa1dc455f..d0359fc5fe9 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -23,10 +23,12 @@ export default class BlobViewer {
     if (!viewer || !viewer.dataset.richType) return;
 
     const initViewer = promise =>
-      promise.then(module => module.default(viewer)).catch(error => {
-        Flash('Error loading file viewer.');
-        throw error;
-      });
+      promise
+        .then(module => module.default(viewer))
+        .catch(error => {
+          Flash('Error loading file viewer.');
+          throw error;
+        });
 
     switch (viewer.dataset.richType) {
       case 'balsamiq':
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index 561a4636ef5..667eea17d44 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -61,35 +61,25 @@ export default {
 
 <template>
   <div class="board-blank-state">
-    <p>
-      Add the following default lists to your Issue Board with one click:
-    </p>
+    <p>Add the following default lists to your Issue Board with one click:</p>
     <ul class="board-blank-state-list">
-      <li
-        v-for="(label, index) in predefinedLabels"
-        :key="index"
-      >
-        <span
-          :style="{ backgroundColor: label.color }"
-          class="label-color">
-        </span>
+      <li v-for="(label, index) in predefinedLabels" :key="index">
+        <span :style="{ backgroundColor: label.color }" class="label-color"> </span>
         {{ label.title }}
       </li>
     </ul>
     <p>
-      Starting out with the default set of lists will get you
-      right on the way to making the most of your board.
+      Starting out with the default set of lists will get you right on the way to making the most of
+      your board.
     </p>
     <button
       class="btn btn-success btn-inverted btn-block"
       type="button"
-      @click.stop="addDefaultLists">
+      @click.stop="addDefaultLists"
+    >
       Add default lists
     </button>
-    <button
-      class="btn btn-default btn-block"
-      type="button"
-      @click.stop="clearBlankState">
+    <button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState">
       Nevermind, I'll use my own
     </button>
   </div>
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 2f31316aa76..30fbdb9e97f 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -79,14 +79,15 @@ export default {
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
-      'is-active': issueDetailVisible
+      'is-active': issueDetailVisible,
     }"
     :index="index"
     :data-issue-id="issue.id"
     class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)">
+    @mouseup="showIssue($event);"
+  >
     <issue-card-inner
       :list="list"
       :issue="issue"
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index a04b828e277..f3f341ece5c 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -222,23 +222,22 @@ export default {
 
 <template>
   <div class="board-list-component">
-    <div
-      v-if="loading"
-      class="board-list-loading text-center"
-      aria-label="Loading issues">
+    <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
       <gl-loading-icon />
     </div>
     <board-new-issue
       v-if="list.type !== 'closed' && showIssueForm"
       :group-id="groupId"
-      :list="list"/>
+      :list="list"
+    />
     <ul
       v-show="!loading"
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
       :class="{ 'is-smaller': showIssueForm }"
-      class="board-list js-board-list">
+      class="board-list js-board-list"
+    >
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
@@ -249,25 +248,12 @@ export default {
         :issue-link-base="issueLinkBase"
         :group-id="groupId"
         :root-path="rootPath"
-        :disabled="disabled" />
-      <li
-        v-if="showCount"
-        class="board-list-count text-center"
-        data-issue-id="-1">
-        <gl-loading-icon
-          v-show="list.loadingMore"
-          label="Loading more issues"
-        />
-        <span
-          v-if="list.issues.length === list.issuesSize"
-        >
-          Showing all issues
-        </span>
-        <span
-          v-else
-        >
-          Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-        </span>
+        :disabled="disabled"
+      />
+      <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
+        <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
+        <span v-if="list.issues.length === list.issuesSize"> Showing all issues </span>
+        <span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 2a96d1443e1..93bcb4e129e 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -96,21 +96,11 @@ export default {
 <template>
   <div class="board-new-issue-form">
     <div class="board-card">
-      <form @submit="submit($event)">
-        <div
-          v-if="error"
-          class="flash-container"
-        >
-          <div class="flash-alert">
-            An error occurred. Please try again.
-          </div>
+      <form @submit="submit($event);">
+        <div v-if="error" class="flash-container">
+          <div class="flash-alert">An error occurred. Please try again.</div>
         </div>
-        <label
-          :for="list.id + '-title'"
-          class="label-bold"
-        >
-          Title
-        </label>
+        <label :for="list.id + '-title'" class="label-bold"> Title </label>
         <input
           :id="list.id + '-title'"
           ref="input"
@@ -120,10 +110,7 @@ export default {
           name="issue_title"
           autocomplete="off"
         />
-        <project-select
-          v-if="groupId"
-          :group-id="groupId"
-        />
+        <project-select v-if="groupId" :group-id="groupId" />
         <div class="clearfix prepend-top-10">
           <gl-button
             ref="submit-button"
@@ -134,12 +121,7 @@ export default {
           >
             Submit issue
           </gl-button>
-          <gl-button
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="cancel"
-          >
+          <gl-button class="float-right" type="button" variant="default" @click="cancel">
             Cancel
           </gl-button>
         </div>
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 48c46ae32f1..0f581c3d37d 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -169,17 +169,12 @@ export default {
           :title="__('Confidential')"
           class="confidential-icon append-right-4"
           :aria-label="__('Confidential')"
-        /><a
-          :href="issue.path"
-          :title="issue.title"
-          class="js-no-trigger"
-          @mousemove.stop>{{ issue.title }}</a>
+        /><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
+          issue.title
+        }}</a>
       </h4>
     </div>
-    <div
-      v-if="showLabelFooter"
-      class="board-card-labels prepend-top-4 d-flex flex-wrap"
-    >
+    <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
       <button
         v-for="label in issue.labels"
         v-if="showLabel(label)"
@@ -189,13 +184,15 @@ export default {
         :title="label.description"
         class="badge color-label append-right-4 prepend-top-4"
         type="button"
-        @click="filterByLabel(label)"
+        @click="filterByLabel(label);"
       >
         {{ label.title }}
       </button>
     </div>
     <div class="board-card-footer d-flex justify-content-between align-items-end">
-      <div class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container">
+      <div
+        class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
+      >
         <span
           v-if="issue.referencePath"
           class="board-card-number d-flex append-right-8 prepend-top-8"
@@ -205,13 +202,11 @@ export default {
             :title="issueReferencePath"
             placement="bottom"
             class="board-issue-path block-truncated bold"
-          >{{ issueReferencePath }}</tooltip-on-truncate>#{{ issue.iid }}
+            >{{ issueReferencePath }}</tooltip-on-truncate
+          >#{{ issue.iid }}
         </span>
         <span class="board-info-items prepend-top-8 d-inline-block">
-          <issue-due-date
-            v-if="issue.dueDate"
-            :date="issue.dueDate"
-          /><issue-time-estimate
+          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
             v-if="issue.timeEstimate"
             :estimate="issue.timeEstimate"
           />
@@ -230,8 +225,7 @@ export default {
           tooltip-placement="bottom"
         >
           <span class="js-assignee-tooltip">
-            <span class="bold d-block">Assignee</span>
-            {{ assignee.name }}
+            <span class="bold d-block">Assignee</span> {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>
         </user-avatar-link>
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
index d6c87132843..15937b1091a 100644
--- a/app/assets/javascripts/boards/components/issue_due_date.vue
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -66,25 +66,17 @@ export default {
 
 <template>
   <span>
-    <span
-      ref="issueDueDate"
-      class="board-card-info card-number"
-    >
+    <span ref="issueDueDate" class="board-card-info card-number">
       <icon
-        :class="{'text-danger': isPastDue, 'board-card-info-icon': true}"
+        :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }"
         name="calendar"
-      /><time
-        :class="{'text-danger': isPastDue}"
-        datetime="date"
-        class="board-card-info-text">{{ body }}</time>
+      /><time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
+        body
+      }}</time>
     </span>
-    <gl-tooltip
-      :target="() => $refs.issueDueDate"
-      placement="bottom"
-    >
-      <span class="bold">{{ __('Due date') }}</span>
-      <br />
-      <span :class="{'text-danger-muted': isPastDue}">{{ title }}</span>
+    <gl-tooltip :target="() => $refs.issueDueDate" placement="bottom">
+      <span class="bold">{{ __('Due date') }}</span> <br />
+      <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span>
     </gl-tooltip>
   </span>
 </template>
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index a9803c8ab5d..5acc3025b2c 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -27,22 +27,18 @@ export default {
 
 <template>
   <span>
-    <span
-      ref="issueTimeEstimate"
-      class="board-card-info card-number"
-    >
-      <icon
-        name="hourglass"
-        css-classes="board-card-info-icon"
-      /><time class="board-card-info-text">{{ timeEstimate }}</time>
+    <span ref="issueTimeEstimate" class="board-card-info card-number">
+      <icon name="hourglass" css-classes="board-card-info-icon" /><time
+        class="board-card-info-text"
+        >{{ timeEstimate }}</time
+      >
     </span>
     <gl-tooltip
       :target="() => $refs.issueTimeEstimate"
       placement="bottom"
       class="js-issue-time-estimate"
     >
-      <span class="bold d-block">{{ __('Time estimate') }}</span>
-      {{ title }}
+      <span class="bold d-block">{{ __('Time estimate') }}</span> {{ title }}
     </gl-tooltip>
   </span>
 </template>
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 795ba864545..08408eb0b52 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.vue
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -45,24 +45,20 @@ export default {
   <section class="empty-state">
     <div class="row">
       <div class="col-12 col-md-6 order-md-last">
-        <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
+        <aside class="svg-content"><img :src="emptyStateSvg" /></aside>
       </div>
       <div class="col-12 col-md-6 order-md-first">
         <div class="text-content">
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
-          <a
-            v-if="activeTab === 'all'"
-            :href="newIssuePath"
-            class="btn btn-success btn-inverted"
-          >
+          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">
             New issue
           </a>
           <button
             v-if="activeTab === 'selected'"
             class="btn btn-default"
             type="button"
-            @click="changeTab('all')"
+            @click="changeTab('all');"
           >
             Open issues
           </button>
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index d51597ed22d..b1bc7d87086 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -63,28 +63,15 @@ export default {
 };
 </script>
 <template>
-  <footer
-    class="form-actions add-issues-footer"
-  >
+  <footer class="form-actions add-issues-footer">
     <div class="float-left">
-      <button
-        :disabled="submitDisabled"
-        class="btn btn-success"
-        type="button"
-        @click="addIssues"
-      >
+      <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
         {{ submitText }}
       </button>
-      <span class="inline add-issues-footer-to-list">
-        to list
-      </span>
-      <lists-dropdown/>
+      <span class="inline add-issues-footer-to-list"> to list </span>
+      <lists-dropdown />
     </div>
-    <button
-      class="btn btn-default float-right"
-      type="button"
-      @click="toggleModal(false)"
-    >
+    <button class="btn btn-default float-right" type="button" @click="toggleModal(false);">
       Cancel
     </button>
   </footer>
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index fc6cefa89a9..d0e285a149e 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -58,16 +58,14 @@ export default {
           class="close"
           data-dismiss="modal"
           aria-label="Close"
-          @click="toggleModal(false)"
+          @click="toggleModal(false);"
         >
           <span aria-hidden="true">×</span>
         </button>
       </h2>
     </header>
-    <modal-tabs v-if="!loading && issuesCount > 0"/>
-    <div
-      v-if="showSearch"
-      class="add-issues-search append-bottom-10">
+    <modal-tabs v-if="!loading && issuesCount > 0" />
+    <div v-if="showSearch" class="add-issues-search append-bottom-10">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"
diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index fc0e3e46b88..1e5761cf268 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -143,9 +143,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="showAddIssuesModal"
-    class="add-issues-modal">
+  <div v-if="showAddIssuesModal" class="add-issues-modal">
     <div class="add-issues-container">
       <modal-header
         :project-id="projectId"
@@ -163,15 +161,10 @@ export default {
         :new-issue-path="newIssuePath"
         :empty-state-svg="emptyStateSvg"
       />
-      <section
-        v-if="loading || filterLoading"
-        class="add-issues-list text-center"
-      >
-        <div class="add-issues-list-loading">
-          <gl-loading-icon />
-        </div>
+      <section v-if="loading || filterLoading" class="add-issues-list text-center">
+        <div class="add-issues-list-loading"><gl-loading-icon /></div>
       </section>
-      <modal-footer/>
+      <modal-footer />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index e11f398e70d..878bb002c6c 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/app/assets/javascripts/boards/components/modal/list.vue
@@ -117,38 +117,22 @@ export default {
 };
 </script>
 <template>
-  <section
-    ref="list"
-    class="add-issues-list add-issues-list-columns">
+  <section ref="list" class="add-issues-list add-issues-list-columns">
     <div
       v-if="issuesCount > 0 && issues.length === 0"
-      class="empty-state add-issues-empty-state-filter text-center">
-      <div class="svg-content">
-        <img :src="emptyStateSvg" />
-      </div>
-      <div class="text-content">
-        <h4>
-          There are no issues to show.
-        </h4>
-      </div>
+      class="empty-state add-issues-empty-state-filter text-center"
+    >
+      <div class="svg-content"><img :src="emptyStateSvg" /></div>
+      <div class="text-content"><h4>There are no issues to show.</h4></div>
     </div>
-    <div
-      v-for="(group, index) in groupedIssues"
-      :key="index"
-      class="add-issues-list-column">
-      <div
-        v-for="issue in group"
-        v-if="showIssue(issue)"
-        :key="issue.id"
-        class="board-card-parent">
+    <div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column">
+      <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
         <div
           :class="{ 'is-active': issue.selected }"
           class="board-card"
-          @click="toggleIssue($event, issue)">
-          <issue-card-inner
-            :issue="issue"
-            :issue-link-base="issueLinkBase"
-            :root-path="rootPath"/>
+          @click="toggleIssue($event, issue);"
+        >
+          <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
           <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index c502e32d169..820d0679df5 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -27,35 +27,20 @@ export default {
 </script>
 <template>
   <div class="dropdown inline">
-    <button
-      class="dropdown-menu-toggle"
-      type="button"
-      data-toggle="dropdown"
-      aria-expanded="false">
-      <span
-        :style="{ backgroundColor: selected.label.color }"
-        class="dropdown-label-box">
-      </span>
-      {{ selected.title }}
-      <icon
-        name="chevron-down"
-      />
+    <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+      <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
+      {{ selected.title }} <icon name="chevron-down" />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>
-        <li
-          v-for="(list, i) in state.lists"
-          v-if="list.type == 'label'"
-          :key="i">
+        <li v-for="(list, i) in state.lists" v-if="list.type == 'label'" :key="i">
           <gl-link
             :class="{ 'is-active': list.id == selected.id }"
             href="#"
             role="button"
-            @click.prevent="modal.selectedList = list">
-            <span
-              :style="{ backgroundColor: list.label.color }"
-              class="dropdown-label-box">
-            </span>
+            @click.prevent="modal.selectedList = list;"
+          >
+            <span :style="{ backgroundColor: list.label.color }" class="dropdown-label-box"> </span>
             {{ list.title }}
           </gl-link>
         </li>
diff --git a/app/assets/javascripts/boards/components/modal/tabs.vue b/app/assets/javascripts/boards/components/modal/tabs.vue
index 5d661590e8e..7b800a6ab97 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.vue
+++ b/app/assets/javascripts/boards/components/modal/tabs.vue
@@ -20,28 +20,14 @@ export default {
 <template>
   <div class="top-area prepend-top-10 append-bottom-10">
     <ul class="nav-links issues-state-filters">
-      <li :class="{ 'active': activeTab == 'all' }">
-        <a
-          href="#"
-          role="button"
-          @click.prevent="changeTab('all')"
-        >
-          Open issues
-          <span class="badge badge-pill">
-            {{ issuesCount }}
-          </span>
+      <li :class="{ active: activeTab == 'all' }">
+        <a href="#" role="button" @click.prevent="changeTab('all');">
+          Open issues <span class="badge badge-pill"> {{ issuesCount }} </span>
         </a>
       </li>
-      <li :class="{ 'active': activeTab == 'selected' }">
-        <a
-          href="#"
-          role="button"
-          @click.prevent="changeTab('selected')"
-        >
-          Selected issues
-          <span class="badge badge-pill">
-            {{ selectedCount }}
-          </span>
+      <li :class="{ active: activeTab == 'selected' }">
+        <a href="#" role="button" @click.prevent="changeTab('selected');">
+          Selected issues <span class="badge badge-pill"> {{ selectedCount }} </span>
         </a>
       </li>
     </ul>
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index 83e6e237757..993d35641c0 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -72,23 +72,15 @@ export default {
 
 <template>
   <div>
-    <label class="label-bold prepend-top-10">
-      Project
-    </label>
-    <div
-      ref="projectsDropdown"
-      class="dropdown"
-    >
+    <label class="label-bold prepend-top-10"> Project </label>
+    <div ref="projectsDropdown" class="dropdown">
       <button
         class="dropdown-menu-toggle wide"
         type="button"
         data-toggle="dropdown"
         aria-expanded="false"
       >
-        {{ selectedProjectName }}
-        <icon
-          name="chevron-down"
-        />
+        {{ selectedProjectName }} <icon name="chevron-down" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -106,21 +98,11 @@ export default {
           </button>
         </div>
         <div class="dropdown-input">
-          <input
-            class="dropdown-input-field"
-            type="search"
-            placeholder="Search projects"
-          />
-          <icon
-            name="search"
-            class="dropdown-input-search"
-            data-hidden="true"
-          />
+          <input class="dropdown-input-field" type="search" placeholder="Search projects" />
+          <icon name="search" class="dropdown-input-search" data-hidden="true" />
         </div>
         <div class="dropdown-content"></div>
-        <div class="dropdown-loading">
-          <gl-loading-icon />
-        </div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
index d681e6a431c..a2b8a0af236 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -74,14 +74,8 @@ export default Vue.extend({
 });
 </script>
 <template>
-  <div
-    class="block list"
-  >
-    <button
-      class="btn btn-default btn-block"
-      type="button"
-      @click="removeIssue"
-    >
+  <div class="block list">
+    <button class="btn btn-default btn-block" type="button" @click="removeIssue">
       Remove from board
     </button>
   </div>
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 236bb1394c8..d4354dcfebd 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -164,35 +164,21 @@ export default {
     :class="[
       rowJsClass,
       isInstalled && 'cluster-application-installed',
-      disabled && 'cluster-application-disabled'
+      disabled && 'cluster-application-disabled',
     ]"
     class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
   >
-    <div
-      class="gl-responsive-table-row-layout"
-      role="row"
-    >
-      <div
-        class="table-section append-right-8 section-align-top"
-        role="gridcell"
-      >
+    <div class="gl-responsive-table-row-layout" role="row">
+      <div class="table-section append-right-8 section-align-top" role="gridcell">
         <img
           v-if="hasLogo"
           :src="logoUrl"
           :alt="`${title} logo`"
           class="cluster-application-logo avatar s40"
         />
-        <identicon
-          v-else
-          :entity-id="identiconId"
-          :entity-name="title"
-          size-class="s40"
-        />
+        <identicon v-else :entity-id="identiconId" :entity-name="title" size-class="s40" />
       </div>
-      <div
-        class="table-section cluster-application-description section-wrap"
-        role="gridcell"
-      >
+      <div class="table-section cluster-application-description section-wrap" role="gridcell">
         <strong>
           <a
             v-if="titleLink"
@@ -203,12 +189,7 @@ export default {
           >
             {{ title }}
           </a>
-          <span
-            v-else
-            class="js-cluster-application-title"
-          >
-            {{ title }}
-          </span>
+          <span v-else class="js-cluster-application-title"> {{ title }} </span>
         </strong>
         <slot name="description"></slot>
         <div
@@ -219,16 +200,10 @@ export default {
             {{ generalErrorDescription }}
           </p>
           <ul v-if="statusReason || requestReason">
-            <li
-              v-if="statusReason"
-              class="js-cluster-application-status-error-message"
-            >
+            <li v-if="statusReason" class="js-cluster-application-status-error-message">
               {{ statusReason }}
             </li>
-            <li
-              v-if="requestReason"
-              class="js-cluster-application-request-error-message"
-            >
+            <li v-if="requestReason" class="js-cluster-application-request-error-message">
               {{ requestReason }}
             </li>
           </ul>
@@ -239,15 +214,8 @@ export default {
         class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
-        <div
-          v-if="showManageButton"
-          class="btn-group table-action-buttons"
-        >
-          <a
-            :href="manageLink"
-            :class="{ disabled: disabled }"
-            class="btn"
-          >
+        <div v-if="showManageButton" class="btn-group table-action-buttons">
+          <a :href="manageLink" :class="{ disabled: disabled }" class="btn">
             {{ manageButtonLabel }}
           </a>
         </div>
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index c1026d1273a..0d2e7c3e356 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -158,15 +158,13 @@ export default {
 
 <template>
   <section id="cluster-applications">
-    <h4>
-      {{ s__('ClusterIntegration|Applications') }}
-    </h4>
+    <h4>{{ s__('ClusterIntegration|Applications') }}</h4>
     <p class="append-bottom-0">
-      {{ s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
-        Helm Tiller is required to install any of the following applications.`) }}
-      <a :href="helpPath">
-        {{ __('More information') }}
-      </a>
+      {{
+        s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
+        Helm Tiller is required to install any of the following applications.`)
+      }}
+      <a :href="helpPath"> {{ __('More information') }} </a>
     </p>
 
     <div class="cluster-application-list prepend-top-10">
@@ -182,23 +180,20 @@ export default {
         title-link="https://docs.helm.sh/"
       >
         <div slot="description">
-          {{ s__(`ClusterIntegration|Helm streamlines installing
+          {{
+            s__(`ClusterIntegration|Helm streamlines installing
             and managing Kubernetes applications.
             Tiller runs inside of your Kubernetes Cluster,
-            and manages releases of your charts.`) }}
+            and manages releases of your charts.`)
+          }}
         </div>
       </application-row>
-      <div
-        v-show="!helmInstalled"
-        class="cluster-application-warning"
-      >
-        <div
-          class="svg-container"
-          v-html="helmInstallIllustration"
-        >
-        </div>
-        {{ s__(`ClusterIntegration|You must first install Helm Tiller before
-          installing the applications below`) }}
+      <div v-show="!helmInstalled" class="cluster-application-warning">
+        <div class="svg-container" v-html="helmInstallIllustration"></div>
+        {{
+          s__(`ClusterIntegration|You must first install Helm Tiller before
+          installing the applications below`)
+        }}
       </div>
       <application-row
         :id="ingressId"
@@ -213,9 +208,11 @@ export default {
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|Ingress gives you a way to route
+            {{
+              s__(`ClusterIntegration|Ingress gives you a way to route
               requests to services based on the request host or path,
-              centralizing a number of services into a single entrypoint.`) }}
+              centralizing a number of services into a single entrypoint.`)
+            }}
           </p>
 
           <template v-if="ingressInstalled">
@@ -223,10 +220,7 @@ export default {
               <label for="ingress-ip-address">
                 {{ s__('ClusterIntegration|Ingress IP Address') }}
               </label>
-              <div
-                v-if="ingressExternalIp"
-                class="input-group"
-              >
+              <div v-if="ingressExternalIp" class="input-group">
                 <input
                   id="ingress-ip-address"
                   :value="ingressExternalIp"
@@ -242,50 +236,33 @@ export default {
                   />
                 </span>
               </div>
-              <input
-                v-else
-                type="text"
-                class="form-control js-ip-address"
-                readonly
-                value="?"
-              />
+              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
             </div>
 
-            <p
-              v-if="!ingressExternalIp"
-              class="settings-message js-no-ip-message"
-            >
-              {{ s__(`ClusterIntegration|The IP address is in
+            <p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
+              {{
+                s__(`ClusterIntegration|The IP address is in
               the process of being assigned. Please check your Kubernetes
-              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) }}
+              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+              }}
 
-              <a
-                :href="ingressHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
 
             <p>
-              {{ s__(`ClusterIntegration|Point a wildcard DNS to this
+              {{
+                s__(`ClusterIntegration|Point a wildcard DNS to this
               generated IP address in order to access
-              your application after it has been deployed.`) }}
-              <a
-                :href="ingressDnsHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              your application after it has been deployed.`)
+              }}
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
-
           </template>
-          <div
-            v-html="ingressDescription"
-          >
-          </div>
+          <div v-html="ingressDescription"></div>
         </div>
       </application-row>
       <application-row
@@ -301,11 +278,7 @@ export default {
         :disabled="!helmInstalled"
         title-link="https://prometheus.io/docs/introduction/overview/"
       >
-        <div
-          slot="description"
-          v-html="prometheusDescription"
-        >
-        </div>
+        <div slot="description" v-html="prometheusDescription"></div>
       </application-row>
       <application-row
         v-if="isProjectCluster"
@@ -320,10 +293,12 @@ export default {
         title-link="https://docs.gitlab.com/runner/"
       >
         <div slot="description">
-          {{ s__(`ClusterIntegration|GitLab Runner connects to this
+          {{
+            s__(`ClusterIntegration|GitLab Runner connects to this
             project's repository and executes CI/CD jobs,
             pushing results back and deploying,
-            applications to production.`) }}
+            applications to production.`)
+          }}
         </div>
       </application-row>
       <application-row
@@ -341,11 +316,13 @@ export default {
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
+            {{
+              s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
               manages, and proxies multiple instances of the single-user
               Jupyter notebook server. JupyterHub can be used to serve
               notebooks to a class of students, a corporate data science group,
-              or a scientific research group.`) }}
+              or a scientific research group.`)
+            }}
           </p>
 
           <template v-if="ingressExternalIp">
@@ -361,9 +338,7 @@ export default {
                   type="text"
                   class="form-control js-hostname"
                 />
-                <span
-                  class="input-group-btn"
-                >
+                <span class="input-group-btn">
                   <clipboard-button
                     :text="jupyterHostname"
                     :title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
@@ -373,13 +348,11 @@ export default {
               </div>
             </div>
             <p v-if="ingressInstalled">
-              {{ s__(`ClusterIntegration|Replace this with your own hostname if you want.
-              If you do so, point hostname to Ingress IP Address from above.`) }}
-              <a
-                :href="ingressDnsHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              {{
+                s__(`ClusterIntegration|Replace this with your own hostname if you want.
+              If you do so, point hostname to Ingress IP Address from above.`)
+              }}
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
@@ -394,19 +367,21 @@ export default {
         :status-reason="applications.knative.statusReason"
         :request-status="applications.knative.requestStatus"
         :request-reason="applications.knative.requestReason"
-        :install-application-request-params="{ hostname: applications.knative.hostname}"
+        :install-application-request-params="{ hostname: applications.knative.hostname }"
         :disabled="!helmInstalled"
         class="hide-bottom-border rounded-bottom"
         title-link="https://github.com/knative/docs"
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|A Knative build extends Kubernetes
+            {{
+              s__(`ClusterIntegration|A Knative build extends Kubernetes
               and utilizes existing Kubernetes primitives to provide you with
               the ability to run on-cluster container builds from source.
               For example, you can write a build that uses Kubernetes-native
               resources to obtain your source code from a repository,
-              build it into container a image, and then run that image.`) }}
+              build it into container a image, and then run that image.`)
+            }}
           </p>
 
           <template v-if="knativeInstalled">
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 82532539c9c..3e01841d563 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -82,7 +82,6 @@ export default {
 </script>
 <template>
   <div class="content-list pipelines">
-
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
@@ -93,14 +92,13 @@ export default {
     <svg-blank-state
       v-else-if="shouldRenderErrorState"
       :svg-path="errorStateSvgPath"
-      :message="s__(`Pipelines|There was an error fetching the pipelines.
-      Try again in a few moments or contact your support team.`)"
+      :message="
+        s__(`Pipelines|There was an error fetching the pipelines.
+      Try again in a few moments or contact your support team.`)
+      "
     />
 
-    <div
-      v-else-if="shouldRenderTable"
-      class="table-holder"
-    >
+    <div v-else-if="shouldRenderTable" class="table-holder">
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 82b0f523d2e..e44588efbfc 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -32,30 +32,19 @@ export default {
       type="button"
       @click="dismissOverviewDialog"
     >
-      <icon
-        name="close"
-      />
+      <icon name="close" />
     </button>
-    <div
-      class="svg-container"
-      v-html="iconCycleAnalyticsSplash"
-    >
-    </div>
+    <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
     <div class="inner-content">
-      <h4>
-        {{ __('Introducing Cycle Analytics') }}
-      </h4>
+      <h4>{{ __('Introducing Cycle Analytics') }}</h4>
       <p>
-        {{ __(`Cycle Analytics gives an overview
-of how much time it takes to go from idea to production in your project.`) }}
+        {{
+          __(`Cycle Analytics gives an overview
+of how much time it takes to go from idea to production in your project.`)
+        }}
       </p>
       <p>
-        <a
-          :href="documentationLink"
-          target="_blank"
-          rel="nofollow"
-          class="btn"
-        >
+        <a :href="documentationLink" target="_blank" rel="nofollow" class="btn">
           {{ __('Read more') }}
         </a>
       </p>
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 f6a7d9962eb..16bc900867a 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -14,17 +14,12 @@ export default {
 };
 </script>
 <template>
-  <span
-    v-if="count === 50"
-    class="events-info float-right"
-  >
+  <span v-if="count === 50" class="events-info float-right">
     <i
       v-tooltip
-      :title="n__(
-        'Limited to showing %d event at most',
-        'Limited to showing %d events at most',
-        50
-      )"
+      :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"
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index 429fef176c3..333ea111cd6 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -28,45 +28,26 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(mergeRequest, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
-            <a :href="mergeRequest.url">
-              {{ mergeRequest.title }}
-            </a>
+            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
           </h5>
-          <a
-            :href="mergeRequest.url"
-            class="issue-link">
-            !{{ mergeRequest.iid }}
-          </a>
-          &middot;
+          <a :href="mergeRequest.url" class="issue-link"> !{{ mergeRequest.iid }} </a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="mergeRequest.url"
-              class="issue-date">
-              {{ mergeRequest.createdAt }}
-            </a>
+            <a :href="mergeRequest.url" class="issue-date"> {{ mergeRequest.createdAt }} </a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="mergeRequest.author.webUrl"
-              class="issue-author-link">
+            <a :href="mergeRequest.author.webUrl" class="issue-author-link">
               {{ mergeRequest.author.name }}
             </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="mergeRequest.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 56e851fa528..c4f5172df3b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -28,47 +28,24 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(issue, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(issue, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="issue.author.avatarUrl"/>
+          <user-avatar-image :img-src="issue.author.avatarUrl" />
           <h5 class="item-title issue-title">
-            <a
-              :href="issue.url"
-              class="issue-title"
-            >
-              {{ issue.title }}
-            </a>
+            <a :href="issue.url" class="issue-title"> {{ issue.title }} </a>
           </h5>
-          <a
-            :href="issue.url"
-            class="issue-link"
-          >#{{ issue.iid }}</a>
-          &middot;
+          <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="issue.url"
-              class="issue-date"
-            >{{ issue.createdAt }}</a>
+            <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="issue.author.webUrl"
-              class="issue-author-link"
-            >
-              {{ issue.author.name }}
-            </a>
+            <a :href="issue.author.webUrl" class="issue-author-link"> {{ issue.author.name }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="issue.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="issue.totalTime" /></div>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index 54b9da4983a..6c256fa6736 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -34,42 +34,25 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(commit, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(commit, i) in items" :key="i" class="stage-event-item">
         <div class="item-details item-conmmit-component">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="commit.author.avatarUrl" />
           <h5 class="item-title commit-title">
-            <a :href="commit.commitUrl">
-              {{ commit.title }}
-            </a>
+            <a :href="commit.commitUrl"> {{ commit.title }} </a>
           </h5>
           <span>
-            {{ s__('FirstPushedBy|First') }}
-            <span
-              class="commit-icon"
-              v-html="iconCommit"
-            >
-            </span>
-            <a
-              :href="commit.commitUrl"
-              class="commit-hash-link commit-sha"
-            >{{ commit.shortSha }}</a>
+            {{ s__('FirstPushedBy|First') }} <span class="commit-icon" v-html="iconCommit"> </span>
+            <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{
+              commit.shortSha
+            }}</a>
             {{ s__('FirstPushedBy|pushed by') }}
-            <a
-              :href="commit.author.webUrl"
-              class="commit-author-link"
-            >
+            <a :href="commit.author.webUrl" class="commit-author-link">
               {{ commit.author.name }}
             </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="commit.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="commit.totalTime" /></div>
       </li>
     </ul>
   </div>
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 f9c80d237d7..f874f11aff0 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -30,66 +30,37 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(mergeRequest, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
-            <a :href="mergeRequest.url">
-              {{ mergeRequest.title }}
-            </a>
+            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
           </h5>
-          <a
-            :href="mergeRequest.url"
-            class="issue-link"
-          >!{{ mergeRequest.iid }}</a>
-          &middot;
+          <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="mergeRequest.url"
-              class="issue-date"
-            >{{ mergeRequest.createdAt }}</a>
+            <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="mergeRequest.author.webUrl"
-              class="issue-author-link"
-            >{{ mergeRequest.author.name }}</a>
+            <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{
+              mergeRequest.author.name
+            }}</a>
           </span>
           <template v-if="mergeRequest.state === 'closed'">
             <span class="merge-request-state">
-              <i
-                class="fa fa-ban"
-                aria-hidden="true"
-              >
-              </i>
-              {{ mergeRequest.state.toUpperCase() }}
+              <i class="fa fa-ban" aria-hidden="true"> </i> {{ mergeRequest.state.toUpperCase() }}
             </span>
           </template>
           <template v-else>
-            <span
-              v-if="mergeRequest.branch"
-              class="merge-request-branch"
-            >
-              <icon
-                :size="16"
-                name="fork"
-              />
-              <a :href="mergeRequest.branch.url">
-                {{ mergeRequest.branch.name }}
-              </a>
+            <span v-if="mergeRequest.branch" class="merge-request-branch">
+              <icon :size="16" name="fork" />
+              <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a>
             </span>
           </template>
         </div>
-        <div class="item-time">
-          <total-time :time="mergeRequest.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
       </li>
     </ul>
   </div>
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 e83b66eef86..c5146c3bf88 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -36,62 +36,23 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(build, i) in items"
-        :key="i"
-        class="stage-event-item item-build-component"
-      >
+      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="build.author.avatarUrl"/>
+          <user-avatar-image :img-src="build.author.avatarUrl" />
           <h5 class="item-title">
-            <a
-              :href="build.url"
-              class="pipeline-id"
-            >
-              #{{ build.id }}
-            </a>
-            <icon
-              :size="16"
-              name="fork"
-            />
-            <a
-              :href="build.branch.url"
-              class="ref-name"
-            >
-              {{ build.branch.name }}
-            </a>
-            <span
-              class="icon-branch"
-              v-html="iconBranch"
-            >
-            </span>
-            <a
-              :href="build.commitUrl"
-              class="commit-sha"
-            >
-              {{ build.shortSha }}
-            </a>
+            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
+            <icon :size="16" name="fork" />
+            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
+            <span class="icon-branch" v-html="iconBranch"> </span>
+            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>
-            <a
-              :href="build.url"
-              class="build-date"
-            >
-              {{ build.date }}
-            </a>
-            {{ s__('ByAuthor|by') }}
-            <a
-              :href="build.author.webUrl"
-              class="issue-author-link"
-            >
-              {{ build.author.name }}
-            </a>
+            <a :href="build.url" class="build-date"> {{ build.date }} </a> {{ s__('ByAuthor|by') }}
+            <a :href="build.author.webUrl" class="issue-author-link"> {{ build.author.name }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="build.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="build.totalTime" /></div>
       </li>
     </ul>
   </div>
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 a8196dc879a..35721384210 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -38,63 +38,22 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(build, i) in items"
-        :key="i"
-        class="stage-event-item item-build-component"
-      >
+      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
         <div class="item-details">
           <h5 class="item-title">
-            <span
-              class="icon-build-status"
-              v-html="iconBuildStatus"
-            >
-            </span>
-            <a
-              :href="build.url"
-              class="item-build-name"
-            >
-              {{ build.name }}
-            </a>
-            &middot;
-            <a
-              :href="build.url"
-              class="pipeline-id"
-            >
-              #{{ build.id }}
-            </a>
-            <icon
-              :size="16"
-              name="fork"
-            />
-            <a
-              :href="build.branch.url"
-              class="ref-name"
-            >
-              {{ build.branch.name }}
-            </a>
-            <span
-              class="icon-branch"
-              v-html="iconBranch"
-            >
-            </span>
-            <a
-              :href="build.commitUrl"
-              class="commit-sha">
-              {{ build.shortSha }}
-            </a>
+            <span class="icon-build-status" v-html="iconBuildStatus"> </span>
+            <a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
+            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
+            <icon :size="16" name="fork" />
+            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
+            <span class="icon-branch" v-html="iconBranch"> </span>
+            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>
-            <a
-              :href="build.url"
-              class="issue-date">
-              {{ build.date }}
-            </a>
+            <a :href="build.url" class="issue-date"> {{ build.date }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="build.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="build.totalTime" /></div>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
index 4db50134208..b93a7d3c4f9 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
@@ -18,28 +18,16 @@ export default {
   <span class="total-time">
     <template v-if="hasData">
       <template v-if="time.days">
-        {{ time.days }}
-        <span>
-          {{ n__('day', 'days', time.days) }}
-        </span>
+        {{ time.days }} <span> {{ n__('day', 'days', time.days) }} </span>
       </template>
       <template v-if="time.hours">
-        {{ time.hours }}
-        <span>
-          {{ n__('Time|hr', 'Time|hrs', time.hours) }}
-        </span>
+        {{ time.hours }} <span> {{ n__('Time|hr', 'Time|hrs', time.hours) }} </span>
       </template>
       <template v-if="time.mins && !time.days">
-        {{ time.mins }}
-        <span>
-          {{ n__('Time|min', 'Time|mins', time.mins) }}
-        </span>
+        {{ time.mins }} <span> {{ n__('Time|min', 'Time|mins', time.mins) }} </span>
       </template>
-      <template v-if="time.seconds && hasData === 1 || time.seconds === 0">
-        {{ time.seconds }}
-        <span>
-          {{ s__('Time|s') }}
-        </span>
+      <template v-if="(time.seconds && hasData === 1) || time.seconds === 0">
+        {{ time.seconds }} <span> {{ s__('Time|s') }} </span>
       </template>
     </template>
     <template v-else>
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 4acd21376bf..af7c391ab70 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -43,11 +43,9 @@ export default {
     :class="[{ disabled: isLoading }, btnCssClass]"
     :disabled="isLoading"
     class="btn"
-    @click="doAction">
+    @click="doAction"
+  >
     <slot></slot>
-    <gl-loading-icon
-      v-if="isLoading"
-      :inline="true"
-    />
+    <gl-loading-icon v-if="isLoading" :inline="true" />
   </button>
 </template>
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 1d2ac59e20a..922c907bb36 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -123,26 +123,10 @@ export default {
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left">
-          <i
-            class="fa fa-angle-left"
-            aria-hidden="true"
-          >
-          </i>
-        </div>
-        <div class="fade-right">
-          <i
-            class="fa fa-angle-right"
-            aria-hidden="true"
-          >
-          </i>
-        </div>
+        <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
+        <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
 
-        <navigation-tabs
-          :tabs="tabs"
-          scope="deployKeys"
-          @onChangeTab="onChangeTab"
-        />
+        <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
       </div>
       <keys-panel
         :project-id="projectId"
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index c05b9b1de79..f01e6f2a639 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -112,26 +112,14 @@ export default {
 <template>
   <div class="gl-responsive-table-row deploy-key">
     <div class="table-section section-40">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__('DeployKeys|Deploy key') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
       <div class="table-mobile-content">
-        <strong class="title qa-key-title">
-          {{ deployKey.title }}
-        </strong>
-        <div class="fingerprint qa-key-fingerprint">
-          {{ deployKey.fingerprint }}
-        </div>
+        <strong class="title qa-key-title"> {{ deployKey.title }} </strong>
+        <div class="fingerprint qa-key-fingerprint">{{ deployKey.fingerprint }}</div>
       </div>
     </div>
     <div class="table-section section-30 section-wrap">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__('DeployKeys|Project usage') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
       <div class="table-mobile-content deploy-project-list">
         <template v-if="projects.length > 0">
           <a
@@ -139,10 +127,8 @@ export default {
             :title="projectTooltipTitle(firstProject)"
             class="label deploy-project-label"
           >
-            <span>
-              {{ firstProject.project.full_name }}
-            </span>
-            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
+            <span> {{ firstProject.project.full_name }} </span>
+            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
           </a>
           <a
             v-if="isExpandable"
@@ -162,39 +148,24 @@ export default {
             :title="projectTooltipTitle(deployKeysProject)"
             class="label deploy-project-label"
           >
-            <span>
-              {{ deployKeysProject.project.full_name }}
-            </span>
-            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'"/>
+            <span> {{ deployKeysProject.project.full_name }} </span>
+            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
           </a>
         </template>
-        <span
-          v-else
-          class="text-secondary">{{ __('None') }}</span>
+        <span v-else class="text-secondary">{{ __('None') }}</span>
       </div>
     </div>
     <div class="table-section section-15 text-right">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ __('Created') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
       <div class="table-mobile-content text-secondary key-created-at">
-        <span
-          v-tooltip
-          :title="tooltipTitle(deployKey.created_at)">
-          <icon name="calendar"/>
-          <span>{{ timeFormated(deployKey.created_at) }}</span>
+        <span v-tooltip :title="tooltipTitle(deployKey.created_at)">
+          <icon name="calendar" /> <span>{{ timeFormated(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>
     <div class="table-section section-15 table-button-footer deploy-key-actions">
       <div class="btn-group table-action-buttons">
-        <action-btn
-          v-if="!isEnabled"
-          :deploy-key="deployKey"
-          type="enable"
-        >
+        <action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable">
           {{ __('Enable') }}
         </action-btn>
         <a
@@ -205,7 +176,7 @@ export default {
           class="btn btn-default text-secondary"
           data-container="body"
         >
-          <icon name="pencil"/>
+          <icon name="pencil" />
         </a>
         <action-btn
           v-if="isRemovable"
@@ -216,7 +187,7 @@ export default {
           type="remove"
           data-container="body"
         >
-          <icon name="remove"/>
+          <icon name="remove" />
         </action-btn>
         <action-btn
           v-else-if="isEnabled"
@@ -227,7 +198,7 @@ export default {
           type="disable"
           data-container="body"
         >
-          <icon name="cancel"/>
+          <icon name="cancel" />
         </action-btn>
       </div>
     </div>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index 2f057ca29f6..2693cd08cc3 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -30,24 +30,14 @@ export default {
 <template>
   <div class="deploy-keys-panel table-holder">
     <template v-if="keys.length > 0">
-      <div
-        role="row"
-        class="gl-responsive-table-row table-row-header">
-        <div
-          role="rowheader"
-          class="table-section section-40">
+      <div role="row" class="gl-responsive-table-row table-row-header">
+        <div role="rowheader" class="table-section section-40">
           {{ s__('DeployKeys|Deploy key') }}
         </div>
-        <div
-          role="rowheader"
-          class="table-section section-30">
+        <div role="rowheader" class="table-section section-30">
           {{ s__('DeployKeys|Project usage') }}
         </div>
-        <div
-          role="rowheader"
-          class="table-section section-15 text-right">
-          {{ __('Created') }}
-        </div>
+        <div role="rowheader" class="table-section section-15 text-right">{{ __('Created') }}</div>
       </div>
       <deploy-key
         v-for="deployKey in keys"
@@ -58,10 +48,7 @@ export default {
         :project-id="projectId"
       />
     </template>
-    <div
-      v-else
-      class="settings-message text-center"
-    >
+    <div v-else class="settings-message text-center">
       {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
   </div>
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 881febedb7c..0b7838292b2 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -181,18 +181,8 @@ export default {
 
 <template>
   <div v-show="shouldShow">
-    <div
-      v-if="isLoading"
-      class="loading"
-    >
-      <gl-loading-icon />
-    </div>
-    <div
-      v-else
-      id="diffs"
-      :class="{ active: shouldShow }"
-      class="diffs tab-pane"
-    >
+    <div v-if="isLoading" class="loading"><gl-loading-icon /></div>
+    <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
       <compare-versions
         v-if="showCompareVersions"
         :merge-request-diffs="mergeRequestDiffs"
@@ -214,38 +204,21 @@ export default {
         class="mr-version-controls"
       >
         <div class="content-block comments-disabled-notif clearfix">
-          <i class="fa fa-info-circle"></i>
-          {{ notAllCommentsDisplayed }}
+          <i class="fa fa-info-circle"></i> {{ notAllCommentsDisplayed }}
           <div class="pull-right">
-            <a
-              :href="latestVersionPath"
-              class="btn btn-sm"
-            >
-              {{ showLatestVersion }}
-            </a>
+            <a :href="latestVersionPath" class="btn btn-sm"> {{ showLatestVersion }} </a>
           </div>
         </div>
       </div>
 
-      <commit-widget
-        v-if="commit"
-        :commit="commit"
-      />
+      <commit-widget v-if="commit" :commit="commit" />
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"
         class="files d-flex prepend-top-default"
       >
-        <div
-          v-show="showTreeList"
-          class="diff-tree-list"
-        >
-          <tree-list />
-        </div>
-        <div
-          v-if="diffFiles.length > 0"
-          class="diff-files-holder"
-        >
+        <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
+        <div v-if="diffFiles.length > 0" class="diff-files-holder">
           <diff-file
             v-for="file in diffFiles"
             :key="file.newPath"
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index aa72aca1478..560b8695144 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -73,10 +73,7 @@ export default {
           v-html="commit.title_html"
         ></a>
 
-        <span class="commit-row-message d-block d-sm-none">
-          &middot;
-          {{ commit.short_id }}
-        </span>
+        <span class="commit-row-message d-block d-sm-none"> &middot; {{ commit.short_id }} </span>
 
         <button
           v-if="commit.description_html"
@@ -84,21 +81,12 @@ export default {
           type="button"
           :aria-label="__('Toggle commit description')"
         >
-          <icon
-            :size="12"
-            name="ellipsis_h"
-          />
+          <icon :size="12" name="ellipsis_h" />
         </button>
 
         <div class="commiter">
-          <a
-            :href="authorUrl"
-            v-text="authorName"
-          ></a>
-          {{ s__('CommitWidget|authored') }}
-          <time-ago-tooltip
-            :time="commit.authored_date"
-          />
+          <a :href="authorUrl" v-text="authorName"></a> {{ s__('CommitWidget|authored') }}
+          <time-ago-tooltip :time="commit.authored_date" />
         </div>
 
         <pre
@@ -108,19 +96,13 @@ export default {
         ></pre>
       </div>
       <div class="commit-actions flex-row d-none d-sm-flex">
-        <div
-          v-if="commit.signature_html"
-          v-html="commit.signature_html"
-        ></div>
+        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"
         />
         <div class="commit-sha-group">
-          <div
-            class="label label-monospace"
-            v-text="commit.short_id"
-          ></div>
+          <div class="label label-monospace" v-text="commit.short_id"></div>
           <clipboard-button
             :text="commit.id"
             :title="__('Copy commit SHA to clipboard')"
diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue
index cc8e72eb1c8..3fb11813d68 100644
--- a/app/assets/javascripts/diffs/components/commit_widget.vue
+++ b/app/assets/javascripts/diffs/components/commit_widget.vue
@@ -31,9 +31,7 @@ export default {
   <div class="info-well prepend-top-default">
     <div class="well-segment">
       <ul class="blob-commit-info">
-        <commit-item
-          :commit="commit"
-        />
+        <commit-item :commit="commit" />
       </ul>
     </div>
   </div>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index f50cb94a18f..99061c3bc92 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -73,27 +73,20 @@ export default {
 
 <template>
   <div class="mr-version-controls">
-    <div
-      class="mr-version-menus-container content-block"
-    >
+    <div class="mr-version-menus-container content-block">
       <button
         v-tooltip.hover
         type="button"
         class="btn btn-default append-right-8 js-toggle-tree-list"
         :class="{
-          active: showTreeList
+          active: showTreeList,
         }"
         :title="__('Toggle file browser')"
         @click="toggleShowTreeList"
       >
-        <icon
-          name="hamburger"
-        />
+        <icon name="hamburger" />
       </button>
-      <div
-        v-if="showDropdowns"
-        class="d-flex align-items-center compare-versions-container"
-      >
+      <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
         Changes between
         <compare-versions-dropdown
           :other-versions="mergeRequestDiffs"
@@ -109,20 +102,11 @@ export default {
           class="mr-version-compare-dropdown"
         />
       </div>
-      <div
-        class="inline-parallel-buttons d-none d-md-flex ml-auto"
-      >
-        <a
-          v-show="hasCollapsedFile"
-          class="btn btn-default append-right-8"
-          @click="expandAllFiles"
-        >
+      <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
+        <a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
           {{ __('Expand all') }}
         </a>
-        <a
-          :href="toggleWhitespacePath"
-          class="btn btn-default qa-toggle-whitespace"
-        >
+        <a :href="toggleWhitespacePath" class="btn btn-default qa-toggle-whitespace">
           {{ toggleWhitespaceText }}
         </a>
         <div class="btn-group prepend-left-8">
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
index 112206e4ad6..8da02ed0b7c 100644
--- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
@@ -112,26 +112,14 @@ export default {
       data-toggle="dropdown"
       aria-expanded="false"
     >
-      <span>
-        {{ selectedVersionName }}
-      </span>
-      <icon
-        :size="12"
-        name="angle-down"
-        class="position-absolute"
-      />
+      <span> {{ selectedVersionName }} </span>
+      <icon :size="12" name="angle-down" class="position-absolute" />
     </a>
     <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
       <div class="dropdown-content">
         <ul>
-          <li
-            v-for="version in targetVersions"
-            :key="version.id"
-          >
-            <a
-              :class="{ 'is-active': isActive(version) }"
-              :href="href(version)"
-            >
+          <li v-for="version in targetVersions" :key="version.id">
+            <a :class="{ 'is-active': isActive(version) }" :href="href(version)">
               <div>
                 <strong>
                   {{ versionName(version) }}
@@ -141,9 +129,7 @@ export default {
                 </strong>
               </div>
               <div>
-                <small class="commit-sha">
-                  {{ version.truncated_commit_sha }}
-                </small>
+                <small class="commit-sha"> {{ version.truncated_commit_sha }} </small>
               </div>
               <div>
                 <small>
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 5e5fda5fba6..e405d8b20ae 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -97,10 +97,7 @@ export default {
           :file-hash="diffFile.file_hash"
           :can-comment="getNoteableData.current_user.can_create_note"
         />
-        <div
-          v-if="showNotesContainer"
-          class="note-container"
-        >
+        <div v-if="showNotesContainer" class="note-container">
           <diff-discussions
             v-if="diffFile.discussions.length"
             class="diff-file-discussions"
@@ -115,8 +112,8 @@ export default {
             :save-button-title="__('Comment')"
             class="diff-comment-form new-note discussion-form discussion-form-container"
             @handleFormUpdate="handleSaveNote"
-            @cancelForm="closeDiffFileCommentForm(diffFile.file_hash)"
-          />          
+            @cancelForm="closeDiffFileCommentForm(diffFile.file_hash);"
+          />
         </div>
       </diff-viewer>
     </div>
diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue
index b9de487a737..bee29b04e92 100644
--- a/app/assets/javascripts/diffs/components/diff_discussions.vue
+++ b/app/assets/javascripts/diffs/components/diff_discussions.vue
@@ -45,29 +45,22 @@ export default {
       v-for="(discussion, index) in discussions"
       :key="discussion.id"
       :class="{
-        collapsed: !isExpanded(discussion)
+        collapsed: !isExpanded(discussion),
       }"
       class="discussion-notes diff-discussions position-relative"
     >
-      <ul
-        :data-discussion-id="discussion.id"
-        class="notes"
-      >
+      <ul :data-discussion-id="discussion.id" class="notes">
         <template v-if="shouldCollapseDiscussions">
           <button
             :class="{
               'diff-notes-collapse': discussion.expanded,
-              'btn-transparent badge badge-pill': !discussion.expanded
+              'btn-transparent badge badge-pill': !discussion.expanded,
             }"
             type="button"
             class="js-diff-notes-toggle"
-            @click="toggleDiscussion({ discussionId: discussion.id })"
+            @click="toggleDiscussion({ discussionId: discussion.id });"
           >
-            <icon
-              v-if="discussion.expanded"
-              name="collapse"
-              class="collapse-icon"
-            />
+            <icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
             <template v-else>
               {{ index + 1 }}
             </template>
@@ -81,11 +74,7 @@ export default {
           :discussions-by-diff-order="true"
           @noteDeleted="deleteNoteHandler"
         >
-          <span
-            v-if="renderAvatarBadge"
-            slot="avatar-badge"
-            class="badge badge-pill"
-          >
+          <span v-if="renderAvatarBadge" slot="avatar-badge" class="badge badge-pill">
             {{ index + 1 }}
           </span>
         </noteable-discussion>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 5da0bfb5bfe..f7e3655ea40 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -119,7 +119,7 @@ export default {
   <div
     :id="file.file_hash"
     :class="{
-      'is-active': currentDiffFileId === file.file_hash
+      'is-active': currentDiffFileId === file.file_hash,
     }"
     class="diff-file file-holder"
   >
@@ -134,13 +134,11 @@ export default {
       @showForkMessage="showForkMessage"
     />
 
-    <div
-      v-if="forkMessageVisible"
-      class="js-file-fork-suggestion-section file-fork-suggestion">
+    <div v-if="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion">
       <span class="file-fork-suggestion-note">
-        You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span>
-        files in this project directly. Please fork this project,
-        make your changes there, and submit a merge request.
+        You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span> files
+        in this project directly. Please fork this project, make your changes there, and submit a
+        merge request.
       </span>
       <a
         :href="file.fork_path"
@@ -162,27 +160,14 @@ export default {
       :class="{ hidden: isCollapsed || file.too_large }"
       :diff-file="file"
     />
-    <gl-loading-icon
-      v-if="showLoadingIcon"
-      class="diff-content loading"
-    />
-    <div
-      v-else-if="showExpandMessage"
-      class="nothing-here-block diff-collapsed"
-    >
+    <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
+    <div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed">
       {{ __('This diff is collapsed.') }}
-      <a
-        class="click-to-expand js-click-to-expand"
-        href="#"
-        @click.prevent="handleToggle"
-      >
+      <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">
         {{ __('Click to expand it.') }}
       </a>
     </div>
-    <div
-      v-if="file.too_large"
-      class="nothing-here-block diff-collapsed js-too-large-diff"
-    >
+    <div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff">
       {{ __('This source diff could not be displayed because it is too large.') }}
       <span v-html="viewBlobLink"></span>
     </div>
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index af03cec6582..07e37582963 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -141,7 +141,7 @@ export default {
   <div
     ref="header"
     class="js-file-title file-title file-title-flex-parent"
-    @click="handleToggleFile($event, true)"
+    @click="handleToggleFile($event, true);"
   >
     <div class="file-header-content">
       <icon
@@ -152,12 +152,7 @@ export default {
         class="diff-toggle-caret append-right-5"
         @click.stop="handleToggle"
       />
-      <a
-        v-once
-        ref="titleWrapper"
-        :href="titleLink"
-        class="append-right-4 js-title-wrapper"
-      >
+      <a v-once ref="titleWrapper" :href="titleLink" class="append-right-4 js-title-wrapper">
         <file-icon
           :file-name="filePath"
           :size="18"
@@ -182,13 +177,7 @@ export default {
           ></strong>
         </span>
 
-        <strong
-          v-else
-          v-tooltip
-          :title="filePath"
-          class="file-title-name"
-          data-container="body"
-        >
+        <strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
           {{ filePath }}
         </strong>
       </a>
@@ -200,28 +189,18 @@ export default {
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
-      <small
-        v-if="diffFile.mode_changed"
-        ref="fileMode"
-      >
+      <small v-if="diffFile.mode_changed" ref="fileMode">
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span
-        v-if="isUsingLfs"
-        class="label label-lfs append-right-5"
-      >
-        {{ __('LFS') }}
-      </span>
+      <span v-if="isUsingLfs" class="label label-lfs append-right-5"> {{ __('LFS') }} </span>
     </div>
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
       class="file-actions d-none d-sm-block"
     >
-      <template
-        v-if="diffFile.blob && diffFile.blob.readable_text"
-      >
+      <template v-if="diffFile.blob && diffFile.blob.readable_text">
         <button
           :disabled="!diffHasDiscussions(diffFile)"
           :class="{ active: hasExpandedDiscussions }"
@@ -249,11 +228,7 @@ export default {
         v-html="viewReplacedFileButtonText"
       >
       </a>
-      <a
-        :href="diffFile.view_path"
-        class="btn view-file js-view-file"
-        v-html="viewFileButtonText"
-      >
+      <a :href="diffFile.view_path" class="btn view-file js-view-file" v-html="viewFileButtonText">
       </a>
 
       <a
diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
index 8f8c2a31c71..b969017a2bb 100644
--- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@@ -75,10 +75,7 @@ export default {
       class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
       @click="toggleDiscussions"
     >
-      <icon
-        :size="12"
-        name="collapse"
-      />
+      <icon :size="12" name="collapse" />
     </button>
     <template v-else>
       <user-avatar-image
@@ -99,7 +96,8 @@ export default {
         data-placement="top"
         role="button"
         @click="toggleDiscussions"
-      >+{{ moreCount }}</span>
+        >+{{ moreCount }}</span
+      >
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index 8f037eeefc4..c02561b7599 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -155,15 +155,10 @@ export default {
 
 <template>
   <div>
-    <span
-      v-if="isMatchLine"
-      class="context-cell"
-      role="button"
-      @click="handleLoadMoreLines"
-    >...</span>
-    <template
-      v-else
+    <span v-if="isMatchLine" class="context-cell" role="button" @click="handleLoadMoreLines"
+      >...</span
     >
+    <template v-else>
       <button
         v-if="shouldShowCommentButton"
         type="button"
@@ -171,21 +166,10 @@ export default {
         title="Add a comment to this line"
         @click="handleCommentButton"
       >
-        <icon
-          :size="12"
-          name="comment"
-        />
+        <icon :size="12" name="comment" />
       </button>
-      <a
-        v-if="lineNumber"
-        :data-linenumber="lineNumber"
-        :href="lineHref"
-      >
-      </a>
-      <diff-gutter-avatars
-        v-if="shouldShowAvatarsOnGutter"
-        :discussions="line.discussions"
-      />
+      <a v-if="lineNumber" :data-linenumber="lineNumber" :href="lineHref"> </a>
+      <diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 07f38172575..c7cef74fe40 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -88,9 +88,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="content discussion-form discussion-form-container discussion-notes"
-  >
+  <div class="content discussion-form discussion-form-container discussion-notes">
     <note-form
       ref="noteForm"
       :is-editing="true"
diff --git a/app/assets/javascripts/diffs/components/diff_table_cell.vue b/app/assets/javascripts/diffs/components/diff_table_cell.vue
index 0a893a57f07..f4eb956adcb 100644
--- a/app/assets/javascripts/diffs/components/diff_table_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_table_cell.vue
@@ -103,9 +103,7 @@ export default {
 </script>
 
 <template>
-  <td
-    :class="classNameMap"
-  >
+  <td :class="classNameMap">
     <diff-line-gutter-content
       :line="line"
       :file-hash="fileHash"
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index 2fb85ca2f07..5d38d545ce8 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -32,11 +32,5 @@ export default {
 </script>
 
 <template>
-  <a
-    :href="editPath"
-    class="btn btn-default js-edit-blob"
-    @click="handleEditClick"
-  >
-    Edit
-  </a>
+  <a :href="editPath" class="btn btn-default js-edit-blob" @click="handleEditClick"> Edit </a>
 </template>
diff --git a/app/assets/javascripts/diffs/components/file_row_stats.vue b/app/assets/javascripts/diffs/components/file_row_stats.vue
index 105f7ebdbed..784f74e498f 100644
--- a/app/assets/javascripts/diffs/components/file_row_stats.vue
+++ b/app/assets/javascripts/diffs/components/file_row_stats.vue
@@ -10,16 +10,9 @@ export default {
 </script>
 
 <template>
-  <span
-    v-once
-    class="file-row-stats"
-  >
-    <span class="cgreen">
-      +{{ file.addedLines }}
-    </span>
-    <span class="cred">
-      -{{ file.removedLines }}
-    </span>
+  <span v-once class="file-row-stats">
+    <span class="cgreen"> +{{ file.addedLines }} </span>
+    <span class="cred"> -{{ file.removedLines }} </span>
   </span>
 </template>
 
diff --git a/app/assets/javascripts/diffs/components/hidden_files_warning.vue b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
index 017dcfcc357..119e139de21 100644
--- a/app/assets/javascripts/diffs/components/hidden_files_warning.vue
+++ b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
@@ -26,26 +26,13 @@ export default {
     <h4>
       {{ __('Too many changes to show.') }}
       <div class="pull-right">
-        <a
-          :href="plainDiffPath"
-          class="btn btn-sm"
-        >
-          {{ __('Plain diff') }}
-        </a>
-        <a
-          :href="emailPatchPath"
-          class="btn btn-sm"
-        >
-          {{ __('Email patch') }}
-        </a>
+        <a :href="plainDiffPath" class="btn btn-sm"> {{ __('Plain diff') }} </a>
+        <a :href="emailPatchPath" class="btn btn-sm"> {{ __('Email patch') }} </a>
       </div>
     </h4>
     <p>
-      To preserve performance only
-      <strong>
-        {{ visible }} of {{ total }}
-      </strong>
-      files are displayed.
+      To preserve performance only <strong> {{ visible }} of {{ total }} </strong> files are
+      displayed.
     </p>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue
index ae1b0a52901..d30e64312aa 100644
--- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue
+++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue
@@ -97,11 +97,9 @@ export default {
       v-if="canComment"
       type="button"
       class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
-      @click="clickedImage($event.offsetX, $event.offsetY)"
+      @click="clickedImage($event.offsetX, $event.offsetY);"
     >
-      <span class="sr-only">
-        {{ __('Add image comment') }}
-      </span>
+      <span class="sr-only"> {{ __('Add image comment') }} </span>
     </button>
     <button
       v-for="(discussion, index) in allDiscussions"
@@ -111,12 +109,9 @@ export default {
       :disabled="!shouldToggleDiscussion"
       class="js-image-badge"
       type="button"
-      @click="toggleDiscussion({ discussionId: discussion.id })"
+      @click="toggleDiscussion({ discussionId: discussion.id });"
     >
-      <icon
-        v-if="showCommentIcon"
-        name="image-comment-dark"
-      />
+      <icon v-if="showCommentIcon" name="image-comment-dark" />
       <template v-else>
         {{ index + 1 }}
       </template>
@@ -125,15 +120,13 @@ export default {
       v-if="currentCommentForm"
       :style="{
         left: `${currentCommentForm.x}px`,
-        top: `${currentCommentForm.y}px`
+        top: `${currentCommentForm.y}px`,
       }"
       :aria-label="__('Comment form position')"
       class="btn-transparent comment-indicator"
       type="button"
     >
-      <icon
-        name="image-comment-dark"
-      />
+      <icon name="image-comment-dark" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
index b9e14c53d2c..91b87fb042c 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
@@ -34,19 +34,10 @@ export default {
 </script>
 
 <template>
-  <tr
-    :class="className"
-    class="notes_holder"
-  >
-    <td
-      class="notes_content"
-      colspan="3"
-    >
+  <tr :class="className" class="notes_holder">
+    <td class="notes_content" colspan="3">
       <div class="content">
-        <diff-discussions
-          v-if="line.discussions.length"
-          :discussions="line.discussions"
-        />
+        <diff-discussions v-if="line.discussions.length" :discussions="line.discussions" />
         <diff-line-note-form
           v-if="diffLineCommentForms[line.line_code]"
           :diff-file-hash="diffFileHash"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 1f4088066d1..8d53fbded73 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -102,11 +102,6 @@ export default {
       :is-hover="isHover"
       class="diff-line-num new_line qa-new-diff-line"
     />
-    <td
-      :class="line.type"
-      class="line_content"
-      v-html="line.rich_text"
-    >
-    </td>
+    <td :class="line.type" class="line_content" v-html="line.rich_text"></td>
   </tr>
 </template>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 79efac89e98..fafc1649ce7 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -37,11 +37,10 @@ export default {
   <table
     :class="userColorScheme"
     :data-commit-id="commitId"
-    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view">
+    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view"
+  >
     <tbody>
-      <template
-        v-for="(line, index) in diffLines"
-      >
+      <template v-for="(line, index) in diffLines">
         <inline-diff-table-row
           :key="line.line_code"
           :file-hash="diffFile.file_hash"
diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index 6905630ad8c..25ec157ed25 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -19,29 +19,16 @@ export default {
 </script>
 
 <template>
-  <div
-    class="row empty-state nothing-here-block"
-  >
+  <div class="row empty-state nothing-here-block">
     <div class="col-xs-12">
-      <div class="svg-content">
-        <span
-          v-html="emptyImage"
-        ></span>
-      </div>
+      <div class="svg-content"><span v-html="emptyImage"></span></div>
     </div>
     <div class="col-xs-12">
       <div class="text-content text-center">
-        No changes between
-        <span class="ref-name">{{ sourceBranch }}</span>
-        and
+        No changes between <span class="ref-name">{{ sourceBranch }}</span> and
         <span class="ref-name">{{ targetBranch }}</span>
         <div class="text-center">
-          <a
-            :href="newBlobPath"
-            class="btn btn-success"
-          >
-            {{ __('Create commit') }}
-          </a>
+          <a :href="newBlobPath" class="btn btn-success"> {{ __('Create commit') }} </a>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
index 00c2df4dac1..c6b50983277 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
@@ -72,17 +72,9 @@ export default {
 </script>
 
 <template>
-  <tr
-    :class="className"
-    class="notes_holder"
-  >
-    <td
-      class="notes_content parallel old"
-      colspan="2">
-      <div
-        v-if="shouldRenderDiscussionsOnLeft"
-        class="content"
-      >
+  <tr :class="className" class="notes_holder">
+    <td class="notes_content parallel old" colspan="2">
+      <div v-if="shouldRenderDiscussionsOnLeft" class="content">
         <diff-discussions
           v-if="line.left.discussions.length"
           :discussions="line.left.discussions"
@@ -96,13 +88,8 @@ export default {
         line-position="left"
       />
     </td>
-    <td
-      class="notes_content parallel new"
-      colspan="2">
-      <div
-        v-if="shouldRenderDiscussionsOnRight"
-        class="content"
-      >
+    <td class="notes_content parallel new" colspan="2">
+      <div v-if="shouldRenderDiscussionsOnRight" class="content">
         <diff-discussions
           v-if="line.right.discussions.length"
           :discussions="line.right.discussions"
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index 2d87db12fd6..248dfd9815e 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -125,8 +125,7 @@ export default {
         class="line_content parallel left-side"
         @mousedown.native="handleParallelLineMouseDown"
         v-html="line.left.rich_text"
-      >
-      </td>
+      ></td>
     </template>
     <template v-else>
       <td class="diff-line-num old_line empty-cell"></td>
@@ -151,8 +150,7 @@ export default {
         class="line_content parallel right-side"
         @mousedown.native="handleParallelLineMouseDown"
         v-html="line.right.rich_text"
-      >
-      </td>
+      ></td>
     </template>
     <template v-else>
       <td class="diff-line-num old_line empty-cell"></td>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 6942f9b53e0..771b8a80352 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -41,9 +41,7 @@ export default {
   >
     <table>
       <tbody>
-        <template
-          v-for="(line, index) in diffLines"
-        >
+        <template v-for="(line, index) in diffLines">
           <parallel-diff-table-row
             :key="index"
             :file-hash="diffFile.file_hash"
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 1f82eeae6cb..ec4a4aa1d6d 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -72,16 +72,13 @@ export default {
   <div class="tree-list-holder d-flex flex-column">
     <div class="append-bottom-8 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
-        <icon
-          name="search"
-          class="position-absolute tree-list-icon"
-        />
+        <icon name="search" class="position-absolute tree-list-icon" />
         <input
           v-model="search"
           :placeholder="s__('MergeRequest|Filter files')"
           type="search"
           class="form-control"
-          @focus="toggleFocusSearch(true)"
+          @focus="toggleFocusSearch(true);"
           @blur="blurSearch"
         />
         <button
@@ -91,50 +88,39 @@ export default {
           class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
           @click="clearSearch"
         >
-          <icon
-            name="close"
-          />
+          <icon name="close" />
         </button>
       </div>
-      <div
-        v-show="!focusSearch"
-        class="btn-group prepend-left-8 tree-list-view-toggle"
-      >
+      <div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle">
         <button
           v-gl-tooltip.hover
           :aria-label="__('List view')"
           :title="__('List view')"
           :class="{
-            active: !renderTreeList
+            active: !renderTreeList,
           }"
           class="btn btn-default pt-0 pb-0 d-flex align-items-center"
           type="button"
-          @click="toggleRenderTreeList(false)"
+          @click="toggleRenderTreeList(false);"
         >
-          <icon
-            name="hamburger"
-          />
+          <icon name="hamburger" />
         </button>
         <button
           v-gl-tooltip.hover
           :aria-label="__('Tree view')"
           :title="__('Tree view')"
           :class="{
-            active: renderTreeList
+            active: renderTreeList,
           }"
           class="btn btn-default pt-0 pb-0 d-flex align-items-center"
           type="button"
-          @click="toggleRenderTreeList(true)"
+          @click="toggleRenderTreeList(true);"
         >
-          <icon
-            name="file-tree"
-          />
+          <icon name="file-tree" />
         </button>
       </div>
     </div>
-    <div
-      class="tree-list-scroll"
-    >
+    <div class="tree-list-scroll">
       <template v-if="filteredTreeList.length">
         <file-row
           v-for="file in filteredTreeList"
@@ -150,25 +136,15 @@ export default {
           @clickFile="scrollToFile"
         />
       </template>
-      <p
-        v-else
-        class="prepend-top-20 append-bottom-20 text-center"
-      >
+      <p v-else class="prepend-top-20 append-bottom-20 text-center">
         {{ s__('MergeRequest|No files found') }}
       </p>
     </div>
-    <div
-      v-once
-      class="pt-3 pb-3 text-center"
-    >
+    <div v-once class="pt-3 pb-3 text-center">
       {{ n__('%d changed file', '%d changed files', diffFilesLength) }}
       <div>
-        <span class="cgreen">
-          {{ n__('%d addition', '%d additions', addedLines) }}
-        </span>
-        <span class="cred">
-          {{ n__('%d deleted', '%d deletions', removedLines) }}
-        </span>
+        <span class="cgreen"> {{ n__('%d addition', '%d additions', addedLines) }} </span>
+        <span class="cred"> {{ n__('%d deleted', '%d deletions', removedLines) }} </span>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 6354d3ce1e6..a3de058b20e 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -41,12 +41,14 @@ export const assignDiscussionsToDiff = (
 ) => {
   const diffPositionByLineCode = getDiffPositionByLineCode(state.diffFiles);
 
-  discussions.filter(discussion => discussion.diff_discussion).forEach(discussion => {
-    commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
-      discussion,
-      diffPositionByLineCode,
+  discussions
+    .filter(discussion => discussion.diff_discussion)
+    .forEach(discussion => {
+      commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
+        discussion,
+        diffPositionByLineCode,
+      });
     });
-  });
 };
 
 export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 6c0b5c1f427..bd402c0eea5 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -41,7 +41,6 @@ export default {
 
 <template>
   <div class="environments-container">
-
     <gl-loading-icon
       v-if="isLoading"
       :size="3"
@@ -51,10 +50,7 @@ export default {
 
     <slot name="emptyState"></slot>
 
-    <div
-      v-if="!isLoading && environments.length > 0"
-      class="table-holder">
-
+    <div v-if="!isLoading && environments.length > 0" class="table-holder">
       <environment-table
         :environments="environments"
         :can-create-deployment="canCreateDeployment"
diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 2360a52645b..ca2ac4c3c53 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -24,11 +24,11 @@ export default {
         {{ s__("Environments|You don't have any environments right now") }}
       </h4>
       <p class="blank-state-text">
-        {{ s__(`Environments|Environments are places where
-        code gets deployed, such as staging or production.`) }}
-        <a :href="helpPath">
-          {{ s__("Environments|Read more about environments") }}
-        </a>
+        {{
+          s__(`Environments|Environments are places where
+        code gets deployed, such as staging or production.`)
+        }}
+        <a :href="helpPath"> {{ s__('Environments|Read more about environments') }} </a>
       </p>
 
       <div class="text-center">
@@ -37,7 +37,7 @@ export default {
           :href="newPath"
           class="btn btn-success js-new-environment-button"
         >
-          {{ s__("Environments|New environment") }}
+          {{ s__('Environments|New environment') }}
         </a>
       </div>
     </div>
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index b849772a82e..1f7dab9fbd2 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -68,9 +68,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="btn-group"
-    role="group">
+  <div class="btn-group" role="group">
     <button
       v-tooltip
       :title="title"
@@ -82,34 +80,23 @@ export default {
       data-toggle="dropdown"
     >
       <span>
-        <icon name="play" />
-        <icon
-          name="chevron-down"
-        />
+        <icon name="play" /> <icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>
 
     <ul class="dropdown-menu dropdown-menu-right">
-      <li
-        v-for="(action, i) in actions"
-        :key="i">
+      <li 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 d-flex align-items-center"
-          @click="onClickAction(action)"
+          @click="onClickAction(action);"
         >
-          <span class="flex-fill">
-            {{ action.name }}
-          </span>
-          <span
-            v-if="action.scheduledAt"
-            class="text-secondary"
-          >
-            <icon name="clock" />
-            {{ remainingTime(action) }}
+          <span class="flex-fill"> {{ action.name }} </span>
+          <span v-if="action.scheduledAt" class="text-secondary">
+            <icon name="clock" /> {{ remainingTime(action) }}
           </span>
         </button>
       </li>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 34d94490533..cd2f46fd07a 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -453,53 +453,28 @@ export default {
       'folder-row': model.isFolder,
     }"
     class="gl-responsive-table-row"
-    role="row">
+    role="row"
+  >
     <div
       v-gl-tooltip
       :title="model.name"
       class="table-section section-wrap section-15 text-truncate"
       role="gridcell"
     >
-      <div
-        v-if="!model.isFolder"
-        class="table-mobile-header"
-        role="rowheader"
-      >
-        {{ s__("Environments|Environment") }}
+      <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
+        {{ s__('Environments|Environment') }}
       </div>
-      <span
-        v-if="!model.isFolder"
-        class="environment-name table-mobile-content">
-        <a
-          class="qa-environment-link"
-          :href="environmentPath"
-        >
-          {{ model.name }}
-        </a>
+      <span v-if="!model.isFolder" class="environment-name table-mobile-content">
+        <a class="qa-environment-link" :href="environmentPath"> {{ model.name }} </a>
       </span>
-      <span
-        v-else
-        class="folder-name"
-        role="button"
-        @click="onClickFolder">
+      <span v-else class="folder-name" role="button" @click="onClickFolder">
+        <icon :name="folderIconName" class="folder-icon" />
 
-        <icon
-          :name="folderIconName"
-          class="folder-icon"
-        />
+        <icon name="folder" class="folder-icon" />
 
-        <icon
-          name="folder"
-          class="folder-icon"
-        />
+        <span> {{ model.folderName }} </span>
 
-        <span>
-          {{ model.folderName }}
-        </span>
-
-        <span class="badge badge-pill">
-          {{ model.size }}
-        </span>
+        <span class="badge badge-pill"> {{ model.size }} </span>
       </span>
     </div>
 
@@ -507,9 +482,7 @@ export default {
       class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
       role="gridcell"
     >
-      <span v-if="shouldRenderDeploymentID">
-        {{ deploymentInternalId }}
-      </span>
+      <span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
@@ -523,61 +496,32 @@ export default {
       </span>
     </div>
 
-    <div
-      class="table-section section-15 d-none d-sm-none d-md-block"
-      role="gridcell"
-    >
-      <a
-        v-if="shouldRenderBuildName"
-        :href="buildPath"
-        class="build-link flex-truncate-parent"
-      >
+    <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
+      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
     </div>
 
-    <div
-      v-if="!model.isFolder"
-      class="table-section section-20"
-      role="gridcell"
-    >
-      <div
-        role="rowheader"
-        class="table-mobile-header"
-      >
-        {{ s__("Environments|Commit") }}
-      </div>
-      <div
-        v-if="hasLastDeploymentKey"
-        class="js-commit-component table-mobile-content">
+    <div v-if="!model.isFolder" class="table-section section-20" role="gridcell">
+      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Commit') }}</div>
+      <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
           :commit-url="commitUrl"
           :short-sha="commitShortSha"
           :title="commitTitle"
-          :author="commitAuthor"/>
+          :author="commitAuthor"
+        />
       </div>
-      <div
-        v-if="!hasLastDeploymentKey"
-        class="commit-title table-mobile-content">
-        {{ s__("Environments|No deployments yet") }}
+      <div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
+        {{ s__('Environments|No deployments yet') }}
       </div>
     </div>
 
-    <div
-      v-if="!model.isFolder"
-      class="table-section section-10"
-      role="gridcell"
-    >
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__("Environments|Updated") }}
-      </div>
-      <span
-        v-if="canShowDate"
-        class="environment-created-date-timeago table-mobile-content">
+    <div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
+      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
+      <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
         {{ createdDate }}
       </span>
     </div>
@@ -585,12 +529,9 @@ export default {
     <div
       v-if="!model.isFolder && displayEnvironmentActions"
       class="table-section section-30 table-button-footer"
-      role="gridcell">
-
-      <div
-        class="btn-group table-action-buttons"
-        role="group">
-
+      role="gridcell"
+    >
+      <div class="btn-group table-action-buttons" role="group">
         <external-url-component
           v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"
@@ -601,10 +542,7 @@ export default {
           :monitoring-url="monitoringUrl"
         />
 
-        <actions-component
-          v-if="actions.length > 0"
-          :actions="actions"
-        />
+        <actions-component v-if="actions.length > 0" :actions="actions" />
 
         <terminal-button-component
           v-if="model && model.terminal_path"
@@ -617,10 +555,7 @@ export default {
           :retry-url="retryUrl"
         />
 
-        <stop-component
-          v-if="canStopEnvironment"
-          :environment="model"
-        />
+        <stop-component v-if="canStopEnvironment" :environment="model" />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 46c77dca871..50c86af057c 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -61,14 +61,7 @@ export default {
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
-    <icon
-      v-if="isLastDeployment"
-      name="repeat"
-    />
-    <icon
-      v-else
-      name="redo"
-    />
+    <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
     <gl-loading-icon v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index efecc128368..99f50b499d0 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -65,6 +65,6 @@ export default {
     data-target="#stop-environment-modal"
     @click="onClick"
   >
-    <icon name="stop"/>
+    <icon name="stop" />
   </loading-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 557b2062c64..ae9459a2482 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -93,21 +93,11 @@ export default {
     <stop-environment-modal :environment="environmentInStopModal" />
 
     <div class="top-area">
-      <tabs
-        :tabs="tabs"
-        scope="environments"
-        @onChangeTab="onChangeTab"
-      />
+      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
 
-      <div
-        v-if="canCreateEnvironment && !isLoading"
-        class="nav-controls"
-      >
-        <a
-          :href="newEnvironmentPath"
-          class="btn btn-success"
-        >
-          {{ s__("Environments|New environment") }}
+      <div v-if="canCreateEnvironment && !isLoading" class="nav-controls">
+        <a :href="newEnvironmentPath" class="btn btn-success">
+          {{ s__('Environments|New environment') }}
         </a>
       </div>
     </div>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 4eae4eec394..5164d87c5fa 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -41,48 +41,25 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="ci-table"
-    role="grid"
-  >
-    <div
-      class="gl-responsive-table-row table-row-header"
-      role="row"
-    >
-      <div
-        class="table-section section-15 environments-name"
-        role="columnheader"
-      >
-        {{ s__("Environments|Environment") }}
+  <div class="ci-table" role="grid">
+    <div class="gl-responsive-table-row table-row-header" role="row">
+      <div class="table-section section-15 environments-name" role="columnheader">
+        {{ s__('Environments|Environment') }}
       </div>
-      <div
-        class="table-section section-10 environments-deploy"
-        role="columnheader"
-      >
-        {{ s__("Environments|Deployment") }}
+      <div class="table-section section-10 environments-deploy" role="columnheader">
+        {{ s__('Environments|Deployment') }}
       </div>
-      <div
-        class="table-section section-15 environments-build"
-        role="columnheader"
-      >
-        {{ s__("Environments|Job") }}
+      <div class="table-section section-15 environments-build" role="columnheader">
+        {{ s__('Environments|Job') }}
       </div>
-      <div
-        class="table-section section-20 environments-commit"
-        role="columnheader"
-      >
-        {{ s__("Environments|Commit") }}
+      <div class="table-section section-20 environments-commit" role="columnheader">
+        {{ s__('Environments|Commit') }}
       </div>
-      <div
-        class="table-section section-10 environments-date"
-        role="columnheader"
-      >
-        {{ s__("Environments|Updated") }}
+      <div class="table-section section-10 environments-date" role="columnheader">
+        {{ s__('Environments|Updated') }}
       </div>
     </div>
-    <template
-      v-for="(model, i) in environments"
-      :model="model">
+    <template v-for="(model, i) in environments" :model="model">
       <div
         is="environment-item"
         :key="`environment-item-${i}`"
@@ -91,12 +68,8 @@ export default {
         :can-read-environment="canReadEnvironment"
       />
 
-      <template
-        v-if="shouldRenderFolderContent(model)"
-      >
-        <div
-          v-if="model.isLoadingFolderContent"
-          :key="`loading-item-${i}`">
+      <template v-if="shouldRenderFolderContent(model)">
+        <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
           <gl-loading-icon :size="2" />
         </div>
 
@@ -112,11 +85,8 @@ export default {
 
           <div :key="`sub-div-${i}`">
             <div class="text-center prepend-top-10">
-              <a
-                :href="folderUrl(model)"
-                class="btn btn-default"
-              >
-                {{ s__("Environments|Show all") }}
+              <a :href="folderUrl(model)" class="btn btn-default">
+                {{ s__('Environments|Show all') }}
               </a>
             </div>
           </div>
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 2ebc7b5b951..c78d86e9b97 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -62,31 +62,25 @@ export default {
     @submit="onSubmit"
   >
     <template slot="header">
-      <h4
-        class="modal-title d-flex mw-100"
-      >
+      <h4 class="modal-title d-flex mw-100">
         Stopping
-        <span
-          v-gl-tooltip
-          :title="environment.name"
-          class="text-truncate ml-1 mr-1 flex-fill"
-        >{{ environment.name }}</span>
+        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">{{
+          environment.name
+        }}</span>
         ?
       </h4>
     </template>
 
     <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
 
-    <div
-      v-if="!environment.has_stop_action"
-      class="warning_message"
-    >
+    <div v-if="!environment.has_stop_action" class="warning_message">
       <p v-html="noStopActionMessage"></p>
       <a
         href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
         target="_blank"
         rel="noopener noreferrer"
-      >{{ s__('Environments|Learn more about stopping environments') }}</a>
+        >{{ s__('Environments|Learn more about stopping environments') }}</a
+      >
     </div>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 6be4845fe4c..d6f0b6115a6 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -43,20 +43,12 @@ export default {
   <div :class="cssContainerClass">
     <stop-environment-modal :environment="environmentInStopModal" />
 
-    <div
-      v-if="!isLoading"
-      class="top-area"
-    >
-
+    <div v-if="!isLoading" class="top-area">
       <h4 class="js-folder-name environments-folder-name">
-        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
+        {{ s__('Environments|Environments') }} / <b>{{ folderName }}</b>
       </h4>
 
-      <tabs
-        :tabs="tabs"
-        scope="environments"
-        @onChangeTab="onChangeTab"
-      />
+      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
     </div>
 
     <container
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 b9bc5e6ed7f..6b1a934d3fe 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
@@ -58,20 +58,16 @@ export default {
 </script>
 <template>
   <div>
-    <div
-      v-if="!isLocalStorageAvailable"
-      class="dropdown-info-note">
+    <div v-if="!isLocalStorageAvailable" class="dropdown-info-note">
       This feature requires local storage to be enabled
     </div>
     <ul v-else-if="hasItems">
-      <li
-        v-for="(item, index) in processedItems"
-        :key="`processed-items-${index}`"
-      >
+      <li v-for="(item, index) in processedItems" :key="`processed-items-${index}`">
         <button
           type="button"
           class="filtered-search-history-dropdown-item"
-          @click="onItemActivated(item.text)">
+          @click="onItemActivated(item.text);"
+        >
           <span>
             <span
               v-for="(token, tokenIndex) in item.tokens"
@@ -92,15 +88,12 @@ export default {
         <button
           type="button"
           class="filtered-search-history-clear-button"
-          @click="onRequestClearRecentSearches($event)">
+          @click="onRequestClearRecentSearches($event);"
+        >
           Clear recent searches
         </button>
       </li>
     </ul>
-    <div
-      v-else
-      class="dropdown-info-note">
-      You don't have any recent searches
-    </div>
+    <div v-else class="dropdown-info-note">You don't have any recent searches</div>
   </div>
 </template>
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 1ed8254bc58..63531f1f246 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -95,19 +95,14 @@ export default {
 
 <template>
   <div>
-    <frequent-items-search-input
-      :namespace="namespace"
-    />
+    <frequent-items-search-input :namespace="namespace" />
     <gl-loading-icon
       v-if="isLoadingItems"
       :label="translations.loadingMessage"
       :size="2"
       class="loading-animation prepend-top-20"
     />
-    <div
-      v-if="!isLoadingItems && !hasSearchQuery"
-      class="section-header"
-    >
+    <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header">
       {{ translations.header }}
     </div>
     <frequent-items-list
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
index 8e511aa2a36..67ffa97a046 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
@@ -55,11 +55,7 @@ export default {
 <template>
   <div class="frequent-items-list-container">
     <ul class="list-unstyled">
-      <li
-        v-if="isListEmpty"
-        :class="{ 'section-failure': isFetchFailed }"
-        class="section-empty"
-      >
+      <li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
         {{ listEmptyMessage }}
       </li>
       <frequent-items-list-item
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index 2399ee15332..2cbc7c7077b 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -80,35 +80,14 @@ export default {
 
 <template>
   <li class="frequent-items-list-item-container">
-    <a
-      :href="webUrl"
-      class="clearfix"
-    >
+    <a :href="webUrl" class="clearfix">
       <div class="frequent-items-item-avatar-container">
-        <img
-          v-if="hasAvatar"
-          :src="avatarUrl"
-          class="avatar s32"
-        />
-        <identicon
-          v-else
-          :entity-id="itemId"
-          :entity-name="itemName"
-          size-class="s32"
-        />
+        <img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" />
+        <identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" />
       </div>
       <div class="frequent-items-item-metadata-container">
-        <div
-          :title="itemName"
-          class="frequent-items-item-title"
-          v-html="highlightedItemName"
-        >
-        </div>
-        <div
-          v-if="truncatedNamespace"
-          :title="namespace"
-          class="frequent-items-item-namespace"
-        >
+        <div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>
+        <div v-if="truncatedNamespace" :title="namespace" class="frequent-items-item-namespace">
           {{ truncatedNamespace }}
         </div>
       </div>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
index 14c223c61a4..c69e1b792dc 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -49,10 +49,6 @@ export default {
       type="search"
       class="form-control"
     />
-    <icon
-      v-if="!searchQuery"
-      name="search"
-      class="search-icon"
-    />
+    <icon v-if="!searchQuery" name="search" class="search-icon" />
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index bcc7a638346..e885b2b5f41 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -43,18 +43,9 @@ export default {
       :parent-group="parentGroup"
       :action="action"
     />
-    <li
-      v-if="hasMoreChildren"
-      class="group-row">
-      <a
-        :href="parentGroup.relativePath"
-        class="group-row-contents has-more-items">
-        <i
-          class="fa fa-external-link"
-          aria-hidden="true"
-        >
-        </i>
-        {{ moreChildrenStats }}
+    <li v-if="hasMoreChildren" class="group-row">
+      <a :href="parentGroup.relativePath" class="group-row-contents has-more-items">
+        <i class="fa fa-external-link" aria-hidden="true"> </i> {{ moreChildrenStats }}
       </a>
     </li>
   </ul>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 44d6fa26914..688bd37cc56 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -77,89 +77,46 @@ export default {
 </script>
 
 <template>
-  <li
-    :id="groupDomId"
-    :class="rowClass"
-    class="group-row"
-    @click.stop="onClickRowGroup"
-  >
+  <li :id="groupDomId" :class="rowClass" class="group-row" @click.stop="onClickRowGroup">
     <div
       :class="{ 'project-row-contents': !isGroup }"
       class="group-row-contents d-flex justify-content-end align-items-center"
     >
-      <div
-        class="folder-toggle-wrap append-right-4 d-flex align-items-center"
-      >
-        <item-caret
-          :is-group-open="group.isOpen"
-        />
-        <item-type-icon
-          :item-type="group.type"
-          :is-group-open="group.isOpen"
-        />
+      <div class="folder-toggle-wrap append-right-4 d-flex align-items-center">
+        <item-caret :is-group-open="group.isOpen" />
+        <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" />
       </div>
       <div
         :class="{ 'content-loading': group.isChildrenLoading }"
         class="avatar-container s24 d-none d-sm-flex"
       >
-        <a
-          :href="group.relativePath"
-          class="no-expand"
-        >
-          <img
-            v-if="hasAvatar"
-            :src="group.avatarUrl"
-            class="avatar s24"
-          />
-          <identicon
-            v-else
-            :entity-id="group.id"
-            :entity-name="group.name"
-            size-class="s24"
-          />
+        <a :href="group.relativePath" class="no-expand">
+          <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />
+          <identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s24" />
         </a>
       </div>
-      <div
-        class="group-text flex-grow"
-      >
-        <div
-          class="title namespace-title append-right-8"
-        >
+      <div class="group-text flex-grow">
+        <div class="title namespace-title append-right-8">
           <a
             v-tooltip
             :href="group.relativePath"
             :title="group.fullName"
             class="no-expand"
             data-placement="bottom"
-          >{{
-            // ending bracket must be by closing tag to prevent
-            // link hover text-decoration from over-extending
-            group.name
-          }}</a>
-          <span
-            v-if="group.permission"
-            class="user-access-role"
+            >{{
+              // ending bracket must be by closing tag to prevent
+              // link hover text-decoration from over-extending
+              group.name
+            }}</a
           >
-            {{ group.permission }}
-          </span>
+          <span v-if="group.permission" class="user-access-role"> {{ group.permission }} </span>
         </div>
-        <div
-          v-if="group.description"
-          class="description"
-        >
-          <span v-html="group.description">
-          </span>
+        <div v-if="group.description" class="description">
+          <span v-html="group.description"> </span>
         </div>
       </div>
-      <item-stats
-        :item="group"
-        class="group-stats prepend-top-2"
-      />
-      <item-actions
-        v-if="isGroup"
-        :group="group"
-        :parent-group="parentGroup"
-      />
+      <item-stats :item="group" class="group-stats prepend-top-2" />
+      <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" />
     </div>
     <group-folder
       v-if="group.isOpen && hasChildren"
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 81b2e5ea37b..f0f5b8395c9 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -43,19 +43,9 @@ export default {
 
 <template>
   <div class="groups-list-tree-container qa-groups-list-tree-container">
-    <div
-      v-if="searchEmpty"
-      class="has-no-search-results"
-    >
-      {{ searchEmptyMessage }}
-    </div>
-    <template
-      v-else
-    >
-      <group-folder
-        :groups="groups"
-        :action="action"
-      />
+    <div v-if="searchEmpty" class="has-no-search-results">{{ searchEmptyMessage }}</div>
+    <template v-else>
+      <group-folder :groups="groups" :action="action" />
       <pagination-links
         :change="change"
         :page-info="pageInfo"
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index c1783d5ce25..a7995865c77 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -53,8 +53,9 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn no-expand">
-      <icon name="settings"/>
+      class="edit-group btn no-expand"
+    >
+      <icon name="settings" />
     </a>
     <a
       v-if="group.canLeave"
@@ -65,8 +66,9 @@ export default {
       data-container="body"
       data-placement="bottom"
       class="leave-group btn no-expand"
-      @click.prevent="onLeaveGroup">
-      <icon name="leave"/>
+      @click.prevent="onLeaveGroup"
+    >
+      <icon name="leave" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index 2a5bec5e86c..43b9607ea8e 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -21,10 +21,5 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret">
-    <icon
-      :size="12"
-      :name="iconClass"
-    />
-  </span>
+  <span class="folder-caret"> <icon :size="12" :name="iconClass" /> </span>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 829924ba63c..bc6851ea2bf 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -76,14 +76,8 @@ export default {
       css-class="item-visibility"
       tooltip-placement="left"
     />
-    <div
-      v-if="isProject"
-      class="last-updated"
-    >
-      <time-ago-tooltip
-        :time="item.updatedAt"
-        tooltip-placement="bottom"
-      />
+    <div v-if="isProject" class="last-updated">
+      <time-ago-tooltip :time="item.updatedAt" tooltip-placement="bottom" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index c542ca946d3..27b1c632643 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -57,12 +57,6 @@ export default {
     :title="title"
     data-container="body"
   >
-    <icon :name="iconName" />
-    <span
-      v-if="isValuePresent"
-      class="stat-value"
-    >
-      {{ value }}
-    </span>
+    <icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
   </span>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue
index 118d94d4937..e1ebd03cb5f 100644
--- a/app/assets/javascripts/groups/components/item_type_icon.vue
+++ b/app/assets/javascripts/groups/components/item_type_icon.vue
@@ -29,7 +29,5 @@ export default {
 </script>
 
 <template>
-  <span class="item-type-icon">
-    <icon :name="iconClass"/>
-  </span>
+  <span class="item-type-icon"> <icon :name="iconClass" /> </span>
 </template>
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 2cebacc1c4c..a1f66ff764d 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -37,7 +37,7 @@ export default {
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.edit
+            active: currentActivityView === $options.activityBarViews.edit,
           }"
           :title="s__('IDE|Edit')"
           :aria-label="s__('IDE|Edit')"
@@ -45,18 +45,16 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-edit-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.edit);"
         >
-          <icon
-            name="code"
-          />
+          <icon name="code" />
         </button>
       </li>
       <li>
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.review
+            active: currentActivityView === $options.activityBarViews.review,
           }"
           :title="s__('IDE|Review')"
           :aria-label="s__('IDE|Review')"
@@ -64,18 +62,16 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.review);"
         >
-          <icon
-            name="file-modified"
-          />
+          <icon name="file-modified" />
         </button>
       </li>
       <li v-show="hasChanges">
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.commit
+            active: currentActivityView === $options.activityBarViews.commit,
           }"
           :title="s__('IDE|Commit')"
           :aria-label="s__('IDE|Commit')"
@@ -83,11 +79,9 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.commit);"
         >
-          <icon
-            name="commit"
-          />
+          <icon name="commit" />
         </button>
       </li>
     </ul>
diff --git a/app/assets/javascripts/ide/components/branches/item.vue b/app/assets/javascripts/ide/components/branches/item.vue
index cc3e84e3f77..4dff3f7e755 100644
--- a/app/assets/javascripts/ide/components/branches/item.vue
+++ b/app/assets/javascripts/ide/components/branches/item.vue
@@ -32,28 +32,14 @@ export default {
 </script>
 
 <template>
-  <a
-    :href="branchHref"
-    class="btn-link d-flex align-items-center"
-  >
+  <a :href="branchHref" class="btn-link d-flex align-items-center">
     <span class="d-flex append-right-default ide-search-list-current-icon">
-      <icon
-        v-if="isActive"
-        :size="18"
-        name="mobile-issue-close"
-      />
+      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
-      <strong>
-        {{ item.name }}
-      </strong>
-      <span
-        class="ide-merge-request-project-path d-block mt-1"
-      >
-        Updated
-        <timeago
-          :time="item.committedDate || ''"
-        />
+      <strong> {{ item.name }} </strong>
+      <span class="ide-merge-request-project-path d-block mt-1">
+        Updated <timeago :time="item.committedDate || ''" />
       </span>
     </span>
   </a>
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 600e1063f89..3cfdc1a367a 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -68,11 +68,7 @@ export default {
           class="form-control dropdown-input-field"
           @input="searchBranches"
         />
-        <icon
-          :size="18"
-          name="search"
-          class="input-icon"
-        />
+        <icon :size="18" name="search" class="input-icon" />
       </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
@@ -81,26 +77,13 @@ export default {
         :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
-      <ul
-        v-else
-        class="mb-3 w-100"
-      >
+      <ul v-else class="mb-3 w-100">
         <template v-if="hasBranches">
-          <li
-            v-for="item in branches"
-            :key="item.name"
-          >
-            <item
-              :item="item"
-              :project-id="currentProjectId"
-              :is-active="isActiveBranch(item)"
-            />
+          <li v-for="item in branches" :key="item.name">
+            <item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
           </li>
         </template>
-        <li
-          v-else
-          class="ide-search-list-empty d-flex align-items-center justify-content-center"
-        >
+        <li v-else class="ide-search-list-empty d-flex align-items-center justify-content-center">
           <template v-if="hasNoSearchResults">
             {{ __('No branches found') }}
           </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index a8b5c7a16d0..d360dc42cd3 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -57,11 +57,7 @@ export default {
       :disabled="currentBranch && !currentBranch.can_push"
       :title="$options.currentBranchPermissionsTooltip"
     >
-      <span
-        class="ide-radio-label"
-        v-html="commitToCurrentBranchText"
-      >
-      </span>
+      <span class="ide-radio-label" v-html="commitToCurrentBranchText"> </span>
     </radio-group>
     <radio-group
       :value="$options.commitToNewBranch"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
index b0e60edcbe5..5119dbf32eb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
@@ -42,18 +42,9 @@ export default {
 
 <template>
   <div class="d-flex ide-commit-editor-header align-items-center">
-    <file-icon
-      :file-name="activeFile.name"
-      :size="16"
-      class="mr-2"
-    />
-    <strong class="mr-2">
-      {{ activeFile.path }}
-    </strong>
-    <changed-file-icon
-      :file="activeFile"
-      class="ml-0"
-    />
+    <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
+    <strong class="mr-2"> {{ activeFile.path }} </strong>
+    <changed-file-icon :file="activeFile" class="ml-0" />
     <div class="ml-auto">
       <button
         v-if="!isStaged"
@@ -66,7 +57,7 @@ export default {
       <button
         :class="{
           'btn-success': !isStaged,
-          'btn-warning': isStaged
+          'btn-warning': isStaged,
         }"
         type="button"
         class="btn btn-inverted"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
index d0a60d647e5..a23bae8e4c7 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
@@ -13,22 +13,12 @@ export default {
     v-if="!lastCommitMsg"
     class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
   >
-    <div
-      class="ide-commit-empty-state-container"
-    >
-      <div class="svg-content svg-80">
-        <img :src="noChangesStateSvgPath" />
-      </div>
+    <div class="ide-commit-empty-state-container">
+      <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
       <div class="append-right-default prepend-left-default">
-        <div
-          class="text-content text-center"
-        >
-          <h4>
-            {{ __('No changes') }}
-          </h4>
-          <p>
-            {{ __('Edit files in the editor and commit changes here') }}
-          </p>
+        <div class="text-content text-center">
+          <h4>{{ __('No changes') }}</h4>
+          <p>{{ __('Edit files in the editor and commit changes here') }}</p>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 802827fce76..e5cd2411541 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -96,7 +96,7 @@ export default {
   <div
     :class="{
       'is-compact': isCompact,
-      'is-full': !isCompact
+      'is-full': !isCompact,
     }"
     :style="{
       height: componentHeight ? `${componentHeight}px` : null,
@@ -109,11 +109,7 @@ export default {
       @enter="enterTransition"
       @after-enter="afterEndTransition"
     >
-      <div
-        v-if="isCompact"
-        ref="compactEl"
-        class="commit-form-compact"
-      >
+      <div v-if="isCompact" ref="compactEl" class="commit-form-compact">
         <button
           :disabled="!hasChanges"
           type="button"
@@ -122,21 +118,10 @@ export default {
         >
           {{ __('Commit…') }}
         </button>
-        <p
-          class="text-center"
-          v-html="overviewText"
-        ></p>
+        <p class="text-center" v-html="overviewText"></p>
       </div>
-      <form
-        v-if="!isCompact"
-        ref="formEl"
-        @submit.prevent.stop="commitChanges"
-      >
-        <transition name="fade">
-          <success-message
-            v-show="lastCommitMsg"
-          />
-        </transition>
+      <form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commitChanges">
+        <transition name="fade"> <success-message v-show="lastCommitMsg" /> </transition>
         <commit-message-field
           :text="commitMessage"
           :placeholder="preBuiltCommitMessage"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 3e3539e364b..a1094570275 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -93,24 +93,11 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-commit-list-container"
-  >
-    <header
-      class="multi-file-commit-panel-header d-flex mb-0"
-    >
-      <div
-        class="d-flex align-items-center flex-fill"
-      >
-        <icon
-          v-once
-          :name="iconName"
-          :size="18"
-          class="append-right-8"
-        />
-        <strong>
-          {{ titleText }}
-        </strong>
+  <div class="ide-commit-list-container">
+    <header class="multi-file-commit-panel-header d-flex mb-0">
+      <div class="d-flex align-items-center flex-fill">
+        <icon v-once :name="iconName" :size="18" class="append-right-8" />
+        <strong> {{ titleText }} </strong>
         <div class="d-flex ml-auto">
           <button
             ref="actionBtn"
@@ -119,7 +106,7 @@ export default {
             :aria-label="actionBtnText"
             :disabled="!filesLength"
             :class="{
-              'disabled-content': !filesLength
+              'disabled-content': !filesLength,
             }"
             type="button"
             class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
@@ -128,11 +115,7 @@ export default {
             data-boundary="viewport"
             @click="actionBtnClicked"
           >
-            <icon
-              :name="actionBtnIcon"
-              :size="16"
-              class="ml-auto mr-auto"
-            />
+            <icon :name="actionBtnIcon" :size="16" class="ml-auto mr-auto" />
           </button>
           <button
             v-if="!stagedList"
@@ -141,7 +124,7 @@ export default {
             :aria-label="__('Discard all changes')"
             :disabled="!filesLength"
             :class="{
-              'disabled-content': !filesLength
+              'disabled-content': !filesLength,
             }"
             type="button"
             class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
@@ -150,23 +133,13 @@ export default {
             data-boundary="viewport"
             @click="openDiscardModal"
           >
-            <icon
-              :size="16"
-              name="remove-all"
-              class="ml-auto mr-auto"
-            />
+            <icon :size="16" name="remove-all" class="ml-auto mr-auto" />
           </button>
         </div>
       </div>
     </header>
-    <ul
-      v-if="filesLength"
-      class="multi-file-commit-list list-unstyled append-bottom-0"
-    >
-      <li
-        v-for="file in fileList"
-        :key="file.key"
-      >
+    <ul v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0">
+      <li v-for="file in fileList" :key="file.key">
         <list-item
           :file="file"
           :action-component="itemActionComponent"
@@ -176,10 +149,7 @@ export default {
         />
       </li>
     </ul>
-    <p
-      v-else
-      class="multi-file-commit-list form-text text-muted text-center"
-    >
+    <p v-else class="multi-file-commit-list form-text text-muted text-center">
       {{ emptyStateText }}
     </p>
     <gl-modal
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 699fa7dc937..3156a398113 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -69,9 +69,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-list-collapsed text-center"
-  >
+  <div class="multi-file-commit-list-collapsed text-center">
     <div
       v-tooltip
       :title="titleTooltip"
@@ -79,11 +77,7 @@ export default {
       data-placement="left"
       class="append-bottom-15"
     >
-      <icon
-        v-once
-        :name="iconName"
-        :size="18"
-      />
+      <icon v-once :name="iconName" :size="18" />
     </div>
     <div
       v-tooltip
@@ -92,11 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon
-        :name="additionIconName"
-        :size="18"
-        :css-classes="addedFilesIconClass"
-      />
+      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -106,11 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon
-        :name="modifiedIconName"
-        :size="18"
-        :css-classes="modifiedFilesClass"
-      />
+      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ee0e72cd05f..4be4b02ac1e 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -99,7 +99,7 @@ export default {
       v-tooltip
       :title="tooltipTitle"
       :class="{
-        'is-active': isActive
+        'is-active': isActive,
       }"
       class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
       role="button"
@@ -107,18 +107,11 @@ export default {
       @click="openFileInEditor"
     >
       <span class="multi-file-commit-list-file-path d-flex align-items-center">
-        <file-icon
-          :file-name="file.name"
-          class="append-right-8"
-        />{{ file.name }}
+        <file-icon :file-name="file.name" class="append-right-8" />{{ file.name }}
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon
-            :name="iconName"
-            :size="16"
-            :css-classes="iconClass"
-          />
+          <icon :name="iconName" :size="16" :css-classes="iconClass" />
         </div>
       </div>
     </div>
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 37ca108fafc..3173e8a4f9f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -71,24 +71,16 @@ export default {
   <fieldset class="common-note-form ide-commit-message-field">
     <div
       :class="{
-        'is-focused': isFocused
+        'is-focused': isFocused,
       }"
       class="md-area"
     >
-      <div
-        v-once
-        class="md-header"
-      >
+      <div v-once class="md-header">
         <ul class="nav-links">
           <li>
             {{ __('Commit Message') }}
-            <span
-              v-popover="$options.popoverOptions"
-              class="form-text text-muted prepend-left-10"
-            >
-              <icon
-                name="question"
-              />
+            <span v-popover="$options.popoverOptions" class="form-text text-muted prepend-left-10">
+              <icon name="question" />
             </span>
           </li>
         </ul>
@@ -97,22 +89,13 @@ export default {
         <div class="ide-commit-message-highlights-container">
           <div
             :style="{
-              transform: `translate3d(0, ${-scrollTop}px, 0)`
+              transform: `translate3d(0, ${-scrollTop}px, 0)`,
             }"
             class="note-textarea highlights monospace"
           >
-            <div
-              v-for="(line, index) in allLines"
-              :key="index"
-            >
-              <span
-                v-text="line.text"
-              >
-              </span><mark
-                v-show="line.highlightedText"
-                v-text="line.highlightedText"
-              >
-              </mark>
+            <div v-for="(line, index) in allLines" :key="index">
+              <span v-text="line.text"> </span
+              ><mark v-show="line.highlightedText" v-text="line.highlightedText"> </mark>
             </div>
           </div>
         </div>
@@ -124,8 +107,8 @@ export default {
           name="commit-message"
           @scroll="handleScroll"
           @input="onInput"
-          @focus="updateIsFocused(true)"
-          @blur="updateIsFocused(false)"
+          @focus="updateIsFocused(true);"
+          @blur="updateIsFocused(false);"
         >
         </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 969e2aa61c4..3525084b1cb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -56,7 +56,7 @@ export default {
       v-tooltip
       :title="tooltipTitle"
       :class="{
-        'is-disabled': disabled
+        'is-disabled': disabled,
       }"
     >
       <input
@@ -65,27 +65,18 @@ export default {
         :disabled="disabled"
         type="radio"
         name="commit-action"
-        @change="updateCommitAction($event.target.value)"
+        @change="updateCommitAction($event.target.value);"
       />
       <span class="prepend-left-10">
-        <span
-          v-if="label"
-          class="ide-radio-label"
-        >
-          {{ label }}
-        </span>
-        <slot v-else></slot>
+        <span v-if="label" class="ide-radio-label"> {{ label }} </span> <slot v-else></slot>
       </span>
     </label>
-    <div
-      v-if="commitAction === value && showInput"
-      class="ide-commit-new-branch"
-    >
+    <div v-if="commitAction === value && showInput" class="ide-commit-new-branch">
       <input
         :placeholder="newBranchName"
         type="text"
         class="form-control monospace"
-        @input="updateBranchName($event.target.value)"
+        @input="updateBranchName($event.target.value);"
       />
     </div>
   </fieldset>
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 adf4b479c97..02c2004d495 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -38,10 +38,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-once
-    class="multi-file-discard-btn d-flex"
-  >
+  <div v-once class="multi-file-discard-btn d-flex">
     <button
       v-tooltip
       :aria-label="__('Stage changes')"
@@ -51,13 +48,9 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop.prevent="stageChange(path)"
+      @click.stop.prevent="stageChange(path);"
     >
-      <icon
-        :size="16"
-        name="mobile-issue-close"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="mobile-issue-close" class="ml-auto mr-auto" />
     </button>
     <button
       v-tooltip
@@ -70,18 +63,14 @@ export default {
       data-placement="bottom"
       @click.stop.prevent="showDiscardModal"
     >
-      <icon
-        :size="16"
-        name="remove"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="remove" class="ml-auto mr-auto" />
     </button>
     <gl-modal
       :id="modalId"
       :header-title-text="modalTitle"
       :footer-primary-button-text="__('Discard changes')"
       footer-primary-button-variant="danger"
-      @submit="discardFileChanges(path)"
+      @submit="discardFileChanges(path);"
     >
       {{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
     </gl-modal>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index a6df91b79c2..b1d5de8682d 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -9,23 +9,11 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-panel-success-message"
-    aria-live="assertive"
-  >
-    <div class="svg-content svg-80">
-      <img
-        :src="committedStateSvgPath"
-        alt=""
-      />
-    </div>
+  <div class="multi-file-commit-panel-success-message" aria-live="assertive">
+    <div class="svg-content svg-80"><img :src="committedStateSvgPath" alt="" /></div>
     <div class="append-right-default prepend-left-default">
-      <div
-        class="text-content text-center"
-      >
-        <h4>
-          {{ __('All changes are committed') }}
-        </h4>
+      <div class="text-content text-center">
+        <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>
       </div>
     </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 86c40602074..ce41fcdb087 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -23,10 +23,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-once
-    class="multi-file-discard-btn d-flex"
-  >
+  <div v-once class="multi-file-discard-btn d-flex">
     <button
       v-tooltip
       :aria-label="__('Unstage changes')"
@@ -36,13 +33,9 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop.prevent="unstageChange(path)"
+      @click.stop.prevent="unstageChange(path);"
     >
-      <icon
-        :size="16"
-        name="redo"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="redo" class="ml-auto mr-auto" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index 95598c9aca6..5f99261ec39 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -30,16 +30,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="dropdown"
-  >
-    <button
-      type="button"
-      class="btn btn-link"
-      data-toggle="dropdown"
-    >
-      {{ __('Edit') }}
-    </button>
+  <div class="dropdown">
+    <button type="button" class="btn btn-link" data-toggle="dropdown">{{ __('Edit') }}</button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
         <li>
@@ -48,11 +40,9 @@ export default {
               'is-active': viewer === $options.viewerTypes.mr,
             }"
             href="#"
-            @click.prevent="changeMode($options.viewerTypes.mr)"
+            @click.prevent="changeMode($options.viewerTypes.mr);"
           >
-            <strong class="dropdown-menu-inner-title">
-              {{ mergeReviewLine }}
-            </strong>
+            <strong class="dropdown-menu-inner-title"> {{ mergeReviewLine }} </strong>
             <span class="dropdown-menu-inner-content">
               {{ __('Compare changes with the merge request target branch') }}
             </span>
@@ -64,7 +54,7 @@ export default {
               'is-active': viewer === $options.viewerTypes.diff,
             }"
             href="#"
-            @click.prevent="changeMode($options.viewerTypes.diff)"
+            @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/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index 11fc15871ac..22113692968 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -43,15 +43,9 @@ export default {
 </script>
 
 <template>
-  <div
-    class="flash-container flash-container-page"
-    @click="clickFlash"
-  >
+  <div class="flash-container flash-container-page" @click="clickFlash">
     <div class="flash-alert">
-      <span
-        v-html="message.text"
-      >
-      </span>
+      <span v-html="message.text"> </span>
       <button
         v-if="message.action"
         type="button"
@@ -59,10 +53,7 @@ export default {
         @click.stop.prevent="clickAction"
       >
         {{ message.actionText }}
-        <gl-loading-icon
-          v-show="isLoading"
-          inline
-        />
+        <gl-loading-icon v-show="isLoading" inline />
       </button>
     </div>
   </div>
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
index e24fe5bbccb..954f84cea17 100644
--- a/app/assets/javascripts/ide/components/external_link.vue
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -20,10 +20,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="showButtons"
-    class="pull-right ide-btn-group"
-  >
+  <div v-if="showButtons" class="pull-right ide-btn-group">
     <a
       :href="file.permalink"
       :title="s__('IDE|Open in file view')"
@@ -31,11 +28,7 @@ export default {
       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"
-      />
+      <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 760ed8654ee..bb391912572 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -164,13 +164,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-file-finder-overlay"
-    @mousedown.self="toggleFileFinder(false)"
-  >
-    <div
-      class="dropdown-menu diff-file-changes ide-file-finder show"
-    >
+  <div class="ide-file-finder-overlay" @mousedown.self="toggleFileFinder(false);">
+    <div class="dropdown-menu diff-file-changes ide-file-finder show">
       <div class="dropdown-input">
         <input
           ref="searchInput"
@@ -179,12 +174,12 @@ export default {
           type="search"
           class="dropdown-input-field"
           autocomplete="off"
-          @keydown="onKeydown($event)"
-          @keyup="onKeyup($event)"
+          @keydown="onKeydown($event);"
+          @keyup="onKeyup($event);"
         />
         <i
           :class="{
-            hidden: showClearInputButton
+            hidden: showClearInputButton,
           }"
           aria-hidden="true"
           class="fa fa-search dropdown-input-search"
@@ -192,7 +187,7 @@ export default {
         <i
           :aria-label="__('Clear search input')"
           :class="{
-            show: showClearInputButton
+            show: showClearInputButton,
           }"
           role="button"
           class="fa fa-times dropdown-input-clear"
@@ -200,17 +195,9 @@ export default {
         ></i>
       </div>
       <div>
-        <virtual-list
-          ref="virtualScrollList"
-          :size="listHeight"
-          :remain="listShowCount"
-          wtag="ul"
-        >
+        <virtual-list ref="virtualScrollList" :size="listHeight" :remain="listShowCount" wtag="ul">
           <template v-if="filteredBlobsLength">
-            <li
-              v-for="(file, index) in filteredBlobs"
-              :key="file.key"
-            >
+            <li v-for="(file, index) in filteredBlobs" :key="file.key">
               <item
                 :file="file"
                 :search-text="searchText"
@@ -223,10 +210,7 @@ export default {
               />
             </li>
           </template>
-          <li
-            v-else
-            class="dropdown-menu-empty-item"
-          >
+          <li v-else class="dropdown-menu-empty-item">
             <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
               <template v-if="loading">
                 {{ __('Loading...') }}
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 72ce37be63a..83e80d50aff 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -74,9 +74,7 @@ export default {
       css-classes="diff-file-changed-icon append-right-8"
     />
     <span class="diff-changed-file-content append-right-8">
-      <strong
-        class="diff-changed-file-name"
-      >
+      <strong class="diff-changed-file-name">
         <span
           v-for="(char, charIndex) in file.name.split('')"
           :key="charIndex + char"
@@ -87,9 +85,7 @@ export default {
         >
         </span>
       </strong>
-      <span
-        class="diff-changed-file-path prepend-top-5"
-      >
+      <span class="diff-changed-file-path prepend-top-5">
         <span
           v-for="(char, charIndex) in pathWithEllipsis.split('')"
           :key="charIndex + char"
@@ -101,13 +97,8 @@ export default {
         </span>
       </span>
     </span>
-    <span
-      v-if="file.changed || file.tempFile"
-      class="diff-changed-stats"
-    >
-      <changed-file-icon
-        :file="file"
-      />
+    <span v-if="file.changed || file.tempFile" class="diff-changed-stats">
+      <changed-file-icon :file="file" />
     </span>
   </button>
 </template>
diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue
index 2ad14b88410..d6673cf0421 100644
--- a/app/assets/javascripts/ide/components/file_row_extra.vue
+++ b/app/assets/javascripts/ide/components/file_row_extra.vue
@@ -69,13 +69,8 @@ export default {
 
 <template>
   <div class="float-right ide-file-icon-holder">
-    <mr-file-icon
-      v-if="file.mrChange"
-    />
-    <span
-      v-if="showTreeChangesCount"
-      class="ide-tree-changes"
-    >
+    <mr-file-icon v-if="file.mrChange" />
+    <span v-if="showTreeChangesCount" class="ide-tree-changes">
       {{ changesCount }}
       <icon
         v-tooltip
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index 3587626c580..d459e3b43d3 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -48,9 +48,7 @@ export default {
 
 <template>
   <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
-    <strong class="append-right-default">
-      {{ __('File templates') }}
-    </strong>
+    <strong class="append-right-default"> {{ __('File templates') }} </strong>
     <dropdown
       :data="templateTypes"
       :label="selectedTemplateType.name || __('Choose a type...')"
@@ -67,12 +65,7 @@ export default {
       @click="selectTemplate"
     />
     <transition name="fade">
-      <button
-        v-show="updateSuccess"
-        type="button"
-        class="btn btn-default"
-        @click="undo"
-      >
+      <button v-show="updateSuccess" type="button" class="btn btn-default" @click="undo">
         {{ __('Undo') }}
       </button>
     </transition>
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index 81d8d0b5132..414ea9c7d4d 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -75,48 +75,23 @@ export default {
 
 <template>
   <div class="dropdown">
-    <dropdown-button
-      :toggle-text="label"
-      data-display="static"
-    />
+    <dropdown-button :toggle-text="label" data-display="static" />
     <div class="dropdown-menu pb-0">
-      <div
-        v-if="title"
-        class="dropdown-title ml-0 mr-0"
-      >
-        {{ title }}
-      </div>
-      <div
-        v-if="!showLoading && searchable"
-        class="dropdown-input"
-      >
+      <div v-if="title" class="dropdown-title ml-0 mr-0">{{ title }}</div>
+      <div v-if="!showLoading && searchable" class="dropdown-input">
         <input
           v-model="search"
           :placeholder="__('Filter...')"
           type="search"
           class="dropdown-input-field qa-dropdown-filter-input"
         />
-        <i
-          aria-hidden="true"
-          class="fa fa-search dropdown-input-search"
-        ></i>
+        <i aria-hidden="true" class="fa fa-search dropdown-input-search"></i>
       </div>
       <div class="dropdown-content">
-        <gl-loading-icon
-          v-if="showLoading"
-          :size="2"
-        />
+        <gl-loading-icon v-if="showLoading" :size="2" />
         <ul v-else>
-          <li
-            v-for="(item, index) in outputData"
-            :key="index"
-          >
-            <button
-              type="button"
-              @click="clickItem(item)"
-            >
-              {{ item.name }}
-            </button>
+          <li v-for="(item, index) in outputData" :key="index">
+            <button type="button" @click="clickItem(item);">{{ item.name }}</button>
           </li>
         </ul>
       </div>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 0a368f6558c..caec8779cac 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -88,27 +88,13 @@ export default {
 
 <template>
   <article class="ide position-relative d-flex flex-column align-items-stretch">
-    <error-message
-      v-if="errorMessage"
-      :message="errorMessage"
-    />
-    <div
-      class="ide-view flex-grow d-flex"
-    >
-      <find-file
-        v-show="fileFindVisible"
-      />
+    <error-message v-if="errorMessage" :message="errorMessage" />
+    <div class="ide-view flex-grow d-flex">
+      <find-file v-show="fileFindVisible" />
       <ide-sidebar />
-      <div
-        class="multi-file-edit-pane"
-      >
-        <template
-          v-if="activeFile"
-        >
-          <commit-editor-header
-            v-if="isCommitModeActive"
-            :active-file="activeFile"
-          />
+      <div class="multi-file-edit-pane">
+        <template v-if="activeFile">
+          <commit-editor-header v-if="isCommitModeActive" :active-file="activeFile" />
           <repo-tabs
             v-else
             :active-file="activeFile"
@@ -117,32 +103,20 @@ export default {
             :has-changes="hasChanges"
             :merge-request-id="currentMergeRequestId"
           />
-          <repo-editor
-            :file="activeFile"
-            class="multi-file-edit-pane-content"
-          />
+          <repo-editor :file="activeFile" class="multi-file-edit-pane-content" />
         </template>
-        <template
-          v-else
-        >
-          <div
-            v-once
-            class="ide-empty-state"
-          >
+        <template v-else>
+          <div v-once class="ide-empty-state">
             <div class="row js-empty-state">
               <div class="col-12">
-                <div class="svg-content svg-250">
-                  <img :src="emptyStateSvgPath" />
-                </div>
+                <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
               </div>
               <div class="col-12">
                 <div class="text-content text-center">
-                  <h4>
-                    Welcome to the GitLab IDE
-                  </h4>
+                  <h4>Welcome to the GitLab IDE</h4>
                   <p>
-                    Select a file from the left sidebar to begin editing.
-                    Afterwards, you'll be able to commit your changes.
+                    Select a file from the left sidebar to begin editing. Afterwards, you'll be able
+                    to commit your changes.
                   </p>
                 </div>
               </div>
@@ -150,12 +124,9 @@ export default {
           </div>
         </template>
       </div>
-      <component
-        :is="rightPaneComponent"
-        v-if="currentProjectId"
-      />
+      <component :is="rightPaneComponent" v-if="currentProjectId" />
     </div>
-    <ide-status-bar :file="activeFile"/>
+    <ide-status-bar :file="activeFile" />
     <new-modal />
   </article>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_project_header.vue b/app/assets/javascripts/ide/components/ide_project_header.vue
index 6cf190288e8..36bc7c70196 100644
--- a/app/assets/javascripts/ide/components/ide_project_header.vue
+++ b/app/assets/javascripts/ide/components/ide_project_header.vue
@@ -16,18 +16,10 @@ export default {
 
 <template>
   <div class="context-header ide-context-header">
-    <a
-      :href="project.web_url"
-      :title="s__('IDE|Go to project')"
-    >
-      <project-avatar-default
-        :project="project"
-        :size="48"
-      />
+    <a :href="project.web_url" :title="s__('IDE|Go to project')">
+      <project-avatar-default :project="project" :size="48" />
       <span class="ide-sidebar-project-title">
-        <span class="sidebar-context-title">
-          {{ project.name }}
-        </span>
+        <span class="sidebar-context-title"> {{ project.name }} </span>
         <span class="sidebar-context-title text-secondary">
           {{ project.path_with_namespace }}
         </span>
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index d09c99050fe..901b8892e80 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -42,13 +42,8 @@ export default {
 </script>
 
 <template>
-  <ide-tree-list
-    :viewer-type="viewer"
-    header-class="ide-review-header"
-  >
-    <template
-      slot="header"
-    >
+  <ide-tree-list :viewer-type="viewer" header-class="ide-review-header">
+    <template slot="header">
       <div class="ide-review-button-holder">
         {{ __('Review') }}
         <editor-mode-dropdown
@@ -63,12 +58,12 @@ export default {
           {{ __('Latest changes') }}
         </template>
         <template v-else-if="showMergeRequestText">
-          {{ __('Merge request') }}
-          (<a
+          {{ __('Merge request') }} (<a
             v-if="currentMergeRequest"
             :href="currentMergeRequest.web_url"
             v-text="mergeRequestId"
-          ></a>)
+          ></a
+          >)
         </template>
       </div>
     </template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 6b4849eb6f9..6178d2b1fc7 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -37,34 +37,21 @@ export default {
 </script>
 
 <template>
-  <resizable-panel
-    :collapsible="false"
-    :initial-width="340"
-    side="left"
-    class="flex-column"
-  >
+  <resizable-panel :collapsible="false" :initial-width="340" side="left" class="flex-column">
     <template v-if="loading">
       <div class="multi-file-commit-panel-inner">
-        <div
-          v-for="n in 3"
-          :key="n"
-          class="multi-file-loading-container"
-        >
+        <div v-for="n in 3" :key="n" class="multi-file-loading-container">
           <gl-skeleton-loading />
         </div>
       </div>
     </template>
     <template v-else>
-      <ide-project-header
-        :project="currentProject"
-      />
+      <ide-project-header :project="currentProject" />
       <div class="ide-context-body d-flex flex-fill">
         <activity-bar />
         <div class="multi-file-commit-panel-inner">
           <div class="multi-file-commit-panel-inner-content">
-            <component
-              :is="currentActivityView"
-            />
+            <component :is="currentActivityView" />
           </div>
           <commit-form />
         </div>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index a04d09ef374..e2e0acc22b1 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -79,18 +79,12 @@ export default {
 
 <template>
   <footer class="ide-status-bar">
-    <div
-      v-if="lastCommit"
-      class="ide-status-branch"
-    >
-      <span
-        v-if="latestPipeline && latestPipeline.details"
-        class="ide-status-pipeline"
-      >
+    <div v-if="lastCommit" class="ide-status-branch">
+      <span v-if="latestPipeline && latestPipeline.details" class="ide-status-pipeline">
         <button
           type="button"
           class="p-0 border-0 h-50"
-          @click="openRightPane($options.rightSidebarViews.pipelines)"
+          @click="openRightPane($options.rightSidebarViews.pipelines);"
         >
           <ci-icon
             v-tooltip
@@ -99,24 +93,21 @@ export default {
           />
         </button>
         Pipeline
-        <a
-          :href="latestPipeline.details.status.details_path"
-          class="monospace">#{{ latestPipeline.id }}</a>
-        {{ latestPipeline.details.status.text }}
-        for
+        <a :href="latestPipeline.details.status.details_path" class="monospace"
+          >#{{ latestPipeline.id }}</a
+        >
+        {{ latestPipeline.details.status.text }} for
       </span>
 
-      <icon
-        name="commit"
-      />
+      <icon name="commit" />
       <a
         v-tooltip
         :title="lastCommit.message"
         :href="getCommitPath(lastCommit.short_id)"
         class="commit-sha"
-      >{{ lastCommit.short_id }}</a>
-      by
-      {{ lastCommit.author_name }}
+        >{{ lastCommit.short_id }}</a
+      >
+      by {{ lastCommit.author_name }}
       <time
         v-tooltip
         :datetime="lastCommit.committed_date"
@@ -127,28 +118,11 @@ export default {
         {{ lastCommitFormatedAge }}
       </time>
     </div>
-    <div
-      v-if="file"
-      class="ide-status-file"
-    >
-      {{ file.name }}
-    </div>
-    <div
-      v-if="file"
-      class="ide-status-file"
-    >
-      {{ file.eol }}
-    </div>
-    <div
-      v-if="file && !file.binary"
-      class="ide-status-file">
+    <div v-if="file" class="ide-status-file">{{ file.name }}</div>
+    <div v-if="file" class="ide-status-file">{{ file.eol }}</div>
+    <div v-if="file && !file.binary" class="ide-status-file">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
-    <div
-      v-if="file"
-      class="ide-status-file"
-    >
-      {{ file.fileLanguage }}
-    </div>
+    <div v-if="file" class="ide-status-file">{{ file.fileLanguage }}</div>
   </footer>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 9f9e638f1aa..9fc21adae7c 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -34,12 +34,8 @@ export default {
 </script>
 
 <template>
-  <ide-tree-list
-    viewer-type="editor"
-  >
-    <template
-      slot="header"
-    >
+  <ide-tree-list viewer-type="editor">
+    <template slot="header">
       {{ __('Edit') }}
       <div class="ide-tree-actions ml-auto d-flex">
         <new-entry-button
@@ -47,7 +43,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
-          @click="openNewEntryModal({ type: 'blob' })"
+          @click="openNewEntryModal({ type: 'blob' });"
         />
         <upload
           :show-label="false"
@@ -60,7 +56,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0"
           icon="folder-new"
-          @click="openNewEntryModal({ type: 'tree' })"
+          @click="openNewEntryModal({ type: 'tree' });"
         />
       </div>
     </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 12ed7f86b3d..81374f26645 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -42,29 +42,18 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-file-list qa-file-list"
-  >
+  <div class="ide-file-list qa-file-list">
     <template v-if="showLoading">
-      <div
-        v-for="n in 3"
-        :key="n"
-        class="multi-file-loading-container"
-      >
+      <div v-for="n in 3" :key="n" class="multi-file-loading-container">
         <gl-skeleton-loading />
       </div>
     </template>
     <template v-else>
-      <header
-        :class="headerClass"
-        class="ide-tree-header"
-      >
+      <header :class="headerClass" class="ide-tree-header">
         <nav-dropdown />
         <slot name="header"></slot>
       </header>
-      <div
-        class="ide-tree-body h-100"
-      >
+      <div class="ide-tree-body h-100">
         <file-row
           v-for="file in currentTree.tree"
           :key="file.key"
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index f884c26ed6a..e8fe5fc696d 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -75,20 +75,12 @@ export default {
 <template>
   <div class="ide-pipeline build-page d-flex flex-column flex-fill">
     <header class="ide-job-header d-flex align-items-center">
-      <button
-        class="btn btn-default btn-sm d-flex"
-        @click="setDetailJob(null)"
-      >
-        <icon
-          name="chevron-left"
-        />
-        {{ __('View jobs') }}
+      <button class="btn btn-default btn-sm d-flex" @click="setDetailJob(null);">
+        <icon name="chevron-left" /> {{ __('View jobs') }}
       </button>
     </header>
     <div class="top-bar d-flex border-left-0">
-      <job-description
-        :job="detailJob"
-      />
+      <job-description :job="detailJob" />
       <div class="controllers ml-auto">
         <a
           v-tooltip
@@ -99,28 +91,13 @@ export default {
           class="controllers-buttons"
           target="_blank"
         >
-          <i
-            aria-hidden="true"
-            class="fa fa-file-text-o"
-          ></i>
+          <i aria-hidden="true" class="fa fa-file-text-o"></i>
         </a>
-        <scroll-button
-          :disabled="isScrolledToTop"
-          direction="up"
-          @click="scrollUp"
-        />
-        <scroll-button
-          :disabled="isScrolledToBottom"
-          direction="down"
-          @click="scrollDown"
-        />
+        <scroll-button :disabled="isScrolledToTop" direction="up" @click="scrollUp" />
+        <scroll-button :disabled="isScrolledToBottom" direction="down" @click="scrollDown" />
       </div>
     </div>
-    <pre
-      ref="buildTrace"
-      class="build-trace mb-0 h-100"
-      @scroll="scrollBuildLog"
-    >
+    <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
       <code
         v-show="!detailJob.isLoading"
         class="bash"
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
index 7e24974f7e5..7280fba9e7a 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/description.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -23,24 +23,11 @@ export default {
 
 <template>
   <div class="d-flex align-items-center">
-    <ci-icon
-      :status="job.status"
-      :borderless="true"
-      :size="24"
-      class="d-flex"
-    />
+    <ci-icon :status="job.status" :borderless="true" :size="24" class="d-flex" />
     <span class="prepend-left-8">
       {{ job.name }}
-      <a
-        :href="job.path"
-        target="_blank"
-        class="ide-external-link"
-      >
-        {{ jobId }}
-        <icon
-          :size="12"
-          name="external-link"
-        />
+      <a :href="job.path" target="_blank" class="ide-external-link">
+        {{ jobId }} <icon :size="12" name="external-link" />
       </a>
     </span>
   </div>
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 103a407987f..5674d3ffa80 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
@@ -58,9 +58,7 @@ export default {
       type="button"
       @click="clickedScroll"
     >
-      <icon
-        :name="iconName"
-      />
+      <icon :name="iconName" />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 7f4695a0451..be8bf77bba0 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -26,17 +26,9 @@ export default {
 
 <template>
   <div class="ide-job-item">
-    <job-description
-      :job="job"
-      class="append-right-default"
-    />
+    <job-description :job="job" class="append-right-default" />
     <div class="ml-auto align-self-center">
-      <button
-        v-if="job.started"
-        type="button"
-        class="btn btn-default btn-sm"
-        @click="clickViewLog"
-      >
+      <button v-if="job.started" type="button" class="btn btn-default btn-sm" @click="clickViewLog">
         {{ __('View log') }}
       </button>
     </div>
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index e3626f60899..2cb5050c3f0 100644
--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -26,11 +26,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon
-      v-if="loading && !stages.length"
-      :size="2"
-      class="prepend-top-default"
-    />
+    <gl-loading-icon v-if="loading && !stages.length" :size="2" class="prepend-top-default" />
     <template v-else>
       <stage
         v-for="stage in stages"
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index e4fc78afaf2..b1be25ea602 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -56,20 +56,15 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-stage card prepend-top-default"
-  >
+  <div class="ide-stage card prepend-top-default">
     <div
       :class="{
-        'border-bottom-0': stage.isCollapsed
+        'border-bottom-0': stage.isCollapsed,
       }"
       class="card-header"
       @click="toggleCollapsed"
     >
-      <ci-icon
-        :status="stage.status"
-        :size="24"
-      />
+      <ci-icon :status="stage.status" :size="24" />
       <strong
         ref="stageTitle"
         v-tooltip="showTooltip"
@@ -79,33 +74,15 @@ export default {
       >
         {{ stage.name }}
       </strong>
-      <div
-        v-if="!stage.isLoading || stage.jobs.length"
-        class="append-right-8 prepend-left-4"
-      >
-        <span class="badge badge-pill">
-          {{ jobsCount }}
-        </span>
+      <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
+        <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon
-        :name="collapseIcon"
-        css-classes="ide-stage-collapse-icon"
-      />
+      <icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
     </div>
-    <div
-      v-show="!stage.isCollapsed"
-      class="card-body"
-    >
-      <gl-loading-icon
-        v-if="showLoadingIcon"
-      />
+    <div v-show="!stage.isCollapsed" class="card-body">
+      <gl-loading-icon v-if="showLoadingIcon" />
       <template v-else>
-        <item
-          v-for="job in stage.jobs"
-          :key="job.id"
-          :job="job"
-          @clickViewLog="clickViewLog"
-        />
+        <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" />
       </template>
     </div>
   </div>
diff --git a/app/assets/javascripts/ide/components/merge_requests/info.vue b/app/assets/javascripts/ide/components/merge_requests/info.vue
index 199d2e74971..73ec992466c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/info.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/info.vue
@@ -19,13 +19,8 @@ export default {
 <template>
   <div class="ide-merge-request-info h-100 d-flex flex-column">
     <div class="detail-page-header">
-      <icon
-        name="git-merge"
-        class="align-self-center append-right-8"
-      />
-      <strong>
-        !{{ currentMergeRequest.iid }}
-      </strong>
+      <icon name="git-merge" class="align-self-center append-right-8" />
+      <strong> !{{ currentMergeRequest.iid }} </strong>
     </div>
     <div class="issuable-details">
       <title-component
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index 0c4ea80ba08..60889c893cf 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -40,24 +40,13 @@ export default {
 </script>
 
 <template>
-  <a
-    :href="mergeRequestHref"
-    class="btn-link d-flex align-items-center"
-  >
+  <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
     <span class="d-flex append-right-default ide-search-list-current-icon">
-      <icon
-        v-if="isActive"
-        :size="18"
-        name="mobile-issue-close"
-      />
+      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
-      <strong>
-        {{ item.title }}
-      </strong>
-      <span class="ide-merge-request-project-path d-block mt-1">
-        {{ pathWithID }}
-      </span>
+      <strong> {{ item.title }} </strong>
+      <span class="ide-merge-request-project-path d-block mt-1"> {{ pathWithID }} </span>
     </span>
   </a>
 </template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 4df29590b85..ac2b0eddfb4 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -84,13 +84,9 @@ export default {
           :placeholder="__('Search merge requests')"
           @focus="onSearchFocus"
           @input="searchMergeRequests"
-          @removeToken="setSearchType(null)"
-        />
-        <icon
-          :size="18"
-          name="search"
-          class="input-icon"
+          @removeToken="setSearchType(null);"
         />
+        <icon :size="18" name="search" class="input-icon" />
       </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
@@ -100,36 +96,23 @@ export default {
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
       <template v-else>
-        <ul
-          class="mb-3 w-100"
-        >
+        <ul class="mb-3 w-100">
           <template v-if="showSearchTypes">
-            <li
-              v-for="searchType in $options.searchTypes"
-              :key="searchType.type"
-            >
+            <li v-for="searchType in $options.searchTypes" :key="searchType.type">
               <button
                 type="button"
                 class="btn-link d-flex align-items-center"
-                @click.stop="setSearchType(searchType)"
+                @click.stop="setSearchType(searchType);"
               >
                 <span class="d-flex append-right-default ide-search-list-current-icon">
-                  <icon
-                    :size="18"
-                    name="search"
-                  />
-                </span>
-                <span>
-                  {{ searchType.label }}
+                  <icon :size="18" name="search" />
                 </span>
+                <span> {{ searchType.label }} </span>
               </button>
             </li>
           </template>
           <template v-else-if="hasMergeRequests">
-            <li
-              v-for="item in mergeRequests"
-              :key="item.id"
-            >
+            <li v-for="item in mergeRequests" :key="item.id">
               <item
                 :item="item"
                 :current-id="currentMergeRequestId"
@@ -137,10 +120,7 @@ export default {
               />
             </li>
           </template>
-          <li
-            v-else
-            class="ide-search-list-empty d-flex align-items-center justify-content-center"
-          >
+          <li v-else class="ide-search-list-empty d-flex align-items-center justify-content-center">
             {{ __('No merge requests found') }}
           </li>
         </ul>
diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue
index db36779c395..e45d2a62dae 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown.vue
@@ -43,17 +43,8 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="dropdown"
-    class="btn-group ide-nav-dropdown dropdown"
-  >
+  <div ref="dropdown" class="btn-group ide-nav-dropdown dropdown">
     <nav-dropdown-button />
-    <div
-      class="dropdown-menu dropdown-menu-left p-0"
-    >
-      <nav-form
-        v-if="isVisibleDropdown"
-      />
-    </div>
+    <div class="dropdown-menu dropdown-menu-left p-0"><nav-form v-if="isVisibleDropdown" /></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
index 6cee4e9a8f0..f1d44443125 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
@@ -24,27 +24,12 @@ export default {
 
 <template>
   <dropdown-button>
-    <span
-      class="row"
-    >
-      <span
-        class="col-7 text-truncate"
-      >
-        <icon
-          :size="16"
-          :aria-label="__('Current Branch')"
-          name="branch"
-        />
-        {{ branchLabel }}
+    <span class="row">
+      <span class="col-7 text-truncate">
+        <icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
       </span>
-      <span
-        class="col-5 pl-0 text-truncate"
-      >
-        <icon
-          :size="16"
-          :aria-label="__('Merge Request')"
-          name="merge-request"
-        />
+      <span class="col-5 pl-0 text-truncate">
+        <icon :size="16" :aria-label="__('Merge Request')" name="merge-request" />
         {{ mergeRequestLabel }}
       </span>
     </span>
diff --git a/app/assets/javascripts/ide/components/nav_form.vue b/app/assets/javascripts/ide/components/nav_form.vue
index 718b836e11c..23c068f329d 100644
--- a/app/assets/javascripts/ide/components/nav_form.vue
+++ b/app/assets/javascripts/ide/components/nav_form.vue
@@ -15,15 +15,9 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-nav-form p-0"
-  >
-    <tabs
-      stop-propagation
-    >
-      <tab
-        active
-      >
+  <div class="ide-nav-form p-0">
+    <tabs stop-propagation>
+      <tab active>
         <template slot="title">
           {{ __('Merge Requests') }}
         </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue
index aa5fce59dbf..062a64a19d7 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/button.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue
@@ -52,10 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon
-      :name="icon"
-      :css-classes="iconClasses"
-    />
+    <icon :name="icon" :css-classes="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index f02fd6cf7ea..a50d729036f 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -73,19 +73,11 @@ export default {
         :aria-label="__('Create new file or directory')"
         type="button"
         class="rounded border-0 d-flex ide-entry-dropdown-toggle"
-        @click.stop="openDropdown()"
+        @click.stop="openDropdown();"
       >
-        <icon
-          name="ellipsis_v"
-        />
-        <icon
-          name="arrow-down"
-        />
+        <icon name="ellipsis_v" /> <icon name="arrow-down" />
       </button>
-      <ul
-        ref="dropdownMenu"
-        class="dropdown-menu dropdown-menu-right"
-      >
+      <ul ref="dropdownMenu" class="dropdown-menu dropdown-menu-right">
         <template v-if="type === 'tree'">
           <li>
             <item-button
@@ -93,22 +85,17 @@ export default {
               class="d-flex"
               icon="doc-new"
               icon-classes="mr-2"
-              @click="createNewItem('blob')"
-            />
-          </li>
-          <li>
-            <upload
-              :path="path"
-              @create="createTempEntry"
+              @click="createNewItem('blob');"
             />
           </li>
+          <li><upload :path="path" @create="createTempEntry" /></li>
           <li>
             <item-button
               :label="__('New directory')"
               class="d-flex"
               icon="folder-new"
               icon-classes="mr-2"
-              @click="createNewItem($options.modalTypes.tree)"
+              @click="createNewItem($options.modalTypes.tree);"
             />
           </li>
           <li class="divider"></li>
@@ -119,7 +106,7 @@ export default {
             class="d-flex"
             icon="pencil"
             icon-classes="mr-2"
-            @click="createNewItem($options.modalTypes.rename)"
+            @click="createNewItem($options.modalTypes.rename);"
           />
         </li>
         <li>
@@ -128,7 +115,7 @@ export default {
             class="d-flex"
             icon="remove"
             icon-classes="mr-2"
-            @click="deleteEntry(path)"
+            @click="deleteEntry(path);"
           />
         </li>
       </ul>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index f0a04011a3e..63cbf41b89b 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -99,12 +99,8 @@ export default {
     @open="focusInput"
     @closed="closedModal"
   >
-    <div
-      class="form-group row"
-    >
-      <label class="label-bold col-form-label col-sm-2">
-        {{ __('Name') }}
-      </label>
+    <div class="form-group row">
+      <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
       <div class="col-sm-10">
         <input
           ref="fieldName"
@@ -113,19 +109,12 @@ export default {
           class="form-control qa-full-file-path"
           placeholder="/dir/file_name"
         />
-        <ul
-          v-if="isCreatingNew"
-          class="prepend-top-default list-inline qa-template-list"
-        >
-          <li
-            v-for="(template, index) in templateTypes"
-            :key="index"
-            class="list-inline-item"
-          >
+        <ul v-if="isCreatingNew" class="prepend-top-default list-inline qa-template-list">
+          <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
             <button
               type="button"
               class="btn btn-missing p-1 pr-2 pl-2"
-              @click="createFromTemplate(template)"
+              @click="createFromTemplate(template);"
             >
               {{ template.name }}
             </button>
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index 10aa96dffaf..e318367a5ec 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -89,9 +89,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-panel ide-right-sidebar"
-  >
+  <div class="multi-file-commit-panel ide-right-sidebar">
     <resizable-panel
       v-show="isOpen"
       :collapsible="false"
@@ -112,27 +110,21 @@ export default {
     </resizable-panel>
     <nav class="ide-activity-bar">
       <ul class="list-unstyled">
-        <li
-          v-for="tab of tabs"
-          :key="tab.title"
-        >
+        <li v-for="tab of tabs" :key="tab.title">
           <button
             v-tooltip
             :title="tab.title"
             :aria-label="tab.title"
             :class="{
-              active: isActiveTab(tab) && isOpen
+              active: isActiveTab(tab) && isOpen,
             }"
             data-container="body"
             data-placement="left"
             class="ide-sidebar-link is-right"
             type="button"
-            @click="clickTab($event, tab)"
+            @click="clickTab($event, tab);"
           >
-            <icon
-              :size="16"
-              :name="tab.icon"
-            />
+            <icon :size="16" :name="tab.icon" />
           </button>
         </li>
       </ul>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 36cfcac4186..451c8030e16 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -50,34 +50,14 @@ export default {
 
 <template>
   <div class="ide-pipeline">
-    <gl-loading-icon
-      v-if="showLoadingIcon"
-      :size="2"
-      class="prepend-top-default"
-    />
+    <gl-loading-icon v-if="showLoadingIcon" :size="2" class="prepend-top-default" />
     <template v-else-if="latestPipeline !== null">
-      <header
-        v-if="latestPipeline"
-        class="ide-tree-header ide-pipeline-header"
-      >
-        <ci-icon
-          :status="latestPipeline.details.status"
-          :size="24"
-        />
+      <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
+        <ci-icon :status="latestPipeline.details.status" :size="24" />
         <span class="prepend-left-8">
-          <strong>
-            {{ __('Pipeline') }}
-          </strong>
-          <a
-            :href="latestPipeline.path"
-            target="_blank"
-            class="ide-external-link"
-          >
-            #{{ latestPipeline.id }}
-            <icon
-              :size="12"
-              name="external-link"
-            />
+          <strong> {{ __('Pipeline') }} </strong>
+          <a :href="latestPipeline.path" target="_blank" class="ide-external-link">
+            #{{ latestPipeline.id }} <icon :size="12" name="external-link" />
           </a>
         </span>
       </header>
@@ -87,58 +67,25 @@ export default {
         :empty-state-svg-path="pipelinesEmptyStateSvgPath"
         :can-set-ci="true"
       />
-      <div
-        v-else-if="latestPipeline.yamlError"
-        class="bs-callout bs-callout-danger"
-      >
-        <p class="append-bottom-0">
-          {{ __('Found errors in your .gitlab-ci.yml:') }}
-        </p>
-        <p class="append-bottom-0 break-word">
-          {{ latestPipeline.yamlError }}
-        </p>
-        <p
-          class="append-bottom-0"
-          v-html="ciLintText"
-        ></p>
+      <div v-else-if="latestPipeline.yamlError" class="bs-callout bs-callout-danger">
+        <p class="append-bottom-0">{{ __('Found errors in your .gitlab-ci.yml:') }}</p>
+        <p class="append-bottom-0 break-word">{{ latestPipeline.yamlError }}</p>
+        <p class="append-bottom-0" v-html="ciLintText"></p>
       </div>
-      <tabs
-        v-else
-        class="ide-pipeline-list"
-      >
-        <tab
-          :active="!pipelineFailed"
-        >
+      <tabs v-else class="ide-pipeline-list">
+        <tab :active="!pipelineFailed">
           <template slot="title">
             {{ __('Jobs') }}
-            <span
-              v-if="jobsCount"
-              class="badge badge-pill"
-            >
-              {{ jobsCount }}
-            </span>
+            <span v-if="jobsCount" class="badge badge-pill"> {{ jobsCount }} </span>
           </template>
-          <jobs-list
-            :loading="isLoadingJobs"
-            :stages="stages"
-          />
+          <jobs-list :loading="isLoadingJobs" :stages="stages" />
         </tab>
-        <tab
-          :active="pipelineFailed"
-        >
+        <tab :active="pipelineFailed">
           <template slot="title">
             {{ __('Failed Jobs') }}
-            <span
-              v-if="failedJobsCount"
-              class="badge badge-pill"
-            >
-              {{ failedJobsCount }}
-            </span>
+            <span v-if="failedJobsCount" class="badge badge-pill"> {{ failedJobsCount }} </span>
           </template>
-          <jobs-list
-            :loading="isLoadingJobs"
-            :stages="failedStages"
-          />
+          <jobs-list :loading="isLoadingJobs" :stages="failedStages" />
         </tab>
       </tabs>
     </template>
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index afc0cfca7d8..c98dda00817 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -146,9 +146,7 @@ export default {
 <template>
   <div class="preview h-100 w-100 d-flex flex-column">
     <template v-if="showPreview">
-      <navigator
-        :manager="manager"
-      />
+      <navigator :manager="manager" />
       <div id="ide-preview"></div>
     </template>
     <div
@@ -156,15 +154,8 @@ export default {
       v-once
       class="d-flex h-100 flex-column align-items-center justify-content-center svg-content"
     >
-      <img
-        :src="promotionSvgPath"
-        :alt="s__('IDE|Live Preview')"
-        width="130"
-        height="100"
-      />
-      <h3>
-        {{ s__('IDE|Live Preview') }}
-      </h3>
+      <img :src="promotionSvgPath" :alt="s__('IDE|Live Preview')" width="130" height="100" />
+      <h3>{{ s__('IDE|Live Preview') }}</h3>
       <p class="text-center">
         {{ s__('IDE|Preview your web application using Web IDE client-side evaluation.') }}
       </p>
@@ -177,10 +168,6 @@ export default {
         {{ s__('IDE|Get started with Live Preview') }}
       </a>
     </div>
-    <gl-loading-icon
-      v-else
-      :size="2"
-      class="align-self-center mt-auto mb-auto"
-    />
+    <gl-loading-icon v-else :size="2" class="align-self-center mt-auto mb-auto" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index cc6fc595b74..bc80e1dba25 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -91,33 +91,25 @@ export default {
       :aria-label="s__('IDE|Back')"
       :disabled="backButtonDisabled"
       :class="{
-        'disabled-content': backButtonDisabled
+        'disabled-content': backButtonDisabled,
       }"
       type="button"
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="back"
     >
-      <icon
-        :size="24"
-        name="chevron-left"
-        class="m-auto"
-      />
+      <icon :size="24" name="chevron-left" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Back')"
       :disabled="forwardButtonDisabled"
       :class="{
-        'disabled-content': forwardButtonDisabled
+        'disabled-content': forwardButtonDisabled,
       }"
       type="button"
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="forward"
     >
-      <icon
-        :size="24"
-        name="chevron-right"
-        class="m-auto"
-      />
+      <icon :size="24" name="chevron-right" class="m-auto" />
     </button>
     <button
       :aria-label="s__('IDE|Refresh preview')"
@@ -125,11 +117,7 @@ export default {
       class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
       @click="refresh"
     >
-      <icon
-        :size="18"
-        name="retry"
-        class="m-auto"
-      />
+      <icon :size="18" name="retry" class="m-auto" />
     </button>
     <div class="position-relative w-100 prepend-left-4">
       <input
@@ -138,10 +126,7 @@ export default {
         class="ide-navigator-location form-control bg-white"
         readonly
       />
-      <gl-loading-icon
-        v-if="loading"
-        class="position-absolute ide-preview-loading-icon"
-      />
+      <gl-loading-icon v-if="loading" class="position-absolute ide-preview-loading-icon" />
     </div>
   </header>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 5e86876c1c1..8dd88f187d4 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -71,9 +71,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-panel-section"
-  >
+  <div class="multi-file-commit-panel-section">
     <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
@@ -82,13 +80,13 @@ export default {
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
-        {{ __(`This branch has changed since you started editing.
-          Would you like to create a new branch?`) }}
+        {{
+          __(`This branch has changed since you started editing.
+          Would you like to create a new branch?`)
+        }}
       </template>
     </deprecated-modal>
-    <template
-      v-if="showStageUnstageArea"
-    >
+    <template v-if="showStageUnstageArea">
       <commit-files-list
         :title="__('Unstaged')"
         :key-prefix="$options.stageKeys.unstaged"
@@ -116,8 +114,6 @@ export default {
         icon-name="staged"
       />
     </template>
-    <empty-state
-      v-if="unusedSeal"
-    />
+    <empty-state v-if="unusedSeal" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 7b0f717962e..c13d3ec094b 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -212,20 +212,15 @@ export default {
 </script>
 
 <template>
-  <div
-    id="ide"
-    class="blob-viewer-container blob-editor-container"
-  >
+  <div id="ide" class="blob-viewer-container blob-editor-container">
     <div class="ide-mode-tabs clearfix">
-      <ul
-        v-if="!shouldHideEditor && isEditModeActive"
-        class="nav-links float-left"
-      >
+      <ul v-if="!shouldHideEditor && isEditModeActive" class="nav-links float-left">
         <li :class="editTabCSS">
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: 'editor' })">
+            @click.prevent="setFileViewMode({ file, viewMode: 'editor' });"
+          >
             <template v-if="viewer === $options.viewerTypes.edit">
               {{ __('Edit') }}
             </template>
@@ -234,41 +229,36 @@ export default {
             </template>
           </a>
         </li>
-        <li
-          v-if="file.previewMode"
-          :class="previewTabCSS">
+        <li v-if="file.previewMode" :class="previewTabCSS">
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode:'preview' })">
+            @click.prevent="setFileViewMode({ file, viewMode: 'preview' });"
+          >
             {{ file.previewMode.previewTitle }}
           </a>
         </li>
       </ul>
-      <external-link
-        :file="file"
-      />
+      <external-link :file="file" />
     </div>
-    <file-templates-bar
-      v-if="showFileTemplatesBar(file.name)"
-    />
+    <file-templates-bar v-if="showFileTemplatesBar(file.name)" />
     <div
-      v-show="!shouldHideEditor && file.viewMode ==='editor'"
+      v-show="!shouldHideEditor && file.viewMode === 'editor'"
       ref="editor"
       :class="{
         'is-readonly': isCommitModeActive,
         'is-deleted': file.deleted,
-        'is-added': file.tempFile
+        'is-added': file.tempFile,
       }"
       class="multi-file-editor-holder"
-    >
-    </div>
+    ></div>
     <content-viewer
       v-if="showContentViewer"
       :content="file.content || file.raw"
       :path="file.rawPath || file.path"
       :file-size="file.size"
-      :project-path="file.projectId"/>
+      :project-path="file.projectId"
+    />
     <diff-viewer
       v-if="showDiffViewer"
       :diff-mode="file.mrChange.diffMode"
@@ -276,6 +266,7 @@ export default {
       :new-sha="currentMergeRequest.sha"
       :old-path="file.mrChange.old_path"
       :old-sha="currentMergeRequest.baseCommitSha"
-      :project-path="file.projectId"/>
+      :project-path="file.projectId"
+    />
   </div>
 </template>
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..a964d90b090 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -25,15 +25,7 @@ export default {
 </script>
 
 <template>
-  <span
-    v-if="file.file_lock"
-    v-tooltip
-    :title="lockTooltip"
-    data-container="body"
-  >
-    <icon
-      name="lock"
-      css-classes="file-status-icon"
-    />
+  <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
+    <icon name="lock" css-classes="file-status-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index d621653d6fd..4b87b83db8a 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -72,41 +72,26 @@ export default {
   <li
     :class="{
       active: tab.active,
-      disabled: tab.pending
+      disabled: tab.pending,
     }"
-    @click="clickFile(tab)"
+    @click="clickFile(tab);"
     @mouseover="mouseOverTab"
     @mouseout="mouseOutTab"
   >
-    <div
-      :title="tab.url"
-      class="multi-file-tab"
-    >
-      <file-icon
-        :file-name="tab.name"
-        :size="16"
-      />
+    <div :title="tab.url" class="multi-file-tab">
+      <file-icon :file-name="tab.name" :size="16" />
       {{ tab.name }}
-      <file-status-icon
-        :file="tab"
-      />
+      <file-status-icon :file="tab" />
     </div>
     <button
       :aria-label="closeLabel"
       :disabled="tab.pending"
       type="button"
       class="multi-file-tab-close"
-      @click.stop.prevent="closeFile(tab)"
+      @click.stop.prevent="closeFile(tab);"
     >
-      <icon
-        v-if="!showChangedIcon"
-        :size="12"
-        name="close"
-      />
-      <changed-file-icon
-        v-else
-        :file="tab"
-      />
+      <icon v-if="!showChangedIcon" :size="12" name="close" />
+      <changed-file-icon v-else :file="tab" />
     </button>
   </li>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index c12a63e26be..4dbc4383894 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -51,15 +51,8 @@ export default {
 
 <template>
   <div class="multi-file-tabs">
-    <ul
-      ref="tabsScroller"
-      class="list-unstyled append-bottom-0"
-    >
-      <repo-tab
-        v-for="tab in files"
-        :key="tab.key"
-        :tab="tab"
-      />
+    <ul ref="tabsScroller" class="list-unstyled append-bottom-0">
+      <repo-tab v-for="tab in files" :key="tab.key" :tab="tab" />
     </ul>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue
index 7277fcb7617..a89de56ab5c 100644
--- a/app/assets/javascripts/ide/components/resizable_panel.vue
+++ b/app/assets/javascripts/ide/components/resizable_panel.vue
@@ -78,8 +78,8 @@ export default {
       :min-size="minSize"
       :max-size="$options.maxSize"
       :side="side === 'right' ? 'left' : 'right'"
-      @resize-start="setResizingStatus(true)"
-      @resize-end="setResizingStatus(false)"
+      @resize-start="setResizingStatus(true);"
+      @resize-end="setResizingStatus(false);"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/shared/tokened_input.vue b/app/assets/javascripts/ide/components/shared/tokened_input.vue
index 30010957a16..f58e08c2cc9 100644
--- a/app/assets/javascripts/ide/components/shared/tokened_input.vue
+++ b/app/assets/javascripts/ide/components/shared/tokened_input.vue
@@ -72,31 +72,16 @@ export default {
   <div class="filtered-search-wrapper">
     <div class="filtered-search-box">
       <div class="tokens-container list-unstyled">
-        <div
-          v-for="token in tokens"
-          :key="token.label"
-          class="filtered-search-token"
-        >
+        <div v-for="token in tokens" :key="token.label" class="filtered-search-token">
           <button
             class="selectable btn-blank"
             type="button"
-            @click.stop="removeToken(token)"
-            @keyup.delete="removeToken(token)"
+            @click.stop="removeToken(token);"
+            @keyup.delete="removeToken(token);"
           >
-            <div
-              class="value-container rounded"
-            >
-              <div
-                class="value"
-              >{{ token.label }}</div>
-              <div
-                class="remove-token inverted"
-              >
-                <icon
-                  :size="10"
-                  name="close"
-                />
-              </div>
+            <div class="value-container rounded">
+              <div class="value">{{ token.label }}</div>
+              <div class="remove-token inverted"><icon :size="10" name="close" /></div>
             </div>
           </button>
         </div>
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
index f545453806f..ef7cd4ff8e8 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/getters.js
@@ -6,10 +6,12 @@ export const pipelineFailed = state =>
   state.latestPipeline && state.latestPipeline.details.status.text === states.failed;
 
 export const failedStages = state =>
-  state.stages.filter(stage => stage.status.text.toLowerCase() === states.failed).map(stage => ({
-    ...stage,
-    jobs: stage.jobs.filter(job => job.status.text.toLowerCase() === states.failed),
-  }));
+  state.stages
+    .filter(stage => stage.status.text.toLowerCase() === states.failed)
+    .map(stage => ({
+      ...stage,
+      jobs: stage.jobs.filter(job => job.status.text.toLowerCase() === states.failed),
+    }));
 
 export const failedJobsCount = state =>
   state.stages.reduce(
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 04c1cf021d9..e4e2eab2acd 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -294,11 +294,7 @@ export default {
         :issuable-type="issuableType"
       />
 
-      <recaptcha-modal
-        v-show="showRecaptcha"
-        :html="recaptchaHTML"
-        @close="closeRecaptchaModal"
-      />
+      <recaptcha-modal v-show="showRecaptcha" :html="recaptchaHTML" @close="closeRecaptchaModal" />
     </div>
     <div v-else>
       <title-component
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 461cb3271b7..5ca88d75063 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -106,7 +106,7 @@ export default {
   <div
     v-if="descriptionHtml"
     :class="{
-      'js-task-list-container': canUpdate
+      'js-task-list-container': canUpdate,
     }"
     class="description"
   >
@@ -114,11 +114,11 @@ export default {
       ref="gfm-content"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
-        'issue-realtime-trigger-pulse': pulseAnimation
+        'issue-realtime-trigger-pulse': pulseAnimation,
       }"
       class="wiki"
-      v-html="descriptionHtml">
-    </div>
+      v-html="descriptionHtml"
+    ></div>
     <textarea
       v-if="descriptionText"
       v-model="descriptionText"
@@ -127,10 +127,6 @@ export default {
     >
     </textarea>
 
-    <recaptcha-modal
-      v-show="showRecaptcha"
-      :html="recaptchaHTML"
-      @close="closeRecaptcha"
-    />
+    <recaptcha-modal v-show="showRecaptcha" :html="recaptchaHTML" @close="closeRecaptcha" />
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 5dda35d64bb..42a3de62772 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -68,33 +68,21 @@ export default {
       :disabled="formState.updateLoading || !isSubmitEnabled"
       class="btn btn-success float-left qa-save-button"
       type="submit"
-      @click.prevent="updateIssuable">
+      @click.prevent="updateIssuable"
+    >
       Save changes
-      <i
-        v-if="formState.updateLoading"
-        class="fa fa-spinner fa-spin"
-        aria-hidden="true">
-      </i>
-    </button>
-    <button
-      class="btn btn-default float-right"
-      type="button"
-      @click="closeForm">
-      Cancel
+      <i v-if="formState.updateLoading" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
     </button>
+    <button class="btn btn-default float-right" type="button" @click="closeForm">Cancel</button>
     <button
       v-if="shouldShowDeleteButton"
       :class="{ disabled: deleteLoading }"
       :disabled="deleteLoading"
       class="btn btn-danger float-right append-right-default qa-delete-button"
       type="button"
-      @click="deleteIssuable">
-      Delete
-      <i
-        v-if="deleteLoading"
-        class="fa fa-spinner fa-spin"
-        aria-hidden="true">
-      </i>
+      @click="deleteIssuable"
+    >
+      Delete <i v-if="deleteLoading" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 73ecb26c28d..14ad8d3b7c9 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -31,23 +31,12 @@ export default {
 </script>
 
 <template>
-  <small
-    class="edited-text"
-  >
+  <small class="edited-text">
     Edited
-    <time-ago-tooltip
-      v-if="updatedAt"
-      :time="updatedAt"
-      tooltip-placement="bottom"
-    />
-    <span
-      v-if="hasUpdatedBy"
-    >
+    <time-ago-tooltip v-if="updatedAt" :time="updatedAt" tooltip-placement="bottom" />
+    <span v-if="hasUpdatedBy">
       by
-      <a
-        :href="updatedByPath"
-        class="author-link"
-      >
+      <a :href="updatedByPath" class="author-link">
         <span>{{ updatedByName }}</span>
       </a>
     </span>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index e9e96a985a7..90258c0e044 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -44,11 +44,7 @@ export default {
 
 <template>
   <div class="common-note-form">
-    <label
-      class="sr-only"
-      for="issue-description">
-      Description
-    </label>
+    <label class="sr-only" for="issue-description"> Description </label>
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
@@ -67,7 +63,8 @@ export default {
         aria-label="Description"
         placeholder="Write a comment or drag your files here…"
         @keydown.meta.enter="updateIssuable"
-        @keydown.ctrl.enter="updateIssuable">
+        @keydown.ctrl.enter="updateIssuable"
+      >
       </textarea>
     </markdown-field>
   </div>
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 e433bf66cfc..14f0acf6540 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -44,9 +44,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="dropdown js-issuable-selector-wrap"
-    data-issuable-type="issue">
+  <div class="dropdown js-issuable-selector-wrap" data-issuable-type="issue">
     <button
       ref="toggle"
       :data-namespace-path="projectNamespace"
@@ -56,57 +54,33 @@ export default {
       type="button"
       data-field-name="issuable_template"
       data-selected="null"
-      data-toggle="dropdown">
-      <span class="dropdown-toggle-text">
-        Choose a template
-      </span>
-      <i
-        aria-hidden="true"
-        class="fa fa-chevron-down">
-      </i>
+      data-toggle="dropdown"
+    >
+      <span class="dropdown-toggle-text"> Choose a template </span>
+      <i aria-hidden="true" class="fa fa-chevron-down"> </i>
     </button>
     <div class="dropdown-menu dropdown-select">
       <div class="dropdown-title">
         Choose a template
-        <button
-          class="dropdown-title-button dropdown-menu-close"
-          aria-label="Close"
-          type="button">
-          <i
-            aria-hidden="true"
-            class="fa fa-times dropdown-menu-close-icon">
-          </i>
+        <button class="dropdown-title-button dropdown-menu-close" aria-label="Close" type="button">
+          <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon"> </i>
         </button>
       </div>
       <div class="dropdown-input">
-        <input
-          type="search"
-          class="dropdown-input-field"
-          placeholder="Filter"
-          autocomplete="off" />
-        <i
-          aria-hidden="true"
-          class="fa fa-search dropdown-input-search">
-        </i>
+        <input type="search" class="dropdown-input-field" placeholder="Filter" autocomplete="off" />
+        <i aria-hidden="true" class="fa fa-search dropdown-input-search"> </i>
         <i
           role="button"
           aria-label="Clear templates search input"
-          class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+        >
         </i>
       </div>
       <div class="dropdown-content"></div>
       <div class="dropdown-footer">
         <ul class="dropdown-footer-list">
-          <li>
-            <a class="no-template">
-              No template
-            </a>
-          </li>
-          <li>
-            <a class="reset-template">
-              Reset template
-            </a>
-          </li>
+          <li><a class="no-template"> No template </a></li>
+          <li><a class="reset-template"> Reset template </a></li>
         </ul>
       </div>
     </div>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index 11f4153b8d5..c3d7ba4907f 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -14,11 +14,7 @@ export default {
 
 <template>
   <fieldset>
-    <label
-      class="sr-only"
-      for="issuable-title">
-      Title
-    </label>
+    <label class="sr-only" for="issuable-title"> Title </label>
     <input
       id="issuable-title"
       v-model="formState.title"
@@ -27,6 +23,7 @@ export default {
       placeholder="Title"
       aria-label="Title"
       @keydown.meta.enter="updateIssuable"
-      @keydown.ctrl.enter="updateIssuable" />
+      @keydown.ctrl.enter="updateIssuable"
+    />
   </fieldset>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 3b430d92912..45b60bc3392 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -80,9 +80,7 @@ export default {
   <form>
     <locked-warning v-if="formState.lockedWarningVisible" />
     <div class="row">
-      <div
-        v-if="hasIssuableTemplates"
-        class="col-sm-4 col-lg-3">
+      <div v-if="hasIssuableTemplates" class="col-sm-4 col-lg-3">
         <description-template
           :form-state="formState"
           :issuable-templates="issuableTemplates"
@@ -96,10 +94,7 @@ export default {
           'col-12': !hasIssuableTemplates,
         }"
       >
-        <title-field
-          :form-state="formState"
-          :issuable-templates="issuableTemplates"
-        />
+        <title-field :form-state="formState" :issuable-templates="issuableTemplates" />
       </div>
     </div>
     <description-field
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index 0682c6f2a35..639221473b1 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -11,10 +11,7 @@ export default {
 <template>
   <div class="alert alert-danger">
     Someone edited the issue at the same time you did. Please check out
-    <a
-      :href="currentPath"
-      target="_blank"
-      rel="nofollow">the issue</a>
-    and make sure your changes will not unintentionally remove theirs.
+    <a :href="currentPath" target="_blank" rel="nofollow">the issue</a> and make sure your changes
+    will not unintentionally remove theirs.
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index ed26e53ac0e..3b5c95ccded 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -69,12 +69,11 @@ export default {
     <h2
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
-        'issue-realtime-trigger-pulse': pulseAnimation
+        'issue-realtime-trigger-pulse': pulseAnimation,
       }"
       class="title"
       v-html="titleHtml"
-    >
-    </h2>
+    ></h2>
     <button
       v-if="showInlineEditButton && canUpdate"
       v-tooltip
@@ -86,7 +85,6 @@ export default {
       data-container="body"
       @click="edit"
       v-html="pencilIcon"
-    >
-    </button>
+    ></button>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 932675c0fc6..309b7427b9e 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -28,33 +28,19 @@ export default {
 </script>
 <template>
   <div class="block">
-    <div class="title">
-      {{ s__('Job|Job artifacts') }}
-    </div>
+    <div class="title">{{ s__('Job|Job artifacts') }}</div>
 
-    <p
-      v-if="isExpired"
-      class="js-artifacts-removed build-detail-row"
-    >
+    <p v-if="isExpired" class="js-artifacts-removed build-detail-row">
       {{ s__('Job|The artifacts were removed') }}
     </p>
 
-    <p
-      v-else-if="willExpire"
-      class="js-artifacts-will-be-removed build-detail-row"
-    >
+    <p v-else-if="willExpire" class="js-artifacts-will-be-removed build-detail-row">
       {{ s__('Job|The artifacts will be removed in') }}
     </p>
 
-    <timeago-tooltip
-      v-if="artifact.expire_at"
-      :time="artifact.expire_at"
-    />
+    <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" />
 
-    <div
-      class="btn-group d-flex"
-      role="group"
-    >
+    <div class="btn-group d-flex" role="group">
       <gl-link
         v-if="artifact.keep_path"
         :href="artifact.keep_path"
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 9373dbebc8a..3b9c61bd48c 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -28,15 +28,15 @@ export default {
   <div
     :class="{
       'block-last': isLastBlock,
-      block: !isLastBlock
-  }">
+      block: !isLastBlock,
+    }"
+  >
     <p>
       {{ __('Commit') }}
 
-      <gl-link
-        :href="commit.commit_path"
-        class="js-commit-sha commit-sha link-commit"
-      >{{ commit.short_id }}</gl-link>
+      <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">{{
+        commit.short_id
+      }}</gl-link>
 
       <clipboard-button
         :text="commit.short_id"
@@ -44,15 +44,11 @@ export default {
         css-class="btn btn-clipboard btn-transparent"
       />
 
-      <gl-link
-        v-if="mergeRequest"
-        :href="mergeRequest.path"
-        class="js-link-commit link-commit"
-      >!{{ mergeRequest.iid }}</gl-link>
+      <gl-link v-if="mergeRequest" :href="mergeRequest.path" class="js-link-commit link-commit"
+        >!{{ mergeRequest.iid }}</gl-link
+      >
     </p>
 
-    <p class="build-light-text append-bottom-0">
-      {{ commit.title }}
-    </p>
+    <p class="build-light-text append-bottom-0">{{ commit.title }}</p>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index afc4d931a68..668fcf3d673 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -42,31 +42,16 @@ export default {
 <template>
   <div class="row empty-state">
     <div class="col-12">
-      <div
-        :class="illustrationSizeClass"
-        class="svg-content"
-      >
-        <img :src="illustrationPath" />
-      </div>
+      <div :class="illustrationSizeClass" class="svg-content"><img :src="illustrationPath" /></div>
     </div>
 
     <div class="col-12">
       <div class="text-content">
-        <h4 class="js-job-empty-state-title text-center">
-          {{ title }}
-        </h4>
+        <h4 class="js-job-empty-state-title text-center">{{ title }}</h4>
 
-        <p
-          v-if="content"
-          class="js-job-empty-state-content"
-        >
-          {{ content }}
-        </p>
+        <p v-if="content" class="js-job-empty-state-content">{{ content }}</p>
 
-        <div
-          v-if="action"
-          class="text-center"
-        >
+        <div v-if="action" class="text-center">
           <gl-link
             :href="action.path"
             :data-method="action.method"
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index 6d1eb713886..2d09cf5760f 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -130,11 +130,8 @@ export default {
 <template>
   <div class="prepend-top-default js-environment-container">
     <div class="environment-information">
-      <ci-icon :status="iconStatus"/>
-      <p
-        class="inline append-bottom-0"
-        v-html="environment"
-      ></p>
+      <ci-icon :status="iconStatus" />
+      <p class="inline append-bottom-0" v-html="environment"></p>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index 712f564b065..8437ad89301 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -30,18 +30,14 @@ export default {
   <div class="prepend-top-default js-build-erased">
     <div class="erased alert alert-warning">
       <template v-if="isErasedByUser">
-        {{ s__("Job|Job has been erased by") }}
-        <gl-link :href="user.web_url">
-          {{ user.username }}
-        </gl-link>
+        {{ s__('Job|Job has been erased by') }}
+        <gl-link :href="user.web_url"> {{ user.username }} </gl-link>
       </template>
       <template v-else>
-        {{ s__("Job|Job has been erased") }}
+        {{ s__('Job|Job has been erased') }}
       </template>
 
-      <timeago-tooltip
-        :time="erasedAt"
-      />
+      <timeago-tooltip :time="erasedAt" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index ecb809ca4de..786ab16992d 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -210,10 +210,7 @@ export default {
             />
           </div>
 
-          <callout
-            v-if="shouldRenderCalloutMessage"
-            :message="job.callout_message"
-          />
+          <callout v-if="shouldRenderCalloutMessage" :message="job.callout_message" />
         </header>
         <!-- EO Header Section -->
 
@@ -245,23 +242,17 @@ export default {
           ref="sticky"
           class="js-archived-job prepend-top-default archived-sticky sticky-top"
         >
-          <icon
-            name="lock"
-            class="align-text-bottom"
-          />
+          <icon name="lock" class="align-text-bottom" />
 
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
-        <!--job log -->
-        <div
-          v-if="hasTrace"
-          class="build-trace-container"
-        >
+        <!-- job log -->
+        <div v-if="hasTrace" class="build-trace-container">
           <log-top-bar
             :class="{
               'sidebar-expanded': isSidebarOpen,
               'sidebar-collapsed': !isSidebarOpen,
-              'has-archived-block': job.archived
+              'has-archived-block': job.archived,
             }"
             :erase-path="job.erase_path"
             :size="traceSize"
@@ -273,14 +264,11 @@ export default {
             @scrollJobLogTop="scrollTop"
             @scrollJobLogBottom="scrollBottom"
           />
-          <log
-            :trace="trace"
-            :is-complete="isTraceComplete"
-          />
+          <log :trace="trace" :is-complete="isTraceComplete" />
         </div>
         <!-- EO job log -->
 
-        <!--empty state -->
+        <!-- empty state -->
         <empty-state
           v-if="!hasTrace"
           class="js-job-empty-state"
@@ -290,9 +278,9 @@ export default {
           :content="emptyStateIllustration.content"
           :action="emptyStateAction"
         />
-      <!-- EO empty state -->
+        <!-- EO empty state -->
 
-      <!-- EO Body Section -->
+        <!-- EO Body Section -->
       </div>
     </template>
 
@@ -301,7 +289,7 @@ export default {
       class="js-job-sidebar"
       :class="{
         'right-sidebar-expanded': isSidebarOpen,
-        'right-sidebar-collapsed': !isSidebarOpen
+        'right-sidebar-collapsed': !isSidebarOpen,
       }"
       :runner-help-url="runnerHelpUrl"
     />
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 80cbed422a0..845699a90b5 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -46,7 +46,7 @@ export default {
     class="build-job"
     :class="{
       retried: job.retried,
-      active: isActive
+      active: isActive,
     }"
   >
     <gl-link
@@ -56,21 +56,13 @@ export default {
       data-boundary="viewport"
       class="js-job-link"
     >
-      <icon
-        v-if="isActive"
-        name="arrow-right"
-        class="js-arrow-right icon-arrow-right"
-      />
+      <icon v-if="isActive" name="arrow-right" class="js-arrow-right icon-arrow-right" />
 
       <ci-icon :status="job.status" />
 
       <span>{{ job.name ? job.name : job.id }}</span>
 
-      <icon
-        v-if="job.retried"
-        name="retry"
-        class="js-retry-icon"
-      />
+      <icon v-if="job.retried" name="retry" class="js-retry-icon" />
     </gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 5e0495bb231..52e14f954ee 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -75,12 +75,8 @@ export default {
       <template v-if="isTraceSizeVisible">
         {{ jobLogSize }}
 
-        <gl-link
-          v-if="rawPath"
-          :href="rawPath"
-          class="js-raw-link raw-link"
-        >
-          {{ s__("Job|Complete Raw") }}
+        <gl-link v-if="rawPath" :href="rawPath" class="js-raw-link raw-link">
+          {{ s__('Job|Complete Raw') }}
         </gl-link>
       </template>
     </div>
@@ -112,11 +108,7 @@ export default {
       <!-- eo links -->
 
       <!-- scroll buttons -->
-      <div
-        v-gl-tooltip
-        :title="s__('Job|Scroll to top')"
-        class="controllers-buttons"
-      >
+      <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
         <gl-button
           :disabled="isScrollTopDisabled"
           type="button"
@@ -127,11 +119,7 @@ export default {
         </gl-button>
       </div>
 
-      <div
-        v-gl-tooltip
-        :title="s__('Job|Scroll to bottom')"
-        class="controllers-buttons"
-      >
+      <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
         <gl-button
           :disabled="isScrollBottomDisabled"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 21f0a1435d7..0f590e077bf 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -107,17 +107,11 @@ export default {
 };
 </script>
 <template>
-  <aside
-    class="right-sidebar build-sidebar"
-    data-offset-top="101"
-    data-spy="affix"
-  >
+  <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
     <div class="sidebar-container">
       <div class="blocks-container">
         <div class="block">
-          <strong class="inline prepend-top-8">
-            {{ job.name }}
-          </strong>
+          <strong class="inline prepend-top-8"> {{ job.name }} </strong>
           <gl-link
             v-if="job.retry_path"
             :class="retryButtonClass"
@@ -134,8 +128,7 @@ export default {
       btn-inverted visible-md-block visible-lg-block"
             target="_blank"
           >
-            {{ __('Debug') }}
-            <icon name="external-link" />
+            {{ __('Debug') }} <icon name="external-link" />
           </gl-link>
           <gl-button
             :aria-label="__('Toggle Sidebar')"
@@ -144,17 +137,10 @@ export default {
         float-right d-block d-md-none js-sidebar-build-toggle"
             @click="toggleSidebar"
           >
-            <i
-              aria-hidden="true"
-              data-hidden="true"
-              class="fa fa-angle-double-right"
-            ></i>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
           </gl-button>
         </div>
-        <div
-          v-if="job.retry_path || job.new_issue_path"
-          class="block retry-link"
-        >
+        <div v-if="job.retry_path || job.new_issue_path" class="block retry-link">
           <gl-link
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
@@ -172,17 +158,10 @@ export default {
             {{ __('Retry') }}
           </gl-link>
         </div>
-        <div :class="{ block : renderBlock }">
-          <p
-            v-if="job.merge_request"
-            class="build-detail-row js-job-mr"
-          >
-            <span class="build-light-text">
-              {{ __('Merge Request:') }}
-            </span>
-            <gl-link :href="job.merge_request.path">
-              !{{ job.merge_request.iid }}
-            </gl-link>
+        <div :class="{ block: renderBlock }">
+          <p v-if="job.merge_request" class="build-detail-row js-job-mr">
+            <span class="build-light-text"> {{ __('Merge Request:') }} </span>
+            <gl-link :href="job.merge_request.path"> !{{ job.merge_request.iid }} </gl-link>
           </p>
 
           <detail-row
@@ -203,12 +182,7 @@ export default {
             class="js-job-erased"
             title="Erased"
           />
-          <detail-row
-            v-if="job.queued"
-            :value="queued"
-            class="js-job-queued"
-            title="Queued"
-          />
+          <detail-row v-if="job.queued" :value="queued" class="js-job-queued" title="Queued" />
           <detail-row
             v-if="hasTimeout"
             :help-url="runnerHelpUrl"
@@ -216,37 +190,21 @@ export default {
             class="js-job-timeout"
             title="Timeout"
           />
-          <detail-row
-            v-if="job.runner"
-            :value="runnerId"
-            class="js-job-runner"
-            title="Runner"
-          />
+          <detail-row v-if="job.runner" :value="runnerId" class="js-job-runner" title="Runner" />
           <detail-row
             v-if="job.coverage"
             :value="coverage"
             class="js-job-coverage"
             title="Coverage"
           />
-          <p
-            v-if="job.tags.length"
-            class="build-detail-row js-job-tags"
-          >
-            <span class="build-light-text">
-              {{ __('Tags:') }}
-            </span>
-            <span
-              v-for="(tag, i) in job.tags"
-              :key="i"
-              class="label label-primary">
+          <p v-if="job.tags.length" class="build-detail-row js-job-tags">
+            <span class="build-light-text"> {{ __('Tags:') }} </span>
+            <span v-for="(tag, i) in job.tags" :key="i" class="label label-primary">
               {{ tag }}
             </span>
           </p>
 
-          <div
-            v-if="job.cancel_path"
-            class="btn-group prepend-top-5"
-            role="group">
+          <div v-if="job.cancel_path" class="btn-group prepend-top-5" role="group">
             <gl-link
               :href="job.cancel_path"
               class="js-cancel-job btn btn-sm btn-default"
@@ -258,14 +216,8 @@ export default {
           </div>
         </div>
 
-        <artifacts-block
-          v-if="hasArtifact"
-          :artifact="job.artifact"
-        />
-        <trigger-block
-          v-if="hasTriggers"
-          :trigger="job.trigger"
-        />
+        <artifacts-block v-if="hasArtifact" :artifact="job.artifact" />
+        <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
         <commit-block
           :is-last-block="hasStages"
           :commit="commit"
@@ -281,11 +233,7 @@ export default {
         />
       </div>
 
-      <jobs-container
-        v-if="jobs.length"
-        :jobs="jobs"
-        :job-id="job.id"
-      />
+      <jobs-container v-if="jobs.length" :jobs="jobs" :job-id="job.id" />
     </div>
   </aside>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index d143e9f586c..77be295e802 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -34,27 +34,11 @@ export default {
 </script>
 <template>
   <p class="build-detail-row">
-    <span
-      v-if="hasTitle"
-      class="build-light-text"
-    >
-      {{ title }}:
-    </span>
-    {{ value }}
+    <span v-if="hasTitle" class="build-light-text"> {{ title }}: </span> {{ value }}
 
-    <span
-      v-if="hasHelpURL"
-      class="help-button float-right"
-    >
-      <gl-link
-        :href="helpUrl"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-      >
-        <i
-          class="fa fa-question-circle"
-          aria-hidden="true"
-        ></i>
+    <span v-if="hasHelpURL" class="help-button float-right">
+      <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
+        <i class="fa fa-question-circle" aria-hidden="true"></i>
       </gl-link>
     </span>
   </p>
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index dc26b246d71..90482500bbf 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -36,26 +36,13 @@ export default {
 </script>
 <template>
   <div class="block-last dropdown">
-    <ci-icon
-      :status="pipeline.details.status"
-      class="vertical-align-middle"
-    />
+    <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
     {{ __('Pipeline') }}
-    <a
-      :href="pipeline.path"
-      class="js-pipeline-path link-commit"
-    >
-      #{{ pipeline.id }}
-    </a>
+    <a :href="pipeline.path" class="js-pipeline-path link-commit"> #{{ pipeline.id }} </a>
     <template v-if="hasRef">
       {{ __('from') }}
-      <a
-        :href="pipeline.ref.path"
-        class="link-commit ref-name"
-      >
-        {{ pipeline.ref.name }}
-      </a>
+      <a :href="pipeline.ref.path" class="link-commit ref-name"> {{ pipeline.ref.name }} </a>
     </template>
 
     <button
@@ -63,20 +50,12 @@ export default {
       data-toggle="dropdown"
       class="js-selected-stage dropdown-menu-toggle prepend-top-8"
     >
-      {{ selectedStage }}
-      <i class="fa fa-chevron-down" ></i>
+      {{ selectedStage }} <i class="fa fa-chevron-down"></i>
     </button>
 
     <ul class="dropdown-menu">
-      <li
-        v-for="stage in stages"
-        :key="stage.name"
-      >
-        <button
-          type="button"
-          class="js-stage-item stage-item"
-          @click="onStageClick(stage)"
-        >
+      <li v-for="stage in stages" :key="stage.name">
+        <button type="button" class="js-stage-item stage-item" @click="onStageClick(stage);">
           {{ stage.name }}
         </button>
       </li>
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index 2b2ebe4c3f7..7b077d5e621 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -26,42 +26,29 @@ export default {
 </script>
 <template>
   <div class="bs-callout bs-callout-warning">
-    <p
-      v-if="tags.length"
-      class="js-stuck-with-tags append-bottom-0"
-    >
-      {{ s__(`This job is stuck, because you don't have
-  any active runners online with any of these tags assigned to them:`) }}
-      <span
-        v-for="(tag, index) in tags"
-        :key="index"
-        class="badge badge-primary"
-      >
-        {{ tag }}
-      </span>
+    <p v-if="tags.length" class="js-stuck-with-tags append-bottom-0">
+      {{
+        s__(`This job is stuck, because you don't have
+  any active runners online with any of these tags assigned to them:`)
+      }}
+      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary"> {{ tag }} </span>
     </p>
-    <p
-      v-else-if="hasNoRunnersForProject"
-      class="js-stuck-no-runners append-bottom-0"
-    >
-      {{ s__(`Job|This job is stuck, because the project
-  doesn't have any runners online assigned to it.`) }}
+    <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners append-bottom-0">
+      {{
+        s__(`Job|This job is stuck, because the project
+  doesn't have any runners online assigned to it.`)
+      }}
     </p>
-    <p
-      v-else
-      class="js-stuck-no-active-runner append-bottom-0"
-    >
-      {{ s__(`This job is stuck, because you don't
-  have any active runners that can run this job.`) }}
+    <p v-else class="js-stuck-no-active-runner append-bottom-0">
+      {{
+        s__(`This job is stuck, because you don't
+  have any active runners that can run this job.`)
+      }}
     </p>
 
-    {{ __("Go to") }}
-    <gl-link
-      v-if="runnersPath"
-      :href="runnersPath"
-      class="js-runners-path"
-    >
-      {{ __("Runners page") }}
+    {{ __('Go to') }}
+    <gl-link v-if="runnersPath" :href="runnersPath" class="js-runners-path">
+      {{ __('Runners page') }}
     </gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 4d18f76b7ea..4a9b2903eec 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -31,18 +31,10 @@ export default {
 
 <template>
   <div class="build-widget block">
-    <h4 class="title">
-      {{ __('Trigger') }}
-    </h4>
+    <h4 class="title">{{ __('Trigger') }}</h4>
 
-    <p
-      v-if="trigger.short_token"
-      class="js-short-token"
-    >
-      <span class="build-light-text">
-        {{ __('Token') }}
-      </span>
-      {{ trigger.short_token }}
+    <p v-if="trigger.short_token" class="js-short-token">
+      <span class="build-light-text"> {{ __('Token') }} </span> {{ trigger.short_token }}
     </p>
 
     <p v-if="hasVariables">
@@ -56,24 +48,13 @@ export default {
       </gl-button>
     </p>
 
-    <dl
-      v-if="areVariablesVisible"
-      class="js-build-variables trigger-build-variables"
-    >
-      <template
-        v-for="variable in trigger.variables"
-      >
-        <dt
-          :key="`${variable.key}-variable`"
-          class="js-build-variable trigger-build-variable"
-        >
+    <dl v-if="areVariablesVisible" class="js-build-variables trigger-build-variables">
+      <template v-for="variable in trigger.variables">
+        <dt :key="`${variable.key}-variable`" class="js-build-variable trigger-build-variable">
           {{ variable.key }}
         </dt>
 
-        <dd
-          :key="`${variable.key}-value`"
-          class="js-build-value trigger-build-value"
-        >
+        <dd :key="`${variable.key}-value`" class="js-build-value trigger-build-value">
           {{ variable.value }}
         </dd>
       </template>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 98182d92c2f..218c508a608 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -176,35 +176,19 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="!showEmptyState"
-    :key="forceRedraw"
-    class="prometheus-graphs prepend-top-default"
-  >
+  <div v-if="!showEmptyState" :key="forceRedraw" class="prometheus-graphs prepend-top-default">
     <div class="environments d-flex align-items-center">
       {{ s__('Metrics|Environment') }}
       <div class="dropdown prepend-left-10">
-        <button
-          class="dropdown-menu-toggle"
-          data-toggle="dropdown"
-          type="button"
-        >
-          <span>
-            {{ currentEnvironmentName }}
-          </span>
-          <icon
-            name="chevron-down"
-          />
+        <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
+          <span> {{ currentEnvironmentName }} </span> <icon name="chevron-down" />
         </button>
-        <div 
-          v-if="store.environmentsData.length > 0"  
+        <div
+          v-if="store.environmentsData.length > 0"
           class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
         >
           <ul>
-            <li
-              v-for="environment in store.environmentsData"
-              :key="environment.latest.id"
-            >
+            <li v-for="environment in store.environmentsData" :key="environment.latest.id">
               <a
                 :href="environment.latest.metrics_path"
                 :class="{ 'is-active': environment.latest.name == currentEnvironmentName }"
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 82b9a4b1adb..23e1e734b37 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -89,27 +89,14 @@ export default {
 
 <template>
   <div class="prometheus-state">
-    <div class="state-svg svg-content">
-      <img :src="currentState.svgUrl" />
-    </div>
-    <h4 class="state-title">
-      {{ currentState.title }}
-    </h4>
+    <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
+    <h4 class="state-title">{{ currentState.title }}</h4>
     <p class="state-description">
       {{ currentState.description }}
-      <a
-        v-if="showButtonDescription"
-        :href="settingsPath"
-      >
-        Prometheus server
-      </a>
+      <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
     </p>
     <div class="state-button">
-      <a
-        v-if="currentState.buttonPath"
-        :href="currentState.buttonPath"
-        class="btn btn-success"
-      >
+      <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
         {{ currentState.buttonText }}
       </a>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 5c6e2e09e46..815063237fc 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -247,33 +247,17 @@ export default {
 <template>
   <div
     class="prometheus-graph"
-    @mouseover="showFlagContent = true"
-    @mouseleave="showFlagContent = false"
+    @mouseover="showFlagContent = true;"
+    @mouseleave="showFlagContent = false;"
   >
     <div class="prometheus-graph-header">
-      <h5 class="prometheus-graph-title">
-        {{ graphData.title }}
-      </h5>
-      <div class="prometheus-graph-widgets">
-        <slot></slot>
-      </div>
+      <h5 class="prometheus-graph-title">{{ graphData.title }}</h5>
+      <div class="prometheus-graph-widgets"><slot></slot></div>
     </div>
-    <div
-      :style="paddingBottomRootSvg"
-      class="prometheus-svg-container"
-    >
-      <svg
-        ref="baseSvg"
-        :viewBox="outerViewBox"
-      >
-        <g
-          :transform="axisTransform"
-          class="x-axis"
-        />
-        <g
-          class="y-axis"
-          transform="translate(70, 20)"
-        />
+    <div :style="paddingBottomRootSvg" class="prometheus-svg-container">
+      <svg ref="baseSvg" :viewBox="outerViewBox">
+        <g :transform="axisTransform" class="x-axis" />
+        <g class="y-axis" transform="translate(70, 20)" />
         <graph-axis
           :graph-width="graphWidth"
           :graph-height="graphHeight"
@@ -282,15 +266,8 @@ export default {
           :y-axis-label="yAxisLabel"
           :unit-of-display="unitOfDisplay"
         />
-        <svg
-          ref="graphData"
-          :viewBox="innerViewBox"
-          class="graph-data"
-        >
-          <slot
-            name="additionalSvgContent"
-            :graphDrawData="graphDrawData"
-          />
+        <svg ref="graphData" :viewBox="innerViewBox" class="graph-data">
+          <slot name="additionalSvgContent" :graphDrawData="graphDrawData" />
           <graph-path
             v-for="(path, index) in timeSeries"
             :key="index"
@@ -309,11 +286,11 @@ export default {
           />
           <rect
             ref="graphOverlay"
-            :width="(graphWidth - 70)"
-            :height="(graphHeight - 100)"
+            :width="graphWidth - 70"
+            :height="graphHeight - 100"
             class="prometheus-graph-overlay"
             transform="translate(-5, 20)"
-            @mousemove="handleMouseOverGraph($event)"
+            @mousemove="handleMouseOverGraph($event);"
           />
         </svg>
       </svg>
@@ -331,10 +308,6 @@ export default {
         :current-coordinates="currentCoordinates"
       />
     </div>
-    <graph-legend
-      v-if="showLegend"
-      :legend-title="legendTitle"
-      :time-series="timeSeries"
-    />
+    <graph-legend v-if="showLegend" :legend-title="legendTitle" :time-series="timeSeries" />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index 616410ec34f..8f046857a20 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -110,19 +110,8 @@ export default {
     >
       {{ yAxisLabelSentenceCase }}
     </text>
-    <rect
-      :x="xPosition + 60"
-      :y="graphHeight - 80"
-      class="rect-axis-text"
-      width="35"
-      height="50"
-    />
-    <text
-      :x="xPosition + 60"
-      :y="yPosition"
-      class="label-axis-text x-label-text"
-      dy=".35em"
-    >
+    <rect :x="xPosition + 60" :y="graphHeight - 80" class="rect-axis-text" width="35" height="50" />
+    <text :x="xPosition + 60" :y="yPosition" class="label-axis-text x-label-text" dy=".35em">
       {{ timeString }}
     </text>
   </g>
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index a7289ed53e8..bee9784692c 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -31,41 +31,16 @@ export default {
     <g
       v-for="(deployment, index) in deploymentData"
       :key="index"
-      :transform="transformDeploymentGroup(deployment)">
-      <rect
-        :height="calculatedHeight"
-        x="0"
-        y="0"
-        width="3"
-        fill="url(#shadow-gradient)"
-      />
-      <line
-        :y2="calculatedHeight"
-        class="deployment-line"
-        x1="0"
-        y1="0"
-        x2="0"
-        stroke="#000"
-      />
-    </g>
-    <svg
-      height="0"
-      width="0"
+      :transform="transformDeploymentGroup(deployment)"
     >
+      <rect :height="calculatedHeight" x="0" y="0" width="3" fill="url(#shadow-gradient)" />
+      <line :y2="calculatedHeight" class="deployment-line" x1="0" y1="0" x2="0" stroke="#000" />
+    </g>
+    <svg height="0" width="0">
       <defs>
-        <linearGradient
-          id="shadow-gradient"
-        >
-          <stop
-            offset="0%"
-            stop-color="#000"
-            stop-opacity="0.4"
-          />
-          <stop
-            offset="100%"
-            stop-color="#000"
-            stop-opacity="0"
-          />
+        <linearGradient id="shadow-gradient">
+          <stop offset="0%" stop-color="#000" stop-opacity="0.4" />
+          <stop offset="100%" stop-color="#000" stop-opacity="0" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 1720476480e..9d6d1caef80 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -117,59 +117,29 @@ export default {
 </script>
 
 <template>
-  <div
-    :style="cursorStyle"
-    class="prometheus-graph-cursor"
-  >
-    <div
-      v-if="showFlagContent"
-      :class="flagOrientation"
-      class="prometheus-graph-flag popover"
-    >
+  <div :style="cursorStyle" class="prometheus-graph-cursor">
+    <div v-if="showFlagContent" :class="flagOrientation" class="prometheus-graph-flag popover">
       <div class="arrow-shadow"></div>
       <div class="arrow"></div>
       <div class="popover-title">
-        <h5 v-if="deploymentFlagData">
-          Deployed
-        </h5>
-        {{ formatDate }}
-        <strong>{{ formatTime }}</strong>
+        <h5 v-if="deploymentFlagData">Deployed</h5>
+        {{ formatDate }} <strong>{{ formatTime }}</strong>
       </div>
-      <div
-        v-if="deploymentFlagData"
-        class="popover-content deploy-meta-content"
-      >
+      <div v-if="deploymentFlagData" class="popover-content deploy-meta-content">
         <div>
-          <icon
-            :size="12"
-            name="commit"
-          />
-          <a :href="deploymentFlagData.commitUrl">
-            {{ deploymentFlagData.sha.slice(0, 8) }}
-          </a>
+          <icon :size="12" name="commit" />
+          <a :href="deploymentFlagData.commitUrl"> {{ deploymentFlagData.sha.slice(0, 8) }} </a>
         </div>
-        <div
-          v-if="deploymentFlagData.tag"
-        >
-          <icon
-            :size="12"
-            name="label"
-          />
-          <a :href="deploymentFlagData.tagUrl">
-            {{ deploymentFlagData.ref }}
-          </a>
+        <div v-if="deploymentFlagData.tag">
+          <icon :size="12" name="label" />
+          <a :href="deploymentFlagData.tagUrl"> {{ deploymentFlagData.ref }} </a>
         </div>
       </div>
       <div class="popover-content">
         <table class="prometheus-table">
-          <tr
-            v-for="(series, index) in timeSeries"
-            :key="index"
-          >
-            <track-line :track="series"/>
-            <td>
-              {{ series.track }} {{ seriesMetricLabel(index, series) }}
-            </td>
+          <tr v-for="(series, index) in timeSeries" :key="index">
+            <track-line :track="series" />
+            <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
             <td>
               <strong>{{ seriesMetricValue(index, series) }}</strong>
             </td>
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index ef18ae5c2c8..b5211c306a3 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -39,15 +39,9 @@ export default {
           <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
         </td>
         <track-line :track="series" />
-        <td
-          v-if="timeSeries.length > 1"
-          class="legend-metric-title">
-          <track-info
-            v-if="series.metricTag"
-            :track="series" />
-          <track-info
-            v-else
-            :track="series">
+        <td v-if="timeSeries.length > 1" class="legend-metric-title">
+          <track-info v-if="series.metricTag" :track="series" />
+          <track-info v-else :track="series">
             <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
           </track-info>
         </td>
@@ -57,13 +51,9 @@ export default {
           </track-info>
         </td>
         <template v-for="(track, trackIndex) in series.tracksLegend">
-          <track-line
-            :key="`track-line-${trackIndex}`"
-            :track="track"/>
+          <track-line :key="`track-line-${trackIndex}`" :track="track" />
           <td :key="`track-info-${trackIndex}`">
-            <track-info
-              :track="track"
-              class="legend-metric-title" />
+            <track-info :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 a9b7ce586ce..f2c237ec391 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -52,11 +52,7 @@ export default {
       class="circle-path"
       r="3"
     />
-    <path
-      :d="generatedAreaPath"
-      :fill="areaColor"
-      class="metric-area"
-    />
+    <path :d="generatedAreaPath" :fill="areaColor" class="metric-area" />
     <path
       :d="generatedLinePath"
       :stroke="lineColor"
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index e04fd9c1f35..d2ed1ba113e 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -18,9 +18,7 @@ export default {
 </script>
 <template>
   <td>
-    <svg
-      width="16"
-      height="8">
+    <svg width="16" height="8">
       <line
         :stroke-dasharray="stylizedLine"
         :stroke="track.lineColor"
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index 241627f9790..b20ad1802f3 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -15,21 +15,11 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="showPanels"
-    class="card prometheus-panel"
-  >
+  <div v-if="showPanels" class="card prometheus-panel">
     <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="card-body prometheus-graph-group">
-      <slot></slot>
-    </div>
-  </div>
-  <div
-    v-else
-    class="prometheus-graph-group"
-  >
-    <slot></slot>
+    <div class="card-body prometheus-graph-group"><slot></slot></div>
   </div>
+  <div v-else class="prometheus-graph-group"><slot></slot></div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index 18cef82cec0..bd6736152f5 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -42,12 +42,14 @@ export default {
       :raw-code="rawInputCode"
       :count="cell.execution_count"
       :code-css-class="codeCssClass"
-      type="input" />
+      type="input"
+    />
     <output-cell
       v-if="hasOutput"
       :count="cell.execution_count"
       :output="output"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+    />
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 0691ba64f8e..8bf2431c4c6 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -44,14 +44,7 @@ export default {
 
 <template>
   <div :class="type">
-    <prompt
-      :type="promptType"
-      :count="count" />
-    <pre
-      ref="code"
-      :class="codeCssClass"
-      class="language-python"
-      v-text="code">
-    </pre>
+    <prompt :type="promptType" :count="count" />
+    <pre ref="code" :class="codeCssClass" class="language-python" v-text="code"></pre>
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 5aa83db0986..61eabbcb8b2 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -100,10 +100,7 @@ export default {
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div
-      class="markdown"
-      v-html="markdown">
-    </div>
+    <div class="markdown" v-html="markdown"></div>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue
index a17868963ce..fe8c81398fb 100644
--- a/app/assets/javascripts/notebook/cells/output/image.vue
+++ b/app/assets/javascripts/notebook/cells/output/image.vue
@@ -19,8 +19,5 @@ export default {
 </script>
 
 <template>
-  <div class="output">
-    <prompt />
-    <img :src="'data:' + outputType + ';base64,' + rawCode" />
-  </div>
+  <div class="output"><prompt /> <img :src="'data:' + outputType + ';base64,' + rawCode" /></div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue
index d96f701ee3e..3f1f239a806 100644
--- a/app/assets/javascripts/notebook/cells/prompt.vue
+++ b/app/assets/javascripts/notebook/cells/prompt.vue
@@ -22,9 +22,7 @@ export default {
 
 <template>
   <div class="prompt">
-    <span v-if="hasKeys">
-      {{ type }} [{{ count }}]:
-    </span>
+    <span v-if="hasKeys"> {{ type }} [{{ count }}]: </span>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index c5cc8c97dda..6a54d0b3823 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -52,7 +52,8 @@ export default {
       v-for="(cell, index) in cells"
       :key="index"
       :cell="cell"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+    />
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 10e80883c00..884ccca7bde 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -308,13 +308,8 @@ Please check your network connection and try again.`;
 <template>
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
-    <discussion-locked-widget
-      v-else-if="!canCreateNote"
-      :issuable-type="issuableTypeTitle"
-    />
-    <div
-      v-else-if="canCreateNote"
-      class="notes notes-form timeline">
+    <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" />
+    <div v-else-if="canCreateNote" class="notes notes-form timeline">
       <div class="timeline-entry note-form">
         <div class="timeline-entry-inner">
           <div class="flash-container error-alert timeline-content"></div>
@@ -328,11 +323,7 @@ Please check your network connection and try again.`;
             />
           </div>
           <div class="timeline-content timeline-content-form">
-            <form
-              ref="commentForm"
-              class="new-note common-note-form gfm-form js-main-target-form"
-            >
-
+            <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
               <div class="error-alert"></div>
 
               <issue-warning
@@ -347,7 +338,8 @@ Please check your network connection and try again.`;
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :markdown-version="markdownVersion"
-                :add-spacing-classes="false">
+                :add-spacing-classes="false"
+              >
                 <textarea
                   id="note-body"
                   ref="textarea"
@@ -360,21 +352,24 @@ js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
                   data-supports-quick-actions="true"
                   aria-label="Description"
                   placeholder="Write a comment or drag your files here…"
-                  @keydown.up="editCurrentUserLastNote()"
-                  @keydown.meta.enter="handleSave()"
-                  @keydown.ctrl.enter="handleSave()">
+                  @keydown.up="editCurrentUserLastNote();"
+                  @keydown.meta.enter="handleSave();"
+                  @keydown.ctrl.enter="handleSave();"
+                >
                 </textarea>
               </markdown-field>
               <div class="note-form-actions">
                 <div
                   class="float-left btn-group
-append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
+append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
+                >
                   <button
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button
                     qa-comment-button"
                     type="submit"
-                    @click.prevent="handleSave()">
+                    @click.prevent="handleSave();"
+                  >
                     {{ __(commentButtonTitle) }}
                   </button>
                   <button
@@ -384,11 +379,9 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown"
                     data-display="static"
                     data-toggle="dropdown"
-                    aria-label="Open comment type dropdown">
-                    <i
-                      aria-hidden="true"
-                      class="fa fa-caret-down toggle-icon">
-                    </i>
+                    aria-label="Open comment type dropdown"
+                  >
+                    <i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i>
                   </button>
 
                   <ul class="note-type-dropdown dropdown-open-top dropdown-menu">
@@ -396,16 +389,12 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                       <button
                         type="button"
                         class="btn btn-transparent"
-                        @click.prevent="setNoteType('comment')">
-                        <i
-                          aria-hidden="true"
-                          class="fa fa-check icon">
-                        </i>
+                        @click.prevent="setNoteType('comment');"
+                      >
+                        <i aria-hidden="true" class="fa fa-check icon"> </i>
                         <div class="description">
                           <strong>Comment</strong>
-                          <p>
-                            Add a general comment to this {{ noteableDisplayName }}.
-                          </p>
+                          <p>Add a general comment to this {{ noteableDisplayName }}.</p>
                         </div>
                       </button>
                     </li>
@@ -414,16 +403,12 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                       <button
                         type="button"
                         class="btn btn-transparent qa-discussion-option"
-                        @click.prevent="setNoteType('discussion')">
-                        <i
-                          aria-hidden="true"
-                          class="fa fa-check icon">
-                        </i>
+                        @click.prevent="setNoteType('discussion');"
+                      >
+                        <i aria-hidden="true" class="fa fa-check icon"> </i>
                         <div class="description">
                           <strong>Start discussion</strong>
-                          <p>
-                            {{ startDiscussionDescription }}
-                          </p>
+                          <p>{{ startDiscussionDescription }}</p>
                         </div>
                       </button>
                     </li>
@@ -435,18 +420,19 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                   :loading="isToggleStateButtonLoading"
                   :container-class="[
                     actionButtonClassNames,
-                    'btn btn-comment btn-comment-and-close js-action-button'
+                    'btn btn-comment btn-comment-and-close js-action-button',
                   ]"
                   :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
-                  @click="handleSave(true)"
+                  @click="handleSave(true);"
                 />
 
                 <button
                   v-if="note.length"
                   type="button"
                   class="btn btn-cancel js-note-discard"
-                  @click="discard">
+                  @click="discard"
+                >
                   Discard draft
                 </button>
               </div>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 30fcb895369..8e8bd150647 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -90,11 +90,7 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="fileHolder"
-    :class="diffFileClass"
-    class="diff-file file-holder"
-  >
+  <div ref="fileHolder" :class="diffFileClass" class="diff-file file-holder">
     <diff-file-header
       :discussion-path="discussion.discussion_path"
       :diff-file="diffFile"
@@ -102,36 +98,17 @@ export default {
       :discussions-expanded="isDiscussionsExpanded"
       :expanded="!isCollapsed"
     />
-    <div
-      v-if="diffFile.text"
-      :class="userColorScheme"
-      class="diff-content code"
-    >
+    <div v-if="diffFile.text" :class="userColorScheme" class="diff-content code">
       <table>
-        <tr
-          v-for="line in normalizedDiffLines"
-          :key="line.line_code"
-          class="line_holder"
-        >
+        <tr v-for="line in normalizedDiffLines" :key="line.line_code" class="line_holder">
           <td class="diff-line-num old_line">{{ line.old_line }}</td>
           <td class="diff-line-num new_line">{{ line.new_line }}</td>
-          <td
-            :class="line.type"
-            class="line_content"
-            v-html="line.rich_text"
-          >
-          </td>
+          <td :class="line.type" class="line_content" v-html="line.rich_text"></td>
         </tr>
-        <tr
-          v-if="!hasTruncatedDiffLines"
-          class="line_holder line-holder-placeholder"
-        >
+        <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
           <td class="old_line diff-line-num"></td>
           <td class="new_line diff-line-num"></td>
-          <td
-            v-if="error"
-            class="js-error-lazy-load-diff diff-loading-error-block"
-          >
+          <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
             Unable to load the diff
             <button
               class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button"
@@ -140,28 +117,18 @@ export default {
               Try again
             </button>
           </td>
-          <td
-            v-else
-            class="line_content js-success-lazy-load"
-          >
+          <td v-else class="line_content js-success-lazy-load">
             <span></span>
             <gl-skeleton-loading />
             <span></span>
           </td>
         </tr>
         <tr class="notes_holder">
-          <td
-            class="notes_content"
-            colspan="3"
-          >
-            <slot></slot>
-          </td>
+          <td class="notes_content" colspan="3"><slot></slot></td>
         </tr>
       </table>
     </div>
-    <div
-      v-else
-    >
+    <div v-else>
       <diff-viewer
         :diff-mode="diffMode"
         :new-path="diffFile.new_path"
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index a4d76a70696..ee79ecbf9b3 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -50,13 +50,9 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="discussionCount > 0"
-    class="line-resolve-all-container prepend-top-8">
+  <div v-if="discussionCount > 0" class="line-resolve-all-container prepend-top-8">
     <div>
-      <div
-        :class="{ 'has-next-btn': hasNextButton }"
-        class="line-resolve-all">
+      <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
         <span
           :class="{ 'is-active': allResolved }"
           class="line-resolve-btn is-disabled"
@@ -68,29 +64,25 @@ export default {
           {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
         </span>
       </div>
-      <div
-        v-if="resolveAllDiscussionsIssuePath && !allResolved"
-        class="btn-group"
-        role="group">
+      <div v-if="resolveAllDiscussionsIssuePath && !allResolved" class="btn-group" role="group">
         <a
           v-tooltip
           :href="resolveAllDiscussionsIssuePath"
           :title="s__('Resolve all discussions in new issue')"
           data-container="body"
-          class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
+          class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
+        >
           <icon name="issue-new" />
         </a>
       </div>
-      <div
-        v-if="isLoggedIn && !allResolved"
-        class="btn-group"
-        role="group">
+      <div v-if="isLoggedIn && !allResolved" class="btn-group" role="group">
         <button
           v-tooltip
           title="Jump to first unresolved discussion"
           data-container="body"
           class="btn btn-default discussion-next-btn"
-          @click="jumpToFirstUnresolvedDiscussion">
+          @click="jumpToFirstUnresolvedDiscussion"
+        >
           <icon name="comment-next" />
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index affa2d1b574..86c114a761a 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -64,30 +64,24 @@ export default {
       data-toggle="dropdown"
       aria-expanded="false"
     >
-      {{ currentFilter.title }}
-      <icon name="chevron-down" />
+      {{ currentFilter.title }} <icon name="chevron-down" />
     </button>
     <div
       class="dropdown-menu dropdown-menu-selectable dropdown-menu-right"
-      aria-labelledby="discussion-filter-dropdown">
+      aria-labelledby="discussion-filter-dropdown"
+    >
       <div class="dropdown-content">
         <ul>
-          <li
-            v-for="filter in filters"
-            :key="filter.value"
-          >
+          <li v-for="filter in filters" :key="filter.value">
             <button
               :class="{ 'is-active': filter.value === currentValue }"
               class="qa-filter-options"
               type="button"
-              @click="selectFilter(filter.value)"
+              @click="selectFilter(filter.value);"
             >
               {{ filter.title }}
             </button>
-            <div
-              v-if="filter.value === defaultValue"
-              class="dropdown-divider"
-            ></div>
+            <div v-if="filter.value === defaultValue" class="dropdown-divider"></div>
           </li>
         </ul>
       </div>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index de0a5f8489b..c469a6b7bcd 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -13,11 +13,7 @@ export default {
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning inline">
-      <icon
-        :size="16"
-        name="lock"
-        class="icon"
-      />
+      <icon :size="16" name="lock" class="icon" />
       <span>
         This {{ issuableDisplayName }} is locked. Only <b>project members</b> can comment.
       </span>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 0f0d7f4661a..9a5817890c9 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -119,14 +119,8 @@ export default {
 
 <template>
   <div class="note-actions">
-    <span
-      v-if="accessLevel"
-      class="note-role user-access-role">
-      {{ accessLevel }}
-    </span>
-    <div
-      v-if="canResolve"
-      class="note-actions-item">
+    <span v-if="accessLevel" class="note-role user-access-role"> {{ accessLevel }} </span>
+    <div v-if="canResolve" class="note-actions-item">
       <button
         v-tooltip
         :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
@@ -134,19 +128,15 @@ export default {
         :aria-label="resolveButtonTitle"
         type="button"
         class="line-resolve-btn note-action-button"
-        @click="onResolve">
+        @click="onResolve"
+      >
         <template v-if="!isResolving">
           <icon name="check-circle" />
         </template>
-        <gl-loading-icon
-          v-else
-          inline
-        />
+        <gl-loading-icon v-else inline />
       </button>
     </div>
-    <div
-      v-if="canAwardEmoji"
-      class="note-actions-item">
+    <div v-if="canAwardEmoji" class="note-actions-item">
       <a
         v-tooltip
         :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
@@ -157,24 +147,16 @@ export default {
         href="#"
         title="Add reaction"
       >
-        <gl-loading-icon inline/>
+        <gl-loading-icon inline />
         <icon
           css-classes="link-highlight award-control-icon-neutral"
           name="emoji_slightly_smiling_face"
         />
-        <icon
-          css-classes="link-highlight award-control-icon-positive"
-          name="emoji_smiley"
-        />
-        <icon
-          css-classes="link-highlight award-control-icon-super-positive"
-          name="emoji_smiley"
-        />
+        <icon css-classes="link-highlight award-control-icon-positive" name="emoji_smiley" />
+        <icon css-classes="link-highlight award-control-icon-super-positive" name="emoji_smiley" />
       </a>
     </div>
-    <div
-      v-if="canEdit"
-      class="note-actions-item">
+    <div v-if="canEdit" class="note-actions-item">
       <button
         v-tooltip
         type="button"
@@ -182,17 +164,12 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent"
         data-container="body"
         data-placement="bottom"
-        @click="onEdit">
-        <icon
-          name="pencil"
-          css-classes="link-highlight"
-        />
+        @click="onEdit"
+      >
+        <icon name="pencil" css-classes="link-highlight" />
       </button>
     </div>
-    <div
-      v-if="showDeleteAction"
-      class="note-actions-item"
-    >
+    <div v-if="showDeleteAction" class="note-actions-item">
       <button
         v-tooltip
         type="button"
@@ -202,15 +179,10 @@ export default {
         data-placement="bottom"
         @click="onDelete"
       >
-        <icon
-          name="remove"
-          class="link-highlight"
-        />
+        <icon name="remove" class="link-highlight" />
       </button>
     </div>
-    <div
-      v-else-if="shouldShowActionsDropdown"
-      class="dropdown more-actions note-actions-item">
+    <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item">
       <button
         v-tooltip
         type="button"
@@ -218,17 +190,13 @@ export default {
         class="note-action-button more-actions-toggle btn btn-transparent"
         data-toggle="dropdown"
         data-container="body"
-        data-placement="bottom">
-        <icon
-          css-classes="icon"
-          name="ellipsis_v"
-        />
+        data-placement="bottom"
+      >
+        <icon css-classes="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">
-          <a :href="reportAbusePath">
-            {{ __('Report abuse to GitLab') }}
-          </a>
+          <a :href="reportAbusePath"> {{ __('Report abuse to GitLab') }} </a>
         </li>
         <li v-if="noteUrl">
           <button
@@ -243,10 +211,9 @@ export default {
           <button
             class="btn btn-transparent js-note-delete js-note-delete"
             type="button"
-            @click.prevent="onDelete">
-            <span class="text-danger">
-              {{ __('Delete comment') }}
-            </span>
+            @click.prevent="onDelete"
+          >
+            <span class="text-danger"> {{ __('Delete comment') }} </span>
           </button>
         </li>
       </ul>
diff --git a/app/assets/javascripts/notes/components/note_attachment.vue b/app/assets/javascripts/notes/components/note_attachment.vue
index 34ecbd00c63..b6d8c831e2e 100644
--- a/app/assets/javascripts/notes/components/note_attachment.vue
+++ b/app/assets/javascripts/notes/components/note_attachment.vue
@@ -12,27 +12,12 @@ export default {
 
 <template>
   <div class="note-attachment">
-    <a
-      v-if="attachment.image"
-      :href="attachment.url"
-      target="_blank"
-      rel="noopener noreferrer">
-      <img
-        :src="attachment.url"
-        class="note-image-attach"
-      />
+    <a v-if="attachment.image" :href="attachment.url" target="_blank" rel="noopener noreferrer">
+      <img :src="attachment.url" class="note-image-attach" />
     </a>
     <div class="attachment">
-      <a
-        v-if="attachment.url"
-        :href="attachment.url"
-        target="_blank"
-        rel="noopener noreferrer">
-        <i
-          class="fa fa-paperclip"
-          aria-hidden="true">
-        </i>
-        {{ attachment.filename }}
+      <a v-if="attachment.url" :href="attachment.url" target="_blank" rel="noopener noreferrer">
+        <i class="fa fa-paperclip" aria-hidden="true"> </i> {{ attachment.filename }}
       </a>
     </div>
   </div>
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 401bcfabbe4..4aba2e65edb 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -174,15 +174,12 @@ export default {
         data-boundary="viewport"
         data-placement="bottom"
         type="button"
-        @click="handleAward(awardName)">
+        @click="handleAward(awardName);"
+      >
         <span v-html="getAwardHTML(awardName)"></span>
-        <span class="award-control-text js-counter">
-          {{ awardList.length }}
-        </span>
+        <span class="award-control-text js-counter"> {{ awardList.length }} </span>
       </button>
-      <div
-        v-if="canAwardEmoji"
-        class="award-menu-holder">
+      <div v-if="canAwardEmoji" class="award-menu-holder">
         <button
           v-tooltip
           :class="{ 'js-user-authored': isAuthoredByMe }"
@@ -191,7 +188,8 @@ export default {
           aria-label="Add reaction"
           data-boundary="viewport"
           data-placement="bottom"
-          type="button">
+          type="button"
+        >
           <span class="award-control-icon award-control-icon-neutral">
             <icon name="emoji_slightly_smiling_face" />
           </span>
@@ -203,7 +201,8 @@ export default {
           </span>
           <i
             aria-hidden="true"
-            class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"></i>
+            class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading"
+          ></i>
         </button>
       </div>
     </div>
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 9375627359c..c0bee600181 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -67,13 +67,8 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="note-body"
-    :class="{ 'js-task-list-container': canEdit }"
-    class="note-body">
-    <div
-      class="note-text md"
-      v-html="note.note_html"></div>
+  <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
+    <div class="note-text md" v-html="note.note_html"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
@@ -88,7 +83,8 @@ export default {
       v-if="canEdit"
       v-model="note.note"
       :data-update-url="note.path"
-      class="hidden js-task-list-field"></textarea>
+      class="hidden js-task-list-field"
+    ></textarea>
     <note-edited-text
       v-if="note.last_edited_at"
       :edited-at="note.last_edited_at"
@@ -104,9 +100,6 @@ export default {
       :toggle-award-path="note.toggle_award_path"
       :can-award-emoji="note.current_user.can_award_emoji"
     />
-    <note-attachment
-      v-if="note.attachment"
-      :attachment="note.attachment"
-    />
+    <note-attachment v-if="note.attachment" :attachment="note.attachment" />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index d848335022f..3d3dbbd7fe1 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -39,17 +39,9 @@ export default {
   <div :class="className">
     {{ actionText }}
     <template v-if="editedBy">
-      by
-      <a
-        :href="editedBy.path"
-        class="js-vue-author author-link">
-        {{ editedBy.name }}
-      </a>
+      by <a :href="editedBy.path" class="js-vue-author author-link"> {{ editedBy.name }} </a>
     </template>
     {{ actionDetailText }}
-    <time-ago-tooltip
-      :time="editedAt"
-      tooltip-placement="bottom"
-    />
+    <time-ago-tooltip :time="editedAt" tooltip-placement="bottom" />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 31ee8fed984..ad58267b533 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -146,27 +146,14 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="editNoteForm"
-    class="note-edit-form current-note-edit-form js-discussion-note-form">
-    <div
-      v-if="conflictWhileEditing"
-      class="js-conflict-edit-warning alert alert-danger">
+  <div ref="editNoteForm" class="note-edit-form current-note-edit-form js-discussion-note-form">
+    <div v-if="conflictWhileEditing" class="js-conflict-edit-warning alert alert-danger">
       This comment has changed since you started editing, please review the
-      <a
-        :href="noteHash"
-        target="_blank"
-        rel="noopener noreferrer">
-        updated comment
-      </a>
-      to ensure information is not lost.
+      <a :href="noteHash" target="_blank" rel="noopener noreferrer"> updated comment </a> to ensure
+      information is not lost.
     </div>
     <div class="flash-container timeline-content"></div>
-    <form
-      :data-line-code="lineCode"
-      class="edit-note common-note-form js-quick-submit gfm-form"
-    >
-
+    <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
       <issue-warning
         v-if="hasWarning(getNoteableData)"
         :is-locked="isLocked(getNoteableData)"
@@ -178,7 +165,8 @@ export default {
         :markdown-docs-path="markdownDocsPath"
         :markdown-version="markdownVersion"
         :quick-actions-docs-path="quickActionsDocsPath"
-        :add-spacing-classes="false">
+        :add-spacing-classes="false"
+      >
         <textarea
           id="note_note"
           ref="textarea"
@@ -190,10 +178,11 @@ export default {
 js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
           aria-label="Description"
           placeholder="Write a comment or drag your files here…"
-          @keydown.meta.enter="handleUpdate()"
-          @keydown.ctrl.enter="handleUpdate()"
-          @keydown.up="editMyLastNote()"
-          @keydown.esc="cancelHandler(true)">
+          @keydown.meta.enter="handleUpdate();"
+          @keydown.ctrl.enter="handleUpdate();"
+          @keydown.up="editMyLastNote();"
+          @keydown.esc="cancelHandler(true);"
+        >
         </textarea>
       </markdown-field>
       <div class="note-form-actions clearfix">
@@ -201,20 +190,22 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
           :disabled="isDisabled"
           type="button"
           class="js-vue-issue-save btn btn-success js-comment-button "
-          @click="handleUpdate()">
+          @click="handleUpdate();"
+        >
           {{ saveButtonTitle }}
         </button>
         <button
           v-if="discussion.resolvable"
           class="btn btn-nr btn-default append-right-10 js-comment-resolve-button"
-          @click.prevent="handleUpdate(true)"
+          @click.prevent="handleUpdate(true);"
         >
           {{ resolveButtonTitle }}
         </button>
         <button
           class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
           type="button"
-          @click="cancelHandler()">
+          @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 dd7313d7b10..8b7450783c9 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -63,44 +63,26 @@ export default {
 
 <template>
   <div class="note-header-info">
-    <div
-      v-if="includeToggle"
-      class="discussion-actions">
+    <div v-if="includeToggle" class="discussion-actions">
       <button
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
         type="button"
-        @click="handleToggle">
-        <i
-          :class="toggleChevronClass"
-          class="fa"
-          aria-hidden="true">
-        </i>
+        @click="handleToggle"
+      >
+        <i :class="toggleChevronClass" class="fa" aria-hidden="true"> </i>
         {{ __('Toggle discussion') }}
       </button>
     </div>
-    <a
-      v-if="hasAuthor"
-      :href="author.path"
-    >
+    <a v-if="hasAuthor" :href="author.path">
       <span class="note-header-author-name">{{ author.name }}</span>
-      <span
-        v-if="author.status_tooltip_html"
-        v-html="author.status_tooltip_html"></span>
-      <span class="note-headline-light">
-        @{{ author.username }}
-      </span>
+      <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
+      <span class="note-headline-light"> @{{ author.username }} </span>
     </a>
-    <span v-else>
-      {{ __('A deleted user') }}
-    </span>
+    <span v-else> {{ __('A deleted user') }} </span>
     <span class="note-headline-light">
       <span class="note-headline-meta">
-        <span class="system-note-message">
-          <slot></slot>
-        </span>
-        <template
-          v-if="createdAt"
-        >
+        <span class="system-note-message"> <slot></slot> </span>
+        <template v-if="createdAt">
           <span class="system-note-separator">
             <template v-if="actionText">
               {{ actionText }}
@@ -109,11 +91,9 @@ export default {
           <a
             :href="noteTimestampLink"
             class="note-timestamp system-note-separator"
-            @click="updateTargetNoteHash">
-            <time-ago-tooltip
-              :time="createdAt"
-              tooltip-placement="bottom"
-            />
+            @click="updateTargetNoteHash"
+          >
+            <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" />
           </a>
         </template>
         <i
diff --git a/app/assets/javascripts/notes/components/note_signed_out_widget.vue b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
index 91f7c269757..e3eb92956b1 100644
--- a/app/assets/javascripts/notes/components/note_signed_out_widget.vue
+++ b/app/assets/javascripts/notes/components/note_signed_out_widget.vue
@@ -16,10 +16,6 @@ export default {
 
 <template>
   <div class="disabled-comment text-center">
-    Please
-    <a :href="registerLink">register</a>
-    or
-    <a :href="signInLink">sign in</a>
-    to reply
+    Please <a :href="registerLink">register</a> or <a :href="signInLink">sign in</a> to reply
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 7740967ccd5..f6842fa240e 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -302,20 +302,14 @@ Please check your network connection and try again.`;
 </script>
 
 <template>
-  <li
-    class="note note-discussion timeline-entry"
-    :class="componentClassName"
-  >
+  <li class="note note-discussion timeline-entry" :class="componentClassName">
     <div class="timeline-entry-inner">
       <div class="timeline-content">
         <div
           :data-discussion-id="transformedDiscussion.discussion_id"
           class="discussion js-discussion-container"
         >
-          <div
-            v-if="shouldRenderHeader"
-            class="discussion-header note-wrapper"
-          >
+          <div v-if="shouldRenderHeader" class="discussion-header note-wrapper">
             <div class="timeline-icon">
               <user-avatar-link
                 v-if="author"
@@ -346,9 +340,7 @@ Please check your network connection and try again.`;
               </template>
               <template v-else-if="discussion.for_commit">
                 started a discussion on commit
-                <a :href="discussion.discussion_path">
-                  {{ truncateSha(discussion.commit_id) }}
-                </a>
+                <a :href="discussion.discussion_path"> {{ truncateSha(discussion.commit_id) }} </a>
               </template>
               <template v-else>
                 started a discussion
@@ -369,14 +361,8 @@ Please check your network connection and try again.`;
               class-name="discussion-headline-light js-discussion-headline"
             />
           </div>
-          <div
-            v-if="shouldShowDiscussions"
-            class="discussion-body">
-            <component
-              :is="wrapperComponent"
-              v-bind="wrapperComponentProps"
-              :class="wrapperClass"
-            >
+          <div v-if="shouldShowDiscussions" class="discussion-body">
+            <component :is="wrapperComponent" v-bind="wrapperComponentProps" :class="wrapperClass">
               <div class="discussion-notes">
                 <ul class="notes">
                   <template v-if="shouldGroupReplies">
@@ -385,11 +371,7 @@ Please check your network connection and try again.`;
                       :note="componentData(initialDiscussion)"
                       @handleDeleteNote="deleteNoteHandler"
                     >
-                      <slot
-                        slot="avatar-badge"
-                        name="avatar-badge"
-                      >
-                      </slot>
+                      <slot slot="avatar-badge" name="avatar-badge"> </slot>
                     </component>
                     <toggle-replies-widget
                       v-if="hasReplies"
@@ -415,12 +397,7 @@ Please check your network connection and try again.`;
                       :note="componentData(note)"
                       @handleDeleteNote="deleteNoteHandler"
                     >
-                      <slot
-                        v-if="index === 0"
-                        slot="avatar-badge"
-                        name="avatar-badge"
-                      >
-                      </slot>
+                      <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"> </slot>
                     </component>
                   </template>
                 </ul>
@@ -443,7 +420,7 @@ Please check your network connection and try again.`;
                         <button
                           type="button"
                           class="btn btn-default mr-sm-2"
-                          @click="resolveHandler()"
+                          @click="resolveHandler();"
                         >
                           <i
                             v-if="isResolving"
@@ -458,10 +435,7 @@ Please check your network connection and try again.`;
                         class="btn-group discussion-actions ml-sm-2"
                         role="group"
                       >
-                        <div
-                          v-if="!discussionResolved"
-                          class="btn-group"
-                          role="group">
+                        <div v-if="!discussionResolved" class="btn-group" role="group">
                           <a
                             v-tooltip
                             :href="discussion.resolve_with_issue_path"
@@ -473,10 +447,7 @@ Please check your network connection and try again.`;
                             <icon name="issue-new" />
                           </a>
                         </div>
-                        <div
-                          v-if="showJumpToNextDiscussion"
-                          class="btn-group"
-                          role="group">
+                        <div v-if="showJumpToNextDiscussion" class="btn-group" role="group">
                           <button
                             v-tooltip
                             class="btn btn-default discussion-next-btn"
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 9ab91e2abe5..c2e49f8b23f 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -184,11 +184,7 @@ export default {
           :img-alt="author.name"
           :img-size="40"
         >
-          <slot
-            slot="avatar-badge"
-            name="avatar-badge"
-          >
-          </slot>
+          <slot slot="avatar-badge" name="avatar-badge"> </slot>
         </user-avatar-link>
       </div>
       <div class="timeline-content">
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 69ddfd751e0..79ece036e69 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -198,14 +198,8 @@ export default {
 </script>
 
 <template>
-  <div
-    v-show="shouldShow"
-    id="notes"
-  >
-    <ul
-      id="notes-list"
-      class="notes main-notes-list timeline"
-    >
+  <div v-show="shouldShow" id="notes">
+    <ul id="notes-list" class="notes main-notes-list timeline">
       <component
         :is="getComponentName(discussion)"
         v-for="discussion in allDiscussions"
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 78ecbbb9247..e9d05c5cdcd 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -42,15 +42,9 @@ export default {
 </script>
 
 <template>
-  <li
-    :class="className"
-    class="replies-toggle"
-  >
+  <li :class="className" class="replies-toggle">
     <template v-if="collapsed">
-      <icon
-        name="chevron-right"
-        @click.native="toggle"
-      />
+      <icon name="chevron-right" @click.native="toggle" />
       <div>
         <user-avatar-link
           v-for="author in uniqueAuthors"
@@ -63,32 +57,17 @@ export default {
           tooltip-placement="bottom"
         />
       </div>
-      <button
-        class="btn btn-link js-replies-text"
-        type="button"
-        @click="toggle"
-      >
+      <button class="btn btn-link js-replies-text" type="button" @click="toggle">
         {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
       </button>
       {{ __('Last reply by') }}
-      <a
-        :href="lastReply.author.path"
-        class="btn btn-link author-link"
-      >
+      <a :href="lastReply.author.path" class="btn btn-link author-link">
         {{ lastReply.author.name }}
       </a>
-      <time-ago-tooltip
-        :time="lastReply.created_at"
-        tooltip-placement="bottom"
-      />
+      <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />
     </template>
-    <span
-      v-else
-      class="collapse-replies-btn js-collapse-replies"
-      @click="toggle"
-    >
-      <icon name="chevron-down" />
-      {{ s__('Notes|Collapse replies') }}
+    <span v-else class="collapse-replies-btn js-collapse-replies" @click="toggle">
+      <icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }}
     </span>
   </li>
 </template>
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index 8df95c279eb..980d79605d7 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -81,15 +81,17 @@ export const allResolvableDiscussions = (state, getters) =>
 export const resolvedDiscussionsById = state => {
   const map = {};
 
-  state.discussions.filter(d => d.resolvable).forEach(n => {
-    if (n.notes) {
-      const resolved = n.notes.filter(note => note.resolvable).every(note => note.resolved);
+  state.discussions
+    .filter(d => d.resolvable)
+    .forEach(n => {
+      if (n.notes) {
+        const resolved = n.notes.filter(note => note.resolvable).every(note => note.resolved);
 
-      if (resolved) {
-        map[n.id] = n;
+        if (resolved) {
+          map[n.id] = n;
+        }
       }
-    }
-  });
+    });
 
   return map;
 };
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 3c383735f4a..527c16860c0 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
@@ -92,28 +92,12 @@ export default {
     @submit="onSubmit"
     @cancel="onCancel"
   >
-    <template
-      slot="body"
-      slot-scope="props"
-    >
+    <template slot="body" slot-scope="props">
       <p v-html="props.text"></p>
       <p v-html="confirmationTextLabel"></p>
-      <form
-        ref="form"
-        :action="deleteProjectUrl"
-        method="post"
-      >
-        <input
-          ref="method"
-          type="hidden"
-          name="_method"
-          value="delete"
-        />
-        <input
-          :value="csrfToken"
-          type="hidden"
-          name="authenticity_token"
-        />
+      <form ref="form" :action="deleteProjectUrl" method="post">
+        <input ref="method" type="hidden" name="_method" value="delete" />
+        <input :value="csrfToken" type="hidden" name="authenticity_token" />
         <input
           v-model="enteredProjectName"
           name="projectName"
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 4b33fcc759a..e8905b479ee 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
@@ -128,28 +128,12 @@ export default {
     @submit="onSubmit"
     @cancel="onCancel"
   >
-    <template
-      slot="body"
-      slot-scope="props"
-    >
+    <template slot="body" slot-scope="props">
       <p v-html="props.text"></p>
       <p v-html="confirmationTextLabel"></p>
-      <form
-        ref="form"
-        :action="deleteUserUrl"
-        method="post"
-      >
-        <input
-          ref="method"
-          type="hidden"
-          name="_method"
-          value="delete"
-        />
-        <input
-          :value="csrfToken"
-          type="hidden"
-          name="authenticity_token"
-        />
+      <form ref="form" :action="deleteUserUrl" method="post">
+        <input ref="method" type="hidden" name="_method" value="delete" />
+        <input :value="csrfToken" type="hidden" name="authenticity_token" />
         <input
           v-model="enteredUsername"
           type="text"
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 a4778077bc4..061044eba84 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
@@ -121,13 +121,10 @@ Once deleted, it cannot be undone or recovered.`),
     :text="text"
     :primary-button-label="s__('Milestones|Delete milestone')"
     kind="danger"
-    @submit="onSubmit">
-
-    <template
-      slot="body"
-      slot-scope="props">
+    @submit="onSubmit"
+  >
+    <template slot="body" slot-scope="props">
       <p v-html="props.text"></p>
     </template>
-
   </deprecated-modal>
 </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 9d19e4a095d..a79ef07f1c5 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
@@ -69,9 +69,7 @@ export default {
     footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
-    <template
-      slot="title"
-    >
+    <template slot="title">
       {{ title }}
     </template>
     {{ text }}
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 e8b646f3f6e..e723cd3fea9 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
@@ -89,13 +89,7 @@ export default {
     footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
-    <div
-      slot="title"
-      class="modal-title-with-label"
-      v-html="title"
-    >
-      {{ title }}
-    </div>
+    <div slot="title" class="modal-title-with-label" v-html="title">{{ title }}</div>
 
     {{ text }}
   </gl-modal>
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 ab6f42d928c..db2a4041ec0 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
@@ -70,20 +70,13 @@ export default {
         :checked="isEditable"
         class="label-bold"
         type="radio"
-        @click="toggleCustomInput(true)"
+        @click="toggleCustomInput(true);"
       />
 
-      <label for="custom">
-        {{ s__('PipelineSheduleIntervalPattern|Custom') }}
-      </label>
+      <label for="custom"> {{ s__('PipelineSheduleIntervalPattern|Custom') }} </label>
 
       <span class="cron-syntax-link-wrap">
-        (<a
-          :href="cronSyntaxUrl"
-          target="_blank"
-        >
-          {{ __('Cron syntax') }}
-        </a>)
+        (<a :href="cronSyntaxUrl" target="_blank"> {{ __('Cron syntax') }} </a>)
       </span>
     </div>
 
@@ -95,15 +88,10 @@ export default {
         :value="cronIntervalPresets.everyDay"
         class="label-bold"
         type="radio"
-        @click="toggleCustomInput(false)"
+        @click="toggleCustomInput(false);"
       />
 
-      <label
-        class="label-bold"
-        for="every-day"
-      >
-        {{ __('Every day (at 4:00am)') }}
-      </label>
+      <label class="label-bold" for="every-day"> {{ __('Every day (at 4:00am)') }} </label>
     </div>
 
     <div class="cron-preset-radio-input">
@@ -114,13 +102,10 @@ export default {
         :value="cronIntervalPresets.everyWeek"
         class="label-bold"
         type="radio"
-        @click="toggleCustomInput(false)"
+        @click="toggleCustomInput(false);"
       />
 
-      <label
-        class="label-bold"
-        for="every-week"
-      >
+      <label class="label-bold" for="every-week">
         {{ __('Every week (Sundays at 4:00am)') }}
       </label>
     </div>
@@ -133,13 +118,10 @@ export default {
         :value="cronIntervalPresets.everyMonth"
         class="label-bold"
         type="radio"
-        @click="toggleCustomInput(false)"
+        @click="toggleCustomInput(false);"
       />
 
-      <label
-        class="label-bold"
-        for="every-month"
-      >
+      <label class="label-bold" for="every-month">
         {{ __('Every month (on the 1st at 4:00am)') }}
       </label>
     </div>
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index 33fc2420e4d..1edd076604c 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -28,37 +28,26 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="!calloutDismissed"
-    class="pipeline-schedules-user-callout user-callout">
+  <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
     <div class="bordered-box landing content-block">
-      <button
-        id="dismiss-callout-btn"
-        class="btn btn-default close"
-        @click="dismissCallout">
-        <i
-          aria-hidden="true"
-          class="fa fa-times">
-        </i>
+      <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout">
+        <i aria-hidden="true" class="fa fa-times"> </i>
       </button>
-      <div
-        class="svg-container"
-        v-html="illustrationSvg">
-      </div>
+      <div class="svg-container" v-html="illustrationSvg"></div>
       <div class="user-callout-copy">
         <h4>{{ __('Scheduling Pipelines') }}</h4>
         <p>
-          {{ __(`The pipelines schedule runs pipelines in the future,
+          {{
+            __(`The pipelines schedule runs pipelines in the future,
 repeatedly, for specific branches or tags.
-Those scheduled pipelines will inherit limited project access based on their associated user.`) }}
+Those scheduled pipelines will inherit limited project access based on their associated user.`)
+          }}
         </p>
-        <p> {{ __('Learn more in the') }}
-          <a
-            :href="docsUrl"
-            target="_blank"
-            rel="nofollow"
-          >
-          {{ s__('Learn more in the|pipeline schedules documentation') }}</a>.
+        <p>
+          {{ __('Learn more in the') }}
+          <a :href="docsUrl" target="_blank" rel="nofollow">
+            {{ s__('Learn more in the|pipeline schedules documentation') }}</a
+          >.
           <!-- oneline to prevent extra space before period -->
         </p>
       </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 dced839c883..ff6dadeff7d 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
@@ -69,16 +69,8 @@ export default {
 </script>
 
 <template>
-  <div
-    :data-for="name"
-    class="project-feature-controls"
-  >
-    <input
-      v-if="name"
-      :name="name"
-      :value="value"
-      type="hidden"
-    />
+  <div :data-for="name" class="project-feature-controls">
+    <input v-if="name" :name="name" :value="value" type="hidden" />
     <project-feature-toggle
       :value="featureEnabled"
       :disabled-input="disabledInput"
@@ -99,11 +91,7 @@ export default {
           {{ optionName }}
         </option>
       </select>
-      <i
-        aria-hidden="true"
-        class="fa fa-chevron-down"
-      >
-      </i>
+      <i aria-hidden="true" class="fa fa-chevron-down"> </i>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
index 898d605463f..92d23772565 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
@@ -22,30 +22,12 @@ export default {
 
 <template>
   <div class="project-feature-row">
-    <label
-      v-if="label"
-      class="label-bold"
-    >
+    <label v-if="label" class="label-bold">
       {{ label }}
-      <a
-        v-if="helpPath"
-        :href="helpPath"
-        target="_blank"
-      >
-        <i
-          aria-hidden="true"
-          data-hidden="true"
-          class="fa fa-question-circle"
-        >
-        </i>
+      <a v-if="helpPath" :href="helpPath" target="_blank">
+        <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i>
       </a>
     </label>
-    <span
-      v-if="helpText"
-      class="form-text text-muted"
-    >
-      {{ helpText }}
-    </span>
-    <slot></slot>
+    <span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot>
   </div>
 </template>
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 c0ec7a5dc94..08c7719dcf2 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
@@ -200,10 +200,7 @@ export default {
 <template>
   <div>
     <div class="project-visibility-setting">
-      <project-setting-row
-        :help-path="visibilityHelpPath"
-        label="Project visibility"
-      >
+      <project-setting-row :help-path="visibilityHelpPath" label="Project visibility">
         <div class="project-feature-controls">
           <div class="select-wrapper">
             <select
@@ -231,36 +228,21 @@ export default {
                 Public
               </option>
             </select>
-            <i
-              aria-hidden="true"
-              data-hidden="true"
-              class="fa fa-chevron-down"
-            >
-            </i>
+            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"> </i>
           </div>
         </div>
         <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
-        <label
-          v-if="visibilityLevel !== visibilityOptions.PRIVATE"
-          class="request-access"
-        >
+        <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="request-access">
           <input
             :value="requestAccessEnabled"
             type="hidden"
             name="project[request_access_enabled]"
           />
-          <input
-            v-model="requestAccessEnabled"
-            type="checkbox"
-          />
-          Allow users to request access
+          <input v-model="requestAccessEnabled" type="checkbox" /> Allow users to request access
         </label>
       </project-setting-row>
     </div>
-    <div
-      :class="{ 'highlight-changes': highlightChangesClass }"
-      class="project-feature-settings"
-    >
+    <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings">
       <project-setting-row
         label="Issues"
         help-text="Lightweight issue tracking system for this project"
@@ -271,10 +253,7 @@ export default {
           name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
-      <project-setting-row
-        label="Repository"
-        help-text="View and edit files in this project"
-      >
+      <project-setting-row label="Repository" help-text="View and edit files in this project">
         <project-feature-setting
           v-model="repositoryAccessLevel"
           :options="featureAccessLevelOptions"
@@ -293,10 +272,7 @@ export default {
             name="project[project_feature_attributes][merge_requests_access_level]"
           />
         </project-setting-row>
-        <project-setting-row
-          label="Pipelines"
-          help-text="Build, test, and deploy your changes"
-        >
+        <project-setting-row label="Pipelines" help-text="Build, test, and deploy your changes">
           <project-feature-setting
             v-model="buildsAccessLevel"
             :options="repoFeatureAccessLevelOptions"
@@ -329,10 +305,7 @@ export default {
           />
         </project-setting-row>
       </div>
-      <project-setting-row
-        label="Wiki"
-        help-text="Pages for project documentation"
-      >
+      <project-setting-row label="Wiki" help-text="Pages for project documentation">
         <project-feature-setting
           v-model="wikiAccessLevel"
           :options="featureAccessLevelOptions"
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 cbe85eaa590..b0c9ca3ec0d 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
@@ -54,13 +54,7 @@ export default {
 
 <template>
   <div class="d-inline-block">
-    <button
-      v-gl-modal="modalId"
-      type="button"
-      class="btn btn-danger"
-    >
-      {{ __('Delete') }}
-    </button>
+    <button v-gl-modal="modalId" type="button" class="btn btn-danger">{{ __('Delete') }}</button>
     <gl-modal
       :title="title"
       :ok-title="s__('WikiPageConfirmDelete|Delete page')"
@@ -70,23 +64,9 @@ export default {
       @ok="onSubmit"
     >
       {{ message }}
-      <form
-        ref="form"
-        :action="deleteWikiUrl"
-        method="post"
-        class="js-requires-input"
-      >
-        <input
-          ref="method"
-          type="hidden"
-          name="_method"
-          value="delete"
-        />
-        <input
-          :value="csrfToken"
-          type="hidden"
-          name="authenticity_token"
-        />
+      <form ref="form" :action="deleteWikiUrl" method="post" class="js-requires-input">
+        <input ref="method" type="hidden" name="_method" value="delete" />
+        <input :value="csrfToken" type="hidden" name="authenticity_token" />
       </form>
     </gl-modal>
   </div>
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index bf592ba7a3c..8a84ac37dab 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -181,9 +181,8 @@ export default class ActivityCalendar {
       .attr('y', stamp => this.dayYPos(stamp.day))
       .attr('width', this.daySize)
       .attr('height', this.daySize)
-      .attr(
-        'fill',
-        stamp => (stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'),
+      .attr('fill', stamp =>
+        stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed',
       )
       .attr('title', stamp => formatTooltipText(stamp))
       .attr('class', 'user-contrib-cell js-tooltip')
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 7b079fe02d9..cdf1257b4e3 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -56,9 +56,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="hasPDF"
-    class="pdf-viewer">
+  <div 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 96aadf41653..f16aaca6cd7 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -45,12 +45,7 @@ export default {
 </script>
 
 <template>
-  <canvas
-    ref="canvas"
-    :data-page="number"
-    class="pdf-page"
-  >
-  </canvas>
+  <canvas ref="canvas" :data-page="number" class="pdf-page"> </canvas>
 </template>
 
 <style>
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index dc7d6d29b8f..c729198c1d3 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -38,20 +38,14 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="currentRequest.details"
-    :id="`peek-view-${metric}`"
-    class="view"
-  >
+  <div v-if="currentRequest.details" :id="`peek-view-${metric}`" class="view">
     <button
       :data-target="`#modal-peek-${metric}-details`"
       class="btn-blank btn-link bold"
       type="button"
       data-toggle="modal"
     >
-      {{ metricDetails.duration }}
-      /
-      {{ metricDetails.calls }}
+      {{ metricDetails.duration }} / {{ metricDetails.calls }}
     </button>
     <gl-modal
       :id="`modal-peek-${metric}-details`"
@@ -59,35 +53,23 @@ export default {
       modal-size="xl"
       class="performance-bar-modal"
     >
-      <table
-        class="table"
-      >
+      <table class="table">
         <template v-if="detailsList.length">
-          <tr
-            v-for="(item, index) in detailsList"
-            :key="index"
-          >
-            <td><strong>{{ item.duration }}ms</strong></td>
-            <td
-              v-for="key in keys"
-              :key="key"
-              class="break-word"
-            >
-              {{ item[key] }}
+          <tr v-for="(item, index) in detailsList" :key="index">
+            <td>
+              <strong>{{ item.duration }}ms</strong>
             </td>
+            <td v-for="key in keys" :key="key" class="break-word">{{ item[key] }}</td>
           </tr>
         </template>
         <template v-else>
           <tr>
-            <td>
-              No {{ header.toLowerCase() }} for this request.
-            </td>
+            <td>No {{ header.toLowerCase() }} for this request.</td>
           </tr>
         </template>
       </table>
 
-      <div slot="footer">
-      </div>
+      <div slot="footer"></div>
     </gl-modal>
     {{ metric }}
   </div>
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 300d453c174..74faa35358d 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -91,25 +91,15 @@ export default {
 };
 </script>
 <template>
-  <div
-    id="js-peek"
-    :class="env"
-  >
-    <div
-      v-if="currentRequest"
-      class="d-flex container-fluid container-limited"
-    >
-      <div
-        id="peek-view-host"
-        class="view"
-      >
+  <div id="js-peek" :class="env">
+    <div v-if="currentRequest" class="d-flex container-fluid container-limited">
+      <div id="peek-view-host" class="view">
         <span
           v-if="hasHost"
           class="current-host"
-          :class="{ 'canary' : currentRequest.details.host.canary }"
+          :class="{ canary: currentRequest.details.host.canary }"
         >
-          <span v-html="birdEmoji"></span>
-          {{ currentRequest.details.host.hostname }}
+          <span v-html="birdEmoji"></span> {{ currentRequest.details.host.hostname }}
         </span>
       </div>
       <detailed-metric
@@ -121,11 +111,7 @@ export default {
         :details="metric.details"
         :keys="metric.keys"
       />
-      <div
-        v-if="initialRequest"
-        id="peek-view-rblineprof"
-        class="view"
-      >
+      <div v-if="initialRequest" id="peek-view-rblineprof" class="view">
         <button
           v-if="lineProfileModal.length"
           class="btn-link btn-blank"
@@ -134,12 +120,7 @@ export default {
         >
           profile
         </button>
-        <a
-          v-else
-          :href="profileUrl"
-        >
-          profile
-        </a>
+        <a v-else :href="profileUrl"> profile </a>
       </div>
       <simple-metric
         v-for="metric in $options.simpleMetrics"
@@ -147,18 +128,10 @@ export default {
         :current-request="currentRequest"
         :metric="metric"
       />
-      <div
-        id="peek-view-gc"
-        class="view"
-      >
-        <span
-          v-if="currentRequest.details"
-          class="bold"
-        >
-          <span title="Invoke Time">{{ currentRequest.details.gc.gc_time }}</span>ms
-          /
-          <span title="Invoke Count">{{ currentRequest.details.gc.invokes }}</span>
-          gc
+      <div id="peek-view-gc" class="view">
+        <span v-if="currentRequest.details" class="bold">
+          <span title="Invoke Time">{{ currentRequest.details.gc.gc_time }}</span
+          >ms / <span title="Invoke Count">{{ currentRequest.details.gc.invokes }}</span> gc
         </span>
       </div>
       <request-selector
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index ad74f7b38f9..fdb5c0d6939 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -37,11 +37,7 @@ export default {
 <template>
   <div id="peek-request-selector">
     <select v-model="currentRequestId">
-      <option
-        v-for="request in requests"
-        :key="request.id"
-        :value="request.id"
-      >
+      <option v-for="request in requests" :key="request.id" :value="request.id">
         {{ truncatedUrl(request.url) }}
       </option>
     </select>
diff --git a/app/assets/javascripts/performance_bar/components/simple_metric.vue b/app/assets/javascripts/performance_bar/components/simple_metric.vue
index 7a558558c4d..358a57d5bc5 100644
--- a/app/assets/javascripts/performance_bar/components/simple_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/simple_metric.vue
@@ -26,18 +26,8 @@ export default {
 };
 </script>
 <template>
-  <div
-    :id="`peek-view-${metric}`"
-    class="view"
-  >
-    <span
-      v-if="currentRequest.details"
-      class="bold"
-    >
-      {{ duration }}
-      /
-      {{ calls }}
-    </span>
+  <div :id="`peek-view-${metric}`" class="view">
+    <span v-if="currentRequest.details" class="bold"> {{ duration }} / {{ calls }} </span>
     {{ metric }}
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/blank_state.vue b/app/assets/javascripts/pipelines/components/blank_state.vue
index 34360105176..6c3a4a27606 100644
--- a/app/assets/javascripts/pipelines/components/blank_state.vue
+++ b/app/assets/javascripts/pipelines/components/blank_state.vue
@@ -18,9 +18,7 @@ export default {
 <template>
   <div class="row empty-state">
     <div class="col-12">
-      <div class="svg-content">
-        <img :src="svgPath" />
-      </div>
+      <div class="svg-content"><img :src="svgPath" /></div>
     </div>
 
     <div class="col-12 text-center">
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index f756c651684..d16f49f981c 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -25,44 +25,33 @@ export default {
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-12">
-      <div class="svg-content svg-250">
-        <img :src="emptyStateSvgPath" />
-      </div>
+      <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
     </div>
 
     <div class="col-12">
       <div class="text-content">
-
         <template v-if="canSetCi">
-          <h4 class="text-center">
-            {{ s__('Pipelines|Build with confidence') }}
-          </h4>
+          <h4 class="text-center">{{ s__('Pipelines|Build with confidence') }}</h4>
 
           <p>
-            {{ s__(`Pipelines|Continuous Integration can help
+            {{
+              s__(`Pipelines|Continuous Integration can help
                 catch bugs by running your tests automatically,
                 while Continuous Deployment can help you deliver
-                code to your product environment.`) }}
+                code to your product environment.`)
+            }}
           </p>
 
           <div class="text-center">
-            <gl-button
-              :href="helpPagePath"
-              variant="primary"
-              class="js-get-started-pipelines"
-            >
+            <gl-button :href="helpPagePath" variant="primary" class="js-get-started-pipelines">
               {{ s__('Pipelines|Get started with Pipelines') }}
             </gl-button>
           </div>
         </template>
 
-        <p
-          v-else
-          class="text-center"
-        >
+        <p v-else class="text-center">
           {{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
         </p>
-
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 3a39dfe181d..8ca539351a7 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -86,6 +86,6 @@ export default {
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     @click="onClickAction"
   >
-    <icon :name="actionIcon"/>
+    <icon :name="actionIcon" />
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 6c9a11c3829..6f008528db4 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -58,16 +58,9 @@ export default {
 <template>
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
-      <div class="text-center">
-        <gl-loading-icon
-          v-if="isLoading"
-          :size="3"
-        />
-      </div>
+      <div class="text-center"><gl-loading-icon v-if="isLoading" :size="3" /></div>
 
-      <ul
-        v-if="!isLoading"
-        class="stage-column-list">
+      <ul v-if="!isLoading" class="stage-column-list">
         <stage-column-component
           v-for="(stage, index) in graph"
           :key="stage.name"
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index 2670ea29db6..482898b80c4 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -69,22 +69,15 @@ export default {
     >
       <ci-icon :status="group.status" />
 
-      <span class="ci-status-text">
-        {{ group.name }}
-      </span>
+      <span class="ci-status-text"> {{ group.name }} </span>
 
-      <span class="dropdown-counter-badge">
-        {{ group.size }}
-      </span>
+      <span class="dropdown-counter-badge"> {{ group.size }} </span>
     </button>
 
     <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
       <li class="scrollable-menu">
         <ul>
-          <li
-            v-for="job in group.jobs"
-            :key="job.id"
-          >
+          <li v-for="job in group.jobs" :key="job.id">
             <job-item
               :dropdown-length="group.size"
               :job="job"
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index e6abf32decc..782494f72e4 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -114,10 +114,7 @@ export default {
       :class="cssClassJobName"
       class="js-pipeline-graph-job-link"
     >
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
+      <job-name-component :name="job.name" :status="job.status" />
     </gl-link>
 
     <div
@@ -127,11 +124,7 @@ export default {
       :class="cssClassJobName"
       class="js-job-component-tooltip non-details-job-component"
     >
-
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
+      <job-name-component :name="job.name" :status="job.status" />
     </div>
 
     <action-component
diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
index 6fdbcc1e049..1bfab2a7fc0 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
@@ -28,8 +28,6 @@ export default {
   <span class="ci-job-name-component">
     <ci-icon :status="status" />
 
-    <span class="ci-status-text">
-      {{ name }}
-    </span>
+    <span class="ci-status-text"> {{ name }} </span>
   </span>
 </template>
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 d5f931943d5..09a50d25020 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -42,13 +42,8 @@ export default {
 };
 </script>
 <template>
-  <li
-    :class="stageConnectorClass"
-    class="stage-column"
-  >
-    <div class="stage-name">
-      {{ title }}
-    </div>
+  <li :class="stageConnectorClass" class="stage-column">
+    <div class="stage-name">{{ title }}</div>
     <div class="builds-container">
       <ul>
         <li
@@ -58,7 +53,6 @@ export default {
           :class="buildConnnectorClass(index)"
           class="build"
         >
-
           <div class="curve"></div>
 
           <job-item
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index ac7fa4b195e..b2e365e5cde 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -89,10 +89,6 @@ export default {
       item-name="Pipeline"
       @actionClicked="postAction"
     />
-    <gl-loading-icon
-      v-if="isLoading"
-      :size="2"
-      class="prepend-top-default append-bottom-default"
-    />
+    <gl-loading-icon v-if="isLoading" :size="2" class="prepend-top-default append-bottom-default" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index 5104fe36b42..c6990683ec7 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -60,11 +60,7 @@ export default {
       @click="onClickResetCache"
     />
 
-    <gl-button
-      v-if="ciLintPath"
-      :href="ciLintPath"
-      class="js-ci-lint"
-    >
+    <gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint">
       {{ s__('Pipelines|CI Lint') }}
     </gl-button>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 249f7b9f368..e5924d3a77e 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -48,10 +48,7 @@ export default {
 </script>
 <template>
   <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
-    <gl-link
-      :href="pipeline.path"
-      class="js-pipeline-url-link"
-    >
+    <gl-link :href="pipeline.path" class="js-pipeline-url-link">
       <span class="pipeline-id">#{{ pipeline.id }}</span>
     </gl-link>
     <span>by</span>
@@ -62,11 +59,7 @@ export default {
       :tooltip-text="pipeline.user.name"
       class="js-pipeline-url-user"
     />
-    <span
-      v-if="!user"
-      class="js-pipeline-url-api api">
-      API
-    </span>
+    <span v-if="!user" class="js-pipeline-url-api api"> API </span>
     <div class="label-container">
       <span
         v-if="pipeline.flags.latest"
@@ -101,10 +94,7 @@ export default {
       >
         Auto DevOps
       </gl-link>
-      <span
-        v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck badge badge-warning"
-      >
+      <span v-if="pipeline.flags.stuck" class="js-pipeline-url-stuck badge badge-warning">
         stuck
       </span>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index fcd8a54c9c1..9dcea557b32 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -247,20 +247,8 @@ export default {
       v-if="shouldRenderTabs || shouldRenderButtons"
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
     >
-      <div class="fade-left">
-        <i
-          class="fa fa-angle-left"
-          aria-hidden="true"
-        >
-        </i>
-      </div>
-      <div class="fade-right">
-        <i
-          class="fa fa-angle-right"
-          aria-hidden="true"
-        >
-        </i>
-      </div>
+      <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
+      <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
 
       <navigation-tabs
         v-if="shouldRenderTabs"
@@ -280,7 +268,6 @@ export default {
     </div>
 
     <div class="content-list pipelines">
-
       <gl-loading-icon
         v-if="stateToRender === $options.stateMap.loading"
         :label="s__('Pipelines|Loading Pipelines')"
@@ -298,8 +285,10 @@ export default {
       <svg-blank-state
         v-else-if="stateToRender === $options.stateMap.error"
         :svg-path="errorStateSvgPath"
-        :message="s__(`Pipelines|There was an error fetching the pipelines.
-        Try again in a few moments or contact your support team.`)"
+        :message="
+          s__(`Pipelines|There was an error fetching the pipelines.
+        Try again in a few moments or contact your support team.`)
+        "
       />
 
       <svg-blank-state
@@ -308,11 +297,7 @@ export default {
         :message="emptyTabMessage"
       />
 
-      <div
-        v-else-if="stateToRender === $options.stateMap.tableList"
-        class="table-holder"
-      >
-
+      <div v-else-if="stateToRender === $options.stateMap.tableList" class="table-holder">
         <pipelines-table-component
           :pipelines="state.pipelines"
           :update-graph-dropdown="updateGraphDropdown"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 112c1559f25..2e9f2519fcb 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -67,33 +67,20 @@ export default {
       data-toggle="dropdown"
       aria-label="Manual job"
     >
-      <icon
-        name="play"
-        class="icon-play"
-      />
-      <i
-        class="fa fa-caret-down"
-        aria-hidden="true">
-      </i>
+      <icon name="play" class="icon-play" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
       <gl-loading-icon v-if="isLoading" />
     </gl-button>
 
     <ul class="dropdown-menu dropdown-menu-right">
-      <li
-        v-for="action in actions"
-        :key="action.path"
-      >
+      <li v-for="action in actions" :key="action.path">
         <gl-button
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
           class="js-pipeline-action-link no-btn btn"
-          @click="onClickAction(action)"
+          @click="onClickAction(action);"
         >
           {{ action.name }}
-          <span
-            v-if="action.scheduled_at"
-            class="pull-right"
-          >
+          <span v-if="action.scheduled_at" class="pull-right">
             <icon name="clock" />
             <gl-countdown :end-date-string="action.scheduled_at" />
           </span>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index d7d9eb00faa..908b10afee6 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -20,10 +20,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="btn-group"
-    role="group"
-  >
+  <div class="btn-group" role="group">
     <gl-button
       v-gl-tooltip
       class="dropdown-toggle build-artifacts js-pipeline-dropdown-download"
@@ -31,23 +28,11 @@ export default {
       data-toggle="dropdown"
       aria-label="Artifacts"
     >
-      <icon name="download" />
-      <i
-        class="fa fa-caret-down"
-        aria-hidden="true"
-      >
-      </i>
+      <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
     </gl-button>
     <ul class="dropdown-menu dropdown-menu-right">
-      <li
-        v-for="(artifact, i) in artifacts"
-        :key="i"
-      >
-        <gl-link
-          :href="artifact.path"
-          rel="nofollow"
-          download
-        >
+      <li v-for="(artifact, i) in artifacts" :key="i">
+        <gl-link :href="artifact.path" rel="nofollow" download>
           Download {{ artifact.name }} artifacts
         </gl-link>
       </li>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 3339b5c13ed..1c60ae6a152 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -80,32 +80,17 @@ export default {
 </script>
 <template>
   <div class="ci-table">
-    <div
-      class="gl-responsive-table-row table-row-header"
-      role="row"
-    >
-      <div
-        class="table-section section-10 js-pipeline-status pipeline-status"
-        role="rowheader"
-      >
+    <div class="gl-responsive-table-row table-row-header" role="row">
+      <div class="table-section section-10 js-pipeline-status pipeline-status" role="rowheader">
         {{ s__('Pipeline|Status') }}
       </div>
-      <div
-        class="table-section section-15 js-pipeline-info pipeline-info"
-        role="rowheader"
-      >
+      <div class="table-section section-15 js-pipeline-info pipeline-info" role="rowheader">
         {{ s__('Pipeline|Pipeline') }}
       </div>
-      <div
-        class="table-section section-20 js-pipeline-commit pipeline-commit"
-        role="rowheader"
-      >
+      <div class="table-section section-20 js-pipeline-commit pipeline-commit" role="rowheader">
         {{ s__('Pipeline|Commit') }}
       </div>
-      <div
-        class="table-section section-20 js-pipeline-stages pipeline-stages"
-        role="rowheader"
-      >
+      <div class="table-section section-20 js-pipeline-stages pipeline-stages" role="rowheader">
         {{ s__('Pipeline|Stages') }}
       </div>
     </div>
@@ -128,6 +113,5 @@ export default {
     >
       <span v-html="modalText"></span>
     </modal>
-
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index fd674a8d447..da42698c255 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -257,32 +257,16 @@ export default {
 <template>
   <div class="commit gl-responsive-table-row">
     <div class="table-section section-10 commit-link">
-      <div
-        class="table-mobile-header"
-        role="rowheader"
-      >
-        {{ s__('Pipeline|Status') }}
-      </div>
+      <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Status') }}</div>
       <div class="table-mobile-content">
-        <ci-badge
-          :status="pipelineStatus"
-          :show-text="!isChildView"
-        />
+        <ci-badge :status="pipelineStatus" :show-text="!isChildView" />
       </div>
     </div>
 
-    <pipeline-url
-      :pipeline="pipeline"
-      :auto-devops-help-path="autoDevopsHelpPath"
-    />
+    <pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
 
     <div class="table-section section-20">
-      <div
-        class="table-mobile-header"
-        role="rowheader"
-      >
-        {{ s__('Pipeline|Commit') }}
-      </div>
+      <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Commit') }}</div>
       <div class="table-mobile-content">
         <commit-component
           :tag="commitTag"
@@ -297,12 +281,7 @@ export default {
     </div>
 
     <div class="table-section section-wrap section-20 stage-cell">
-      <div
-        class="table-mobile-header"
-        role="rowheader"
-      >
-        {{ s__('Pipeline|Stages') }}
-      </div>
+      <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Stages') }}</div>
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">
           <div
@@ -320,20 +299,14 @@ export default {
       </div>
     </div>
 
-    <pipelines-timeago
-      :duration="pipelineDuration"
-      :finished-time="pipelineFinishedAt"
-    />
+    <pipelines-timeago :duration="pipelineDuration" :finished-time="pipelineFinishedAt" />
 
     <div
       v-if="displayPipelineActions"
       class="table-section section-20 table-button-footer pipeline-actions"
     >
       <div class="btn-group table-action-buttons">
-        <pipelines-actions-component
-          v-if="actions.length > 0"
-          :actions="actions"
-        />
+        <pipelines-actions-component v-if="actions.length > 0" :actions="actions" />
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 1d62472671a..2d3f667e73e 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -169,35 +169,20 @@ export default {
       aria-expanded="false"
       @click="onClickStage"
     >
-
-      <span
-        :aria-label="stage.title"
-        aria-hidden="true"
-        class="no-pointer-events"
-      >
+      <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events">
         <icon :name="borderlessIcon" />
       </span>
 
-      <i
-        class="fa fa-caret-down"
-        aria-hidden="true"
-      >
-      </i>
+      <i class="fa fa-caret-down" aria-hidden="true"> </i>
     </button>
 
     <div
       class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
       aria-labelledby="stageDropdown"
     >
-      <gl-loading-icon v-if="isLoading"/>
-      <ul
-        v-else
-        class="js-builds-dropdown-list scrollable-menu"
-      >
-        <li
-          v-for="job in dropdownContent"
-          :key="job.id"
-        >
+      <gl-loading-icon v-if="isLoading" />
+      <ul v-else class="js-builds-dropdown-list scrollable-menu">
+        <li v-for="job in dropdownContent" :key="job.id">
           <job-item
             :dropdown-length="dropdownContent.length"
             :job="job"
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index bed690200b8..2ed0c24825c 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -56,32 +56,14 @@ export default {
 </script>
 <template>
   <div class="table-section section-15 pipelines-time-ago">
-    <div
-      class="table-mobile-header"
-      role="rowheader"
-    >
-      {{ s__('Pipeline|Duration') }}
-    </div>
+    <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div>
     <div class="table-mobile-content">
-      <p
-        v-if="hasDuration"
-        class="duration"
-      >
-        <span v-html="iconTimerSvg">
-        </span>
-        {{ durationFormated }}
+      <p v-if="hasDuration" class="duration">
+        <span v-html="iconTimerSvg"> </span> {{ durationFormated }}
       </p>
 
-      <p
-        v-if="hasFinishedTime"
-        class="finished-at d-none d-sm-none d-md-block"
-      >
-
-        <i
-          class="fa fa-calendar"
-          aria-hidden="true"
-        >
-        </i>
+      <p v-if="hasFinishedTime" class="finished-at d-none d-sm-none d-md-block">
+        <i class="fa fa-calendar" aria-hidden="true"> </i>
 
         <time
           v-tooltip
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 99b57f4c9d5..85c5c073a74 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -83,34 +83,16 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
     :primary-button-label="s__('Profiles|Delete account')"
     :submit-disabled="!canSubmit()"
     kind="danger"
-    @submit="onSubmit">
-
-    <template
-      slot="body"
-      slot-scope="props">
+    @submit="onSubmit"
+  >
+    <template slot="body" slot-scope="props">
       <p v-html="props.text"></p>
 
-      <form
-        ref="form"
-        :action="actionUrl"
-        method="post">
+      <form ref="form" :action="actionUrl" method="post">
+        <input type="hidden" name="_method" value="delete" />
+        <input :value="csrfToken" type="hidden" name="authenticity_token" />
 
-        <input
-          type="hidden"
-          name="_method"
-          value="delete"
-        />
-        <input
-          :value="csrfToken"
-          type="hidden"
-          name="authenticity_token"
-        />
-
-        <p
-          id="input-label"
-          v-html="inputLabel"
-        >
-        </p>
+        <p id="input-label" v-html="inputLabel"></p>
 
         <input
           v-if="confirmWithPassword"
@@ -130,6 +112,5 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         />
       </form>
     </template>
-
   </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index ef484ddfd61..e1085c0a44d 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -87,9 +87,7 @@ Please update your Git repository remotes as soon as possible.`),
       <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
       <div class="input-group">
         <div class="input-group-prepend">
-          <div class="input-group-text">
-            {{ rootUrl }}
-          </div>
+          <div class="input-group-text">{{ rootUrl }}</div>
         </div>
         <input
           :id="$options.inputId"
@@ -99,9 +97,7 @@ Please update your Git repository remotes as soon as possible.`),
           required="required"
         />
       </div>
-      <p class="form-text text-muted">
-        {{ path }}
-      </p>
+      <p class="form-text text-muted">{{ path }}</p>
     </div>
     <button
       :data-target="`#${$options.modalId}`"
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 2c02f436b69..78f085e5312 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
@@ -87,13 +87,8 @@ export default {
 
 <template>
   <div>
-    <div
-      class="js-gcp-machine-type-dropdown dropdown"
-    >
-      <dropdown-hidden-input
-        :name="fieldName"
-        :value="selectedMachineType"
-      />
+    <div class="js-gcp-machine-type-dropdown dropdown">
+      <dropdown-hidden-input :name="fieldName" :value="selectedMachineType" />
       <dropdown-button
         :class="{ 'border-danger': hasErrors }"
         :is-disabled="isDisabled"
@@ -112,29 +107,21 @@ export default {
                 {{ s__('ClusterIntegration|No machine types matched your search') }}
               </span>
             </li>
-            <li
-              v-for="result in results"
-              :key="result.id"
-            >
-              <button
-                type="button"
-                @click.prevent="setItem(result.name)"
-              >
+            <li v-for="result in results" :key="result.id">
+              <button type="button" @click.prevent="setItem(result.name);">
                 {{ result.name }}
               </button>
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading">
-          <gl-loading-icon />
-        </div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
       </div>
     </div>
     <span
       v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
-        'text-muted': !hasErrors
+        'text-muted': !hasErrors,
       }"
       class="form-text"
     >
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 fc17e2fab49..8e51dd352c7 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
@@ -145,17 +145,12 @@ export default {
 
 <template>
   <div>
-    <div
-      class="js-gcp-project-id-dropdown dropdown"
-    >
-      <dropdown-hidden-input
-        :name="fieldName"
-        :value="selectedProject.projectId"
-      />
+    <div class="js-gcp-project-id-dropdown dropdown">
+      <dropdown-hidden-input :name="fieldName" :value="selectedProject.projectId" />
       <dropdown-button
         :class="{
           'border-danger': hasErrors,
-          'read-only': hasOneProject
+          'read-only': hasOneProject,
         }"
         :is-disabled="isDisabled"
         :is-loading="isLoading"
@@ -173,28 +168,18 @@ export default {
                 {{ s__('ClusterIntegration|No projects matched your search') }}
               </span>
             </li>
-            <li
-              v-for="result in results"
-              :key="result.project_number"
-            >
-              <button
-                type="button"
-                @click.prevent="setItem(result)"
-              >
-                {{ result.name }}
-              </button>
+            <li v-for="result in results" :key="result.project_number">
+              <button type="button" @click.prevent="setItem(result);">{{ result.name }}</button>
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading">
-          <gl-loading-icon />
-        </div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
       </div>
     </div>
     <span
       :class="{
         'text-danger': hasErrors,
-        'text-muted': !hasErrors
+        'text-muted': !hasErrors,
       }"
       class="form-text"
       v-html="helpText"
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 ca7c79f75f0..728616a441f 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
@@ -61,13 +61,8 @@ export default {
 
 <template>
   <div>
-    <div
-      class="js-gcp-zone-dropdown dropdown"
-    >
-      <dropdown-hidden-input
-        :name="fieldName"
-        :value="selectedZone"
-      />
+    <div class="js-gcp-zone-dropdown dropdown">
+      <dropdown-hidden-input :name="fieldName" :value="selectedZone" />
       <dropdown-button
         :class="{ 'border-danger': hasErrors }"
         :is-disabled="isDisabled"
@@ -86,29 +81,21 @@ export default {
                 {{ s__('ClusterIntegration|No zones matched your search') }}
               </span>
             </li>
-            <li
-              v-for="result in results"
-              :key="result.id"
-            >
-              <button
-                type="button"
-                @click.prevent="setItem(result.name)"
-              >
+            <li v-for="result in results" :key="result.id">
+              <button type="button" @click.prevent="setItem(result.name);">
                 {{ result.name }}
               </button>
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading">
-          <gl-loading-icon />
-        </div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
       </div>
     </div>
     <span
       v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
-        'text-muted': !hasErrors
+        'text-muted': !hasErrors,
       }"
       class="form-text"
     >
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 7400b685c7e..bfc55013a71 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,15 +100,8 @@ export default {
 </script>
 <template>
   <div class="ci-status-link">
-    <gl-loading-icon
-      v-if="isLoading"
-      :size="3"
-      label="Loading pipeline status"
-    />
-    <a
-      v-else
-      :href="ciStatus.details_path"
-    >
+    <gl-loading-icon v-if="isLoading" :size="3" label="Loading pipeline status" />
+    <a v-else :href="ciStatus.details_path">
       <ci-icon
         v-tooltip
         :title="statusTitle"
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 6f94f5d6d2a..6233fb169e9 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -35,10 +35,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon
-      v-if="isLoading"
-      :size="3"
-    />
+    <gl-loading-icon v-if="isLoading" :size="3" />
 
     <collapsible-container
       v-for="(item, index) in repos"
@@ -48,8 +45,10 @@ export default {
     />
 
     <p v-else-if="!isLoading && !repos.length">
-      {{ __(`No container images stored for this project.
-Add one by following the instructions above.`) }}
+      {{
+        __(`No container images stored for this project.
+Add one by following the instructions above.`)
+      }}
     </p>
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index d85de973740..6514c05a9c7 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -61,11 +61,7 @@ export default {
 <template>
   <div class="container-image">
     <div class="container-image-head">
-      <button
-        type="button"
-        class="js-toggle-repo btn-link"
-        @click="toggleRepo"
-      >
+      <button type="button" class="js-toggle-repo btn-link" @click="toggleRepo">
         <i
           :class="{
             'fa-chevron-right': !isOpen,
@@ -95,36 +91,18 @@ export default {
           class="js-remove-repo btn btn-danger"
           @click="handleDeleteRepository"
         >
-          <i
-            class="fa fa-trash"
-            aria-hidden="true"
-          >
-          </i>
+          <i class="fa fa-trash" aria-hidden="true"> </i>
         </button>
       </div>
     </div>
 
-    <gl-loading-icon
-      v-if="repo.isLoading"
-      :size="2"
-      class="append-bottom-20"
-    />
+    <gl-loading-icon v-if="repo.isLoading" :size="2" class="append-bottom-20" />
 
-    <div
-      v-else-if="!repo.isLoading && isOpen"
-      class="container-image-tags"
-    >
+    <div v-else-if="!repo.isLoading && isOpen" class="container-image-tags">
+      <table-registry v-if="repo.list.length" :repo="repo" />
 
-      <table-registry
-        v-if="repo.list.length"
-        :repo="repo"
-      />
-
-      <div
-        v-else
-        class="nothing-here-block"
-      >
-        {{ s__("ContainerRegistry|No tags in Container Registry for this container image.") }}
+      <div v-else class="nothing-here-block">
+        {{ s__('ContainerRegistry|No tags in Container Registry for this container image.') }}
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index bb6c977fc63..6735c3ff7cf 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -65,17 +65,14 @@ export default {
         <tr>
           <th>{{ s__('ContainerRegistry|Tag') }}</th>
           <th>{{ s__('ContainerRegistry|Tag ID') }}</th>
-          <th>{{ s__("ContainerRegistry|Size") }}</th>
-          <th>{{ s__("ContainerRegistry|Created") }}</th>
+          <th>{{ s__('ContainerRegistry|Size') }}</th>
+          <th>{{ s__('ContainerRegistry|Created') }}</th>
           <th></th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="(item, i) in repo.list"
-          :key="i">
+        <tr v-for="(item, i) in repo.list" :key="i">
           <td>
-
             {{ item.tag }}
 
             <clipboard-button
@@ -86,11 +83,7 @@ export default {
             />
           </td>
           <td>
-            <span
-              v-tooltip
-              :title="item.revision"
-              data-placement="bottom"
-            >
+            <span v-tooltip :title="item.revision" data-placement="bottom">
               {{ item.shortRevision }}
             </span>
           </td>
@@ -103,11 +96,7 @@ export default {
           </td>
 
           <td>
-            <span
-              v-tooltip
-              :title="tooltipTitle(item.createdAt)"
-              data-placement="bottom"
-            >
+            <span v-tooltip :title="tooltipTitle(item.createdAt)" data-placement="bottom">
               {{ timeFormated(item.createdAt) }}
             </span>
           </td>
@@ -121,13 +110,9 @@ export default {
               type="button"
               class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               data-container="body"
-              @click="handleDeleteRegistry(item)"
+              @click="handleDeleteRegistry(item);"
             >
-              <i
-                class="fa fa-trash"
-                aria-hidden="true"
-              >
-              </i>
+              <i class="fa fa-trash" aria-hidden="true"> </i>
             </button>
           </td>
         </tr>
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index bd204503cc7..82601363aa4 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -77,13 +77,8 @@ export default {
     :has-issues="reports.length > 0"
     class="mr-widget-section grouped-security-reports mr-report"
   >
-    <div
-      slot="body"
-      class="mr-widget-grouped-section report-block"
-    >
-      <template
-        v-for="(report, i) in reports"
-      >
+    <div slot="body" class="mr-widget-grouped-section report-block">
+      <template v-for="(report, i) in reports">
         <summary-row
           :key="`summary-row-${i}`"
           :summary="reportText(report)"
@@ -100,10 +95,7 @@ export default {
         />
       </template>
 
-      <modal
-        :title="modalTitle"
-        :modal-data="modalData"
-      />
+      <modal :title="modalTitle" :modal-data="modalData" />
     </div>
   </report-section>
 </template>
diff --git a/app/assets/javascripts/reports/components/issue_status_icon.vue b/app/assets/javascripts/reports/components/issue_status_icon.vue
index 6e143c4f98c..2946fbc6a1f 100644
--- a/app/assets/javascripts/reports/components/issue_status_icon.vue
+++ b/app/assets/javascripts/reports/components/issue_status_icon.vue
@@ -45,9 +45,6 @@ export default {
     }"
     class="report-block-list-icon"
   >
-    <icon
-      :name="iconName"
-      :size="32"
-    />
+    <icon :name="iconName" :size="32" />
   </div>
 </template>
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
index 5f9e4072b2d..162421b037f 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -36,23 +36,13 @@ export default {
         :key="index"
         class="row prepend-top-10 append-bottom-10"
       >
-        <strong class="col-sm-3 text-right">
-          {{ field.text }}:
-        </strong>
+        <strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
 
         <div class="col-sm-9 text-secondary">
-          <code-block
-            v-if="field.type === $options.fieldTypes.codeBock"
-            :code="field.value"
-          />
+          <code-block v-if="field.type === $options.fieldTypes.codeBock" :code="field.value" />
 
           <template v-else-if="field.type === $options.fieldTypes.link">
-            <a
-              :href="field.value"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="js-modal-link"
-            >
+            <a :href="field.value" target="_blank" rel="noopener noreferrer" class="js-modal-link">
               {{ field.value }}
             </a>
           </template>
@@ -67,7 +57,6 @@ export default {
         </div>
       </div>
     </slot>
-    <div slot="footer">
-    </div>
+    <div slot="footer"></div>
   </modal>
 </template>
diff --git a/app/assets/javascripts/reports/components/modal_open_name.vue b/app/assets/javascripts/reports/components/modal_open_name.vue
index 4f81cee2a38..118e4b02c46 100644
--- a/app/assets/javascripts/reports/components/modal_open_name.vue
+++ b/app/assets/javascripts/reports/components/modal_open_name.vue
@@ -26,7 +26,7 @@ export default {
   <button
     type="button"
     class="btn-link btn-blank text-left break-link vulnerability-name-button"
-    @click="handleIssueClick()"
+    @click="handleIssueClick();"
   >
     {{ issue.title }}
   </button>
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 01e6d357a21..839e86bdf17 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -33,21 +33,9 @@ export default {
 };
 </script>
 <template>
-  <li
-    :class="{ 'is-dismissed': issue.isDismissed }"
-    class="report-block-list-issue"
-  >
-    <issue-status-icon
-      :status="status"
-      class="append-right-5"
-    />
+  <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
+    <issue-status-icon :status="status" class="append-right-5" />
 
-    <component
-      :is="component"
-      v-if="component"
-      :issue="issue"
-      :status="status"
-      :is-new="isNew"
-    />
+    <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
   </li>
 </template>
diff --git a/app/assets/javascripts/reports/components/report_link.vue b/app/assets/javascripts/reports/components/report_link.vue
index 74d68f9f439..052bc53d610 100644
--- a/app/assets/javascripts/reports/components/report_link.vue
+++ b/app/assets/javascripts/reports/components/report_link.vue
@@ -20,10 +20,16 @@ export default {
       rel="noopener noreferrer nofollow"
       class="break-link"
     >
-      {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+      {{ issue.path
+      }}<template v-if="issue.line"
+        >:{{ issue.line }}</template
+      >
     </a>
     <template v-else>
-      {{ issue.path }}<template v-if="issue.line">:{{ issue.line }}</template>
+      {{ issue.path
+      }}<template v-if="issue.line"
+        >:{{ issue.line }}</template
+      >
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index d196f497362..d6483e95278 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -143,11 +143,7 @@ export default {
         <span class="js-code-text code-text">
           {{ headerText }}
 
-          <popover
-            v-if="hasPopover"
-            :options="popoverOptions"
-            class="prepend-left-5"
-          />
+          <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
         </span>
 
         <slot name="actionButtons"></slot>
@@ -163,11 +159,7 @@ export default {
       </div>
     </div>
 
-    <div
-      v-if="hasIssues"
-      v-show="isExpanded"
-      class="js-report-section-container"
-    >
+    <div v-if="hasIssues" v-show="isExpanded" class="js-report-section-container">
       <slot name="body">
         <issues-list
           :unresolved-issues="unresolvedIssues"
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 7e73ccb6c28..97a68531d29 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -46,26 +46,14 @@ export default {
 <template>
   <div class="report-block-list-issue report-block-list-issue-parent">
     <div class="report-block-list-icon append-right-10 prepend-left-5">
-      <gl-loading-icon
-        v-if="statusIcon === 'loading'"
-        css-class="report-block-list-loading-icon"
-      />
-      <ci-icon
-        v-else
-        :status="iconStatus"
-      />
+      <gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" />
+      <ci-icon v-else :status="iconStatus" />
     </div>
 
     <div class="report-block-list-issue-description">
-      <div class="report-block-list-issue-description-text">
-        {{ summary }}
-      </div>
-
-      <popover
-        v-if="popoverOptions"
-        :options="popoverOptions"
-      />
+      <div class="report-block-list-issue-description-text">{{ summary }}</div>
 
+      <popover v-if="popoverOptions" :options="popoverOptions" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index 1a87822fcc3..938e83de546 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -30,14 +30,10 @@ export default {
       <button
         type="button"
         class="btn-link btn-blank text-left break-link vulnerability-name-button"
-        @click="openModal({ issue })"
+        @click="openModal({ issue });"
       >
-        <div
-          v-if="isNew"
-          class="badge badge-danger append-right-5"
-        >
-          {{ s__('New') }}
-        </div>{{ issue.name }}
+        <div v-if="isNew" class="badge badge-danger append-right-5">{{ s__('New') }}</div>
+        {{ issue.name }}
       </button>
     </div>
   </div>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
index 48e5ede80f2..0e8b6d93f42 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
@@ -23,11 +23,5 @@ export default {
 </script>
 
 <template>
-  <button
-    type="button"
-    class="btn menu-item"
-    @click="openModal"
-  >
-    {{ buttonText }}
-  </button>
+  <button type="button" class="btn menu-item" @click="openModal">{{ buttonText }}</button>
 </template>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 8a48eea5c89..f04f7606976 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -176,10 +176,7 @@ export default {
         type="hidden"
         name="user[status][emoji]"
       />
-      <div
-        ref="userStatusForm"
-        class="form-group position-relative m-0"
-      >
+      <div ref="userStatusForm" class="form-group position-relative m-0">
         <div class="input-group">
           <span class="input-group-btn">
             <button
@@ -197,18 +194,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon
-                  name="emoji_slightly_smiling_face"
-                  css-classes="award-control-icon-neutral"
-                />
-                <icon
-                  name="emoji_smiley"
-                  css-classes="award-control-icon-positive"
-                />
-                <icon
-                  name="emoji_smile"
-                  css-classes="award-control-icon-super-positive"
-                />
+                <icon name="emoji_slightly_smiling_face" css-classes="award-control-icon-neutral" />
+                <icon name="emoji_smiley" css-classes="award-control-icon-positive" />
+                <icon name="emoji_smile" css-classes="award-control-icon-super-positive" />
               </span>
             </button>
           </span>
@@ -223,10 +211,7 @@ export default {
             @keyup.enter.prevent
             @click="hideEmojiMenu"
           />
-          <span
-            v-show="isDirty"
-            class="input-group-btn"
-          >
+          <span v-show="isDirty" class="input-group-btn">
             <button
               v-gl-tooltip.bottom
               :title="s__('SetStatusModal|Clear status')"
@@ -234,7 +219,7 @@ export default {
               name="button"
               type="button"
               class="js-clear-user-status-button clear-user-status btn"
-              @click="clearStatusInputs()"
+              @click="clearStatusInputs();"
             >
               <icon name="close" />
             </button>
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index 284a258d3c9..0ad2b3a73a2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -32,18 +32,8 @@ export default {
 <template>
   <div class="title hide-collapsed">
     {{ assigneeTitle }}
-    <i
-      v-if="loading"
-      aria-hidden="true"
-      class="fa fa-spinner fa-spin block-loading"
-    >
-
-    </i>
-    <a
-      v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link float-right"
-      href="#"
-    >
+    <i v-if="loading" aria-hidden="true" class="fa fa-spinner fa-spin block-loading"> </i>
+    <a v-if="editable" class="js-sidebar-dropdown-toggle edit-link float-right" href="#">
       {{ __('Edit') }}
     </a>
     <a
@@ -53,12 +43,7 @@ export default {
       href="#"
       role="button"
     >
-      <i
-        aria-hidden="true"
-        data-hidden="true"
-        class="fa fa-angle-double-right"
-      >
-      </i>
+      <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"> </i>
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index f1ea6aacdb2..d1a396182b3 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -133,12 +133,7 @@ export default {
       data-placement="left"
       data-boundary="viewport"
     >
-      <i
-        v-if="hasNoUsers"
-        aria-label="No Assignee"
-        class="fa fa-user"
-      >
-      </i>
+      <i v-if="hasNoUsers" aria-label="No Assignee" class="fa fa-user"> </i>
       <button
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
@@ -152,20 +147,10 @@ export default {
           width="24"
           class="avatar avatar-inline s24"
         />
-        <span class="author">
-          {{ user.name }}
-        </span>
+        <span class="author"> {{ user.name }} </span>
       </button>
-      <button
-        v-if="hasMoreThanTwoAssignees"
-        class="btn-link"
-        type="button"
-      >
-        <span
-          class="avatar-counter sidebar-avatar-counter"
-        >
-          {{ sidebarAvatarCounter }}
-        </span>
+      <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
+        <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
       </button>
     </div>
     <div class="value hide-collapsed">
@@ -173,34 +158,20 @@ export default {
         <span class="assign-yourself no-value">
           No assignee
           <template v-if="editable">
-            -
-            <button
-              type="button"
-              class="btn-link"
-              @click="assignSelf"
-            >
-              assign yourself
-            </button>
+            - <button type="button" class="btn-link" @click="assignSelf">assign yourself</button>
           </template>
         </span>
       </template>
       <template v-else-if="hasOneUser">
-        <a
-          :href="assigneeUrl(firstUser)"
-          class="author-link bold"
-        >
+        <a :href="assigneeUrl(firstUser)" class="author-link bold">
           <img
             :alt="assigneeAlt(firstUser)"
             :src="avatarUrl(firstUser)"
             width="32"
             class="avatar avatar-inline s32"
           />
-          <span class="author">
-            {{ firstUser.name }}
-          </span>
-          <span class="username">
-            {{ assigneeUsername(firstUser) }}
-          </span>
+          <span class="author"> {{ firstUser.name }} </span>
+          <span class="username"> {{ assigneeUsername(firstUser) }} </span>
         </a>
       </template>
       <template v-else>
@@ -227,15 +198,8 @@ export default {
             </a>
           </div>
         </div>
-        <div
-          v-if="renderShowMoreSection"
-          class="user-list-more"
-        >
-          <button
-            type="button"
-            class="btn-link"
-            @click="toggleShowLess"
-          >
+        <div v-if="renderShowMoreSection" class="user-list-more">
+          <button type="button" class="btn-link" @click="toggleShowLess">
             <template v-if="showLess">
               {{ hiddenAssigneesLabel }}
             </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 439e8a69df0..597b723a9d9 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -74,10 +74,7 @@ export default {
       data-boundary="viewport"
       @click="toggleForm"
     >
-      <icon
-        :name="confidentialityIcon"
-        aria-hidden="true"
-      />
+      <icon :name="confidentialityIcon" aria-hidden="true" />
     </div>
     <div class="title hide-collapsed">
       {{ __('Confidentiality') }}
@@ -96,20 +93,11 @@ export default {
         :is-confidential="isConfidential"
         :update-confidential-attribute="updateConfidentialAttribute"
       />
-      <div
-        v-if="!isConfidential"
-        class="no-value sidebar-item-value">
-        <icon
-          :size="16"
-          name="eye"
-          aria-hidden="true"
-          class="sidebar-item-icon inline"
-        />
+      <div v-if="!isConfidential" class="no-value sidebar-item-value">
+        <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>
-      <div
-        v-else
-        class="value sidebar-item-value hide-collapsed">
+      <div v-else class="value sidebar-item-value hide-collapsed">
         <icon
           :size="16"
           name="eye-slash"
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
index 4165aa19acf..0ecbf934c25 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
@@ -35,14 +35,8 @@ export default {
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <div>
-        <p
-          v-if="!isConfidential"
-          v-html="confidentialityOnWarning">
-        </p>
-        <p
-          v-else
-          v-html="confidentialityOffWarning">
-        </p>
+        <p v-if="!isConfidential" v-html="confidentialityOnWarning"></p>
+        <p v-else v-html="confidentialityOffWarning"></p>
         <edit-form-buttons
           :is-confidential="isConfidential"
           :update-confidential-attribute="updateConfidentialAttribute"
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 38b1ddbfd5b..4b9bb5c7b0e 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -36,18 +36,10 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button
-      type="button"
-      class="btn btn-default append-right-10"
-      @click="closeForm"
-    >
+    <button type="button" class="btn btn-default append-right-10" @click="closeForm">
       {{ __('Cancel') }}
     </button>
-    <button
-      type="button"
-      class="btn btn-close"
-      @click.prevent="submitForm"
-    >
+    <button type="button" class="btn btn-close" @click.prevent="submitForm">
       {{ toggleButtonText }}
     </button>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index 4906dad22e1..630da751704 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -43,22 +43,11 @@ export default {
 <template>
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
-      <p
-        v-if="isLocked"
-        class="text"
-        v-html="unlockWarning">
-      </p>
+      <p v-if="isLocked" class="text" v-html="unlockWarning"></p>
 
-      <p
-        v-else
-        class="text"
-        v-html="lockWarning">
-      </p>
+      <p v-else class="text" v-html="lockWarning"></p>
 
-      <edit-form-buttons
-        :is-locked="isLocked"
-        :update-locked-attribute="updateLockedAttribute"
-      />
+      <edit-form-buttons :is-locked="isLocked" :update-locked-attribute="updateLockedAttribute" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index 63082654101..902aeb9b8e4 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -41,19 +41,11 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button
-      type="button"
-      class="btn btn-default append-right-10"
-      @click="closeForm"
-    >
+    <button type="button" class="btn btn-default append-right-10" @click="closeForm">
       {{ __('Cancel') }}
     </button>
 
-    <button
-      type="button"
-      class="btn btn-close"
-      @click.prevent="submitForm"
-    >
+    <button type="button" class="btn btn-close" @click.prevent="submitForm">
       {{ buttonText }}
     </button>
   </div>
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 48a2b9194aa..faea64c9841 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -100,14 +100,13 @@ export default {
       data-boundary="viewport"
       @click="toggleForm"
     >
-      <icon
-        :name="lockIcon"
-        class="sidebar-item-icon is-active"
-      />
+      <icon :name="lockIcon" class="sidebar-item-icon is-active" />
     </div>
 
     <div class="title hide-collapsed">
-      {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
+      {{
+        sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName })
+      }}
       <button
         v-if="isEditable"
         class="float-right lock-edit"
@@ -126,28 +125,13 @@ export default {
         :issuable-type="issuableType"
       />
 
-      <div
-        v-if="isLocked"
-        class="value sidebar-item-value"
-      >
-        <icon
-          :size="16"
-          name="lock"
-          class="sidebar-item-icon inline is-active"
-        />
+      <div v-if="isLocked" class="value sidebar-item-value">
+        <icon :size="16" name="lock" class="sidebar-item-icon inline is-active" />
         {{ __('Locked') }}
       </div>
 
-      <div
-        v-else
-        class="no-value sidebar-item-value hide-collapsed"
-      >
-        <icon
-          :size="16"
-          name="lock-open"
-          class="sidebar-item-icon inline"
-        />
-        {{ __('Unlocked') }}
+      <div v-else class="no-value sidebar-item-value hide-collapsed">
+        <icon :size="16" name="lock-open" class="sidebar-item-icon inline" /> {{ __('Unlocked') }}
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 43d2f754bac..4bfc8fa7eec 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -88,21 +88,9 @@ export default {
       data-boundary="viewport"
       @click="onClickCollapsedIcon"
     >
-      <i
-        class="fa fa-users"
-        aria-hidden="true"
-      >
-      </i>
-      <gl-loading-icon
-        v-if="loading"
-        class="js-participants-collapsed-loading-icon"
-      />
-      <span
-        v-else
-        class="js-participants-collapsed-count"
-      >
-        {{ participantCount }}
-      </span>
+      <i class="fa fa-users" aria-hidden="true"> </i>
+      <gl-loading-icon v-if="loading" class="js-participants-collapsed-loading-icon" />
+      <span v-else class="js-participants-collapsed-count"> {{ participantCount }} </span>
     </div>
     <div class="title hide-collapsed">
       <gl-loading-icon
@@ -118,10 +106,7 @@ export default {
         :key="participant.id"
         class="participants-author js-participants-author"
       >
-        <a
-          :href="participant.web_url"
-          class="author-link"
-        >
+        <a :href="participant.web_url" class="author-link">
           <user-avatar-image
             :lazy="true"
             :img-src="participant.avatar_url"
@@ -133,10 +118,7 @@ export default {
         </a>
       </div>
     </div>
-    <div
-      v-if="hasMoreParticipants"
-      class="participants-more hide-collapsed"
-    >
+    <div v-if="hasMoreParticipants" class="participants-more hide-collapsed">
       <button
         type="button"
         class="btn-transparent btn-blank js-toggle-participants-button"
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index b6151aa6c64..a75daca156c 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -73,10 +73,7 @@ export default {
 
 <template>
   <div>
-    <div
-      class="sidebar-collapsed-icon"
-      @click="onClickCollapsedIcon"
-    >
+    <div class="sidebar-collapsed-icon" @click="onClickCollapsedIcon">
       <span
         v-tooltip
         :title="notificationTooltip"
@@ -92,9 +89,7 @@ export default {
         />
       </span>
     </div>
-    <span class="issuable-header-text hide-collapsed float-left">
-      {{ __('Notifications') }}
-    </span>
+    <span class="issuable-header-text hide-collapsed float-left"> {{ __('Notifications') }} </span>
     <toggle-button
       ref="toggleButton"
       :is-loading="showLoadingState"
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 259858e4b46..657ac837baf 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -120,9 +120,7 @@ export default {
     <icon name="timer" />
     <div class="time-tracking-collapsed-summary">
       <div :class="divClass">
-        <span :class="spanClass">
-          {{ text }}
-        </span>
+        <span :class="spanClass"> {{ text }} </span>
       </div>
     </div>
   </div>
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 87780411c26..f4d926cd3ec 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -69,26 +69,15 @@ export default {
       data-placement="top"
       role="timeRemainingDisplay"
     >
-      <gl-progress-bar
-        :value="timeRemainingPercent"
-        :variant="progressBarVariant"
-      />
+      <gl-progress-bar :value="timeRemainingPercent" :variant="progressBarVariant" />
       <div class="compare-display-container">
         <div class="compare-display float-left">
-          <span class="compare-label">
-            {{ s__('TimeTracking|Spent') }}
-          </span>
-          <span class="compare-value spent">
-            {{ timeSpentHumanReadable }}
-          </span>
+          <span class="compare-label"> {{ s__('TimeTracking|Spent') }} </span>
+          <span class="compare-value spent"> {{ timeSpentHumanReadable }} </span>
         </div>
         <div class="compare-display estimated float-right">
-          <span class="compare-label">
-            {{ s__('TimeTrackingEstimated|Est') }}
-          </span>
-          <span class="compare-value">
-            {{ timeEstimateHumanReadable }}
-          </span>
+          <span class="compare-label"> {{ s__('TimeTrackingEstimated|Est') }} </span>
+          <span class="compare-value"> {{ timeEstimateHumanReadable }} </span>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
index 08fce597e50..305726d9725 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
@@ -12,9 +12,6 @@ export default {
 
 <template>
   <div class="time-tracking-estimate-only-pane">
-    <span class="bold">
-      {{ s__('TimeTracking|Estimated:') }}
-    </span>
-    {{ timeEstimateHumanReadable }}
+    <span class="bold"> {{ s__('TimeTracking|Estimated:') }} </span> {{ timeEstimateHumanReadable }}
   </div>
 </template>
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 91909cd49b8..51cd5810ac0 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -40,22 +40,11 @@ export default {
 <template>
   <div class="time-tracking-help-state">
     <div class="time-tracking-info">
-      <h4>
-        {{ __('Track time with quick actions') }}
-      </h4>
-      <p>
-        {{ __('Quick actions can be used in the issues description and comment boxes.') }}
-      </p>
-      <p v-html="estimateText">
-      </p>
-      <p v-html="spendText">
-      </p>
-      <a
-        :href="href"
-        class="btn btn-default learn-more-button"
-      >
-        {{ __('Learn more') }}
-      </a>
+      <h4>{{ __('Track time with quick actions') }}</h4>
+      <p>{{ __('Quick actions can be used in the issues description and comment boxes.') }}</p>
+      <p v-html="estimateText"></p>
+      <p v-html="spendText"></p>
+      <a :href="href" class="btn btn-default learn-more-button"> {{ __('Learn more') }} </a>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
index 9228184df5b..45552589e50 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
@@ -6,8 +6,6 @@ export default {
 
 <template>
   <div class="time-tracking-no-tracking-pane">
-    <span class="no-value">
-      {{ __('No estimate or time spent') }}
-    </span>
+    <span class="no-value"> {{ __('No estimate or time spent') }} </span>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
index 59cd99f8f14..7c7356e2afa 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
@@ -12,7 +12,6 @@ export default {
 
 <template>
   <div class="time-tracking-spend-only-pane">
-    <span class="bold">Spent:</span>
-    {{ timeSpentHumanReadable }}
+    <span class="bold">Spent:</span> {{ timeSpentHumanReadable }}
   </div>
 </template>
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 ef76dc13ce9..d3a4f9c81e0 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -90,10 +90,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-cloak
-    class="time_tracker time-tracking-component-wrap"
-  >
+  <div v-cloak class="time_tracker time-tracking-component-wrap">
     <time-tracking-collapsed-state
       :show-comparison-state="showComparisonState"
       :show-no-time-tracking-state="showNoTimeTrackingState"
@@ -105,27 +102,15 @@ export default {
     />
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
-      <div
-        v-if="!showHelpState"
-        class="help-button float-right"
-        @click="toggleHelpState(true)"
-      >
-        <i
-          class="fa fa-question-circle"
-          aria-hidden="true"
-        >
-        </i>
+      <div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true);">
+        <i class="fa fa-question-circle" aria-hidden="true"> </i>
       </div>
       <div
         v-if="showHelpState"
         class="close-help-button float-right"
-        @click="toggleHelpState(false)"
+        @click="toggleHelpState(false);"
       >
-        <i
-          class="fa fa-close"
-          aria-hidden="true"
-        >
-        </i>
+        <i class="fa fa-close" aria-hidden="true"> </i>
       </div>
     </div>
     <div class="time-tracking-content hide-collapsed">
@@ -137,9 +122,7 @@ export default {
         v-if="showSpentOnlyState"
         :time-spent-human-readable="humanTimeSpent"
       />
-      <time-tracking-no-tracking-pane
-        v-if="showNoTimeTrackingState"
-      />
+      <time-tracking-no-tracking-pane v-if="showNoTimeTrackingState" />
       <time-tracking-comparison-pane
         v-if="showComparisonState"
         :time-estimate="timeEstimate"
@@ -148,10 +131,7 @@ export default {
         :time-estimate-human-readable="humanTimeEstimate"
       />
       <transition name="help-state-toggle">
-        <time-tracking-help-state
-          v-if="showHelpState"
-          :root-path="rootPath"
-        />
+        <time-tracking-help-state v-if="showHelpState" :root-path="rootPath" />
       </transition>
     </div>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index 7edef35461a..706e6ca19c3 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -84,15 +84,7 @@ export default {
       :css-classes="collapsedButtonIconClasses"
       :name="collapsedButtonIcon"
     />
-    <span
-      v-show="!collapsed"
-      class="issuable-todo-inner"
-    >
-      {{ buttonLabel }}
-    </span>
-    <gl-loading-icon
-      v-show="isActionActive"
-      :inline="true"
-    />
+    <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
+    <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>
 </template>
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 fe741dc60cb..1c5b5d02e20 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -116,9 +116,7 @@ export default {
         <div class="deploy-body">
           <div class="js-deployment-info deployment-info">
             <template v-if="hasDeploymentMeta">
-              <span>
-                {{ deployedText }}
-              </span>
+              <span> {{ deployedText }} </span>
               <tooltip-on-truncate
                 :title="deployment.name"
                 truncate-target="child"
@@ -157,20 +155,14 @@ export default {
                 :main-action-link="deployment.external_url"
                 filter-key="path"
               >
-                <template
-                  slot="mainAction"
-                  slot-scope="slotProps"
-                >
+                <template slot="mainAction" slot-scope="slotProps">
                   <review-app-link
                     :link="deployment.external_url"
                     :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
                   />
                 </template>
 
-                <template
-                  slot="result"
-                  slot-scope="slotProps"
-                >
+                <template slot="result" slot-scope="slotProps">
                   <a
                     :href="slotProps.result.external_url"
                     target="_blank"
@@ -193,11 +185,11 @@ export default {
                 css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
               />
             </template>
-            <span 
+            <span
               v-if="deployment.stop_url"
-              v-tooltip 
+              v-tooltip
               :title="deployInProgressTooltip"
-              class="d-inline-block" 
+              class="d-inline-block"
               tabindex="0"
             >
               <loading-button
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
index 41dbc5c9cbb..7ce454b7338 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
@@ -154,27 +154,19 @@ export default {
 
 <template>
   <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
-    <p
-      v-if="shouldShowLoading"
-      class="usage-info js-usage-info usage-info-loading">
-      <i
-        class="fa fa-spinner fa-spin usage-info-load-spinner"
-        aria-hidden="true">
-      </i>{{ s__('mrWidget|Loading deployment statistics') }}
+    <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading">
+      <i class="fa fa-spinner fa-spin usage-info-load-spinner" aria-hidden="true"> </i
+      >{{ s__('mrWidget|Loading deployment statistics') }}
     </p>
     <p
       v-if="shouldShowMemoryGraph"
       class="usage-info js-usage-info"
-      v-html="memoryChangeMessage">
-    </p>
-    <p
-      v-if="shouldShowLoadFailure"
-      class="usage-info js-usage-info usage-info-failed">
+      v-html="memoryChangeMessage"
+    ></p>
+    <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed">
       {{ s__('mrWidget|Failed to load deployment statistics') }}
     </p>
-    <p
-      v-if="shouldShowMetricsUnavailable"
-      class="usage-info js-usage-info usage-info-unavailable">
+    <p v-if="shouldShowMetricsUnavailable" class="usage-info js-usage-info usage-info-unavailable">
       {{ s__('mrWidget|Deployment statistics are not available currently') }}
     </p>
     <memory-graph
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 2ad9e8be655..84937aa9510 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
@@ -39,15 +39,7 @@ export default {
     :title="author.name"
     class="author-link inline"
   >
-    <img
-      :src="avatarUrl"
-      class="avatar avatar-inline s16"
-    />
-    <span
-      v-if="showAuthorName"
-      class="author"
-    >
-      {{ author.name }}
-    </span>
+    <img :src="avatarUrl" class="avatar avatar-inline s16" />
+    <span v-if="showAuthorName" class="author"> {{ author.name }} </span>
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index 1d902131f49..6b3007fce51 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -34,12 +34,6 @@ export default {
   <h4 class="js-mr-widget-author">
     {{ actionText }}
     <mr-widget-author :author="author" />
-    <time
-      v-tooltip
-      :title="dateTitle"
-      data-container="body"
-    >
-      {{ dateReadable }}
-    </time>
+    <time v-tooltip :title="dateTitle" data-container="body"> {{ dateReadable }} </time>
   </h4>
 </template>
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 acfdab3a015..6f422ea3f27 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
@@ -76,13 +76,11 @@ export default {
 </script>
 <template>
   <div class="mr-source-target append-bottom-default">
-    <div class="git-merge-icon-container append-right-default">
-      <icon name="git-merge" />
-    </div>
+    <div class="git-merge-icon-container append-right-default"><icon name="git-merge" /></div>
     <div class="git-merge-container d-flex">
       <div class="normal">
         <strong>
-          {{ s__("mrWidget|Request to merge") }}
+          {{ s__('mrWidget|Request to merge') }}
           <tooltip-on-truncate
             :title="mr.sourceBranch"
             truncate-target="child"
@@ -93,32 +91,23 @@ export default {
             :title="__('Copy branch name to clipboard')"
             css-class="btn-default btn-transparent btn-clipboard"
           />
-          {{ s__("mrWidget|into") }}
+          {{ s__('mrWidget|into') }}
           <tooltip-on-truncate
             :title="mr.targetBranch"
             truncate-target="child"
             class="label-branch label-truncate"
           >
-            <a
-              :href="mr.targetBranchTreePath"
-              class="js-target-branch"
-            >
-              {{ mr.targetBranch }}
-            </a>
+            <a :href="mr.targetBranchTreePath" class="js-target-branch"> {{ mr.targetBranch }} </a>
           </tooltip-on-truncate>
         </strong>
         <div
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count"
           v-html="commitsBehindText"
-        >
-        </div>
+        ></div>
       </div>
 
-      <div
-        v-if="mr.isOpen"
-        class="branch-actions d-flex"
-      >
+      <div v-if="mr.isOpen" class="branch-actions d-flex">
         <a
           v-if="!mr.sourceBranchRemoved"
           v-tooltip
@@ -130,7 +119,7 @@ export default {
           tabindex="0"
           role="button"
         >
-          {{ s__("mrWidget|Open in Web IDE") }}
+          {{ s__('mrWidget|Open in Web IDE') }}
         </a>
         <button
           :disabled="mr.sourceBranchRemoved"
@@ -139,7 +128,7 @@ export default {
           class="btn btn-default js-check-out-branch append-right-default"
           type="button"
         >
-          {{ s__("mrWidget|Check out branch") }}
+          {{ s__('mrWidget|Check out branch') }}
         </button>
         <span class="dropdown">
           <button
@@ -150,29 +139,17 @@ export default {
             aria-haspopup="true"
             aria-expanded="false"
           >
-            <icon name="download" />
-            <i
-              class="fa fa-caret-down"
-              aria-hidden="true">
-            </i>
+            <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i>
           </button>
           <ul class="dropdown-menu dropdown-menu-right">
             <li>
-              <a
-                :href="mr.emailPatchesPath"
-                class="js-download-email-patches"
-                download
-              >
-                {{ s__("mrWidget|Email patches") }}
+              <a :href="mr.emailPatchesPath" class="js-download-email-patches" download>
+                {{ s__('mrWidget|Email patches') }}
               </a>
             </li>
             <li>
-              <a
-                :href="mr.plainDiffPath"
-                class="js-download-plain-diff"
-                download
-              >
-                {{ s__("mrWidget|Plain diff") }}
+              <a :href="mr.plainDiffPath" class="js-download-plain-diff" download>
+                {{ s__('mrWidget|Plain diff') }}
               </a>
             </li>
           </ul>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index 37c6af13c03..a347269c916 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -28,7 +28,7 @@ export default {
       {{ missingBranchInfo }}
     </template>
     <template v-else>
-      {{ s__("mrWidget|You can merge this merge request manually using the") }}
+      {{ s__('mrWidget|You can merge this merge request manually using the') }}
     </template>
 
     <button
@@ -37,7 +37,7 @@ export default {
       data-toggle="modal"
       data-target="#modal_merge_info"
     >
-      {{ s__("mrWidget|command line") }}
+      {{ s__('mrWidget|command line') }}
     </button>
   </section>
 </template>
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 53608838f2f..71571ba9cab 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
@@ -79,48 +79,29 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="hasPipeline || hasCIError"
-    class="mr-widget-heading append-bottom-default"
-  >
+  <div v-if="hasPipeline || hasCIError" class="mr-widget-heading append-bottom-default">
     <div class="ci-widget media">
       <template v-if="hasCIError">
         <div
           class="add-border ci-status-icon ci-status-icon-failed ci-error
           js-ci-error append-right-default"
         >
-          <icon
-            :size="32"
-            name="status_failed_borderless"
-          />
-        </div>
-        <div
-          class="media-body"
-          v-html="errorText"
-        >
+          <icon :size="32" name="status_failed_borderless" />
         </div>
+        <div class="media-body" v-html="errorText"></div>
       </template>
       <template v-else-if="hasPipeline">
-        <a
-          :href="status.details_path"
-          class="align-self-start append-right-default"
-        >
-          <ci-icon
-            :status="status"
-            :size="32"
-            :borderless="true"
-            class="add-border"
-          />
+        <a :href="status.details_path" class="align-self-start append-right-default">
+          <ci-icon :status="status" :size="32" :borderless="true" class="add-border" />
         </a>
         <div class="ci-widget-container d-flex">
           <div class="ci-widget-content">
             <div class="media-body">
               <div class="font-weight-bold">
                 Pipeline
-                <a
-                  :href="pipeline.path"
-                  class="pipeline-id font-weight-normal pipeline-number"
-                >#{{ pipeline.id }}</a>
+                <a :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number"
+                  >#{{ pipeline.id }}</a
+                >
 
                 {{ pipeline.details.status.label }}
 
@@ -130,7 +111,8 @@ export default {
                     :href="pipeline.commit.commit_path"
                     class="commit-sha js-commit-link font-weight-normal"
                   >
-                    {{ pipeline.commit.short_id }}</a>
+                    {{ pipeline.commit.short_id }}</a
+                  >
                   on
                   <tooltip-on-truncate
                     :title="sourceBranch"
@@ -140,20 +122,12 @@ export default {
                   />
                 </template>
               </div>
-              <div
-                v-if="pipeline.coverage"
-                class="coverage"
-              >
-                Coverage {{ pipeline.coverage }}%
-              </div>
+              <div v-if="pipeline.coverage" class="coverage">Coverage {{ pipeline.coverage }}%</div>
             </div>
           </div>
           <div>
             <span class="mr-widget-pipeline-graph">
-              <span
-                v-if="hasStages"
-                class="stage-cell"
-              >
+              <span v-if="hasStages" class="stage-cell">
                 <div
                   v-for="(stage, i) in pipeline.details.stages"
                   :key="i"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index cc77b96a589..1b3b589c32f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -30,14 +30,10 @@ export default {
 </script>
 <template>
   <section class="mr-info-list mr-links">
-    <p v-if="relatedLinks.closing">
-      {{ closesText }} <span v-html="relatedLinks.closing"></span>
-    </p>
+    <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
     <p v-if="relatedLinks.mentioned">
-      {{ s__("mrWidget|Mentions") }} <span v-html="relatedLinks.mentioned"></span>
-    </p>
-    <p v-if="relatedLinks.assignToMe">
-      <span v-html="relatedLinks.assignToMe"></span>
+      {{ s__('mrWidget|Mentions') }} <span v-html="relatedLinks.mentioned"></span>
     </p>
+    <p v-if="relatedLinks.assignToMe"><span v-html="relatedLinks.assignToMe"></span></p>
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 060361a6516..780ced4d382 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -33,18 +33,9 @@ export default {
 </script>
 <template>
   <div class="space-children d-flex append-right-10 widget-status-icon">
-    <div
-      v-if="isLoading"
-      class="mr-widget-icon"
-    >
-      <gl-loading-icon />
-    </div>
+    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon /></div>
 
-    <ci-icon
-      v-else
-      :status="statusObj"
-      :size="24"
-    />
+    <ci-icon v-else :status="statusObj" :size="24" />
 
     <button
       v-if="showDisabledButton"
@@ -52,7 +43,7 @@ export default {
       class="js-disabled-merge-button btn btn-success btn-sm"
       disabled="true"
     >
-      {{ s__("mrWidget|Merge") }}
+      {{ s__('mrWidget|Merge') }}
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index b007d4f4dcb..de9c122f268 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -18,13 +18,7 @@ export default {
 };
 </script>
 <template>
-  <a
-    :href="link"
-    target="_blank"
-    rel="noopener noreferrer nofollow"
-    :class="cssClass"
-  >
-    {{ __('View app') }}
-    <icon name="external-link" />
+  <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
+    {{ __('View app') }} <icon name="external-link" />
   </a>
 </template>
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 01f707163d4..dd940548e30 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
@@ -14,21 +14,9 @@ export default {
 </script>
 
 <template>
-  <p
-    v-once
-    class="mr-info-list mr-links source-branch-removal-status append-bottom-0"
-  >
-    <span
-      class="status-text"
-      v-html="removesBranchText"
-    >
-    </span>
-    <i
-      v-tooltip
-      :title="tooltipTitle"
-      :aria-label="tooltipTitle"
-      class="fa fa-question-circle"
-    >
+  <p v-once class="mr-info-list mr-links source-branch-removal-status append-bottom-0">
+    <span class="status-text" v-html="removesBranchText"> </span>
+    <i v-tooltip :title="tooltipTitle" :aria-label="tooltipTitle" class="fa fa-question-circle">
     </i>
   </p>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index 2a76a878448..7ddcdd49df5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -11,20 +11,14 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <div class="space-children">
-      <status-icon
-        status="warning"
-      />
-      <button
-        type="button"
-        class="btn btn-success btn-sm"
-        disabled="true"
-      >
-        {{ s__("mrWidget|Merge") }}
+      <status-icon status="warning" />
+      <button type="button" class="btn btn-success btn-sm" disabled="true">
+        {{ s__('mrWidget|Merge') }}
       </button>
     </div>
     <div class="media-body">
       <span class="bold">
-        {{ s__("mrWidget|This project is archived, write access has been disabled") }}
+        {{ s__('mrWidget|This project is archived, write access has been disabled') }}
       </span>
     </div>
   </div>
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 409fc2f2db4..a3a44dd8e99 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
@@ -35,8 +35,10 @@ export default {
     <status-icon status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        <template v-if="mr.mergeError">{{ mr.mergeError }}.</template>
-        {{ s__("mrWidget|This merge request failed to be merged automatically") }}
+        <template v-if="mr.mergeError"
+          >{{ mr.mergeError }}.</template
+        >
+        {{ s__('mrWidget|This merge request failed to be merged automatically') }}
       </span>
       <button
         :disabled="isRefreshing"
@@ -44,11 +46,8 @@ export default {
         class="btn btn-sm btn-default"
         @click="refreshWidget"
       >
-        <gl-loading-icon
-          v-if="isRefreshing"
-          :inline="true"
-        />
-        {{ s__("mrWidget|Refresh") }}
+        <gl-loading-icon v-if="isRefreshing" :inline="true" />
+        {{ s__('mrWidget|Refresh') }}
       </button>
     </div>
   </div>
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 fdf0a9fd994..cf26003d038 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
@@ -10,14 +10,9 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="loading"
-    />
+    <status-icon :show-disabled-button="true" status="loading" />
     <div class="media-body space-children">
-      <span class="bold">
-        {{ s__("mrWidget|Checking ability to merge automatically") }}
-      </span>
+      <span class="bold"> {{ s__('mrWidget|Checking ability to merge automatically') }} </span>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index f06eab95c7e..a5c75369fa1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -21,9 +21,7 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      status="warning"
-    />
+    <status-icon status="warning" />
     <div class="media-body">
       <mr-widget-author-time
         :action-text="s__('mrWidget|Closed by')"
@@ -34,13 +32,8 @@ export default {
 
       <section class="mr-info-list">
         <p>
-          {{ s__("mrWidget|The changes were not merged into") }}
-          <a
-            :href="mr.targetBranchPath"
-            class="label-branch"
-          >
-            {{ mr.targetBranch }}
-          </a>
+          {{ s__('mrWidget|The changes were not merged into') }}
+          <a :href="mr.targetBranchPath" class="label-branch"> {{ mr.targetBranch }} </a>
         </p>
       </section>
     </div>
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 8c808296178..27352e0b2b1 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
@@ -19,25 +19,23 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
 
     <div class="media-body space-children">
-      <span
-        v-if="mr.shouldBeRebased"
-        class="bold"
-      >
-        {{ s__(`mrWidget|Fast-forward merge is not possible.
-To merge this request, first rebase locally.`) }}
+      <span v-if="mr.shouldBeRebased" class="bold">
+        {{
+          s__(`mrWidget|Fast-forward merge is not possible.
+To merge this request, first rebase locally.`)
+        }}
       </span>
       <template v-else>
         <span class="bold">
-          {{ s__("mrWidget|There are merge conflicts") }}<span v-if="!mr.canMerge">.</span>
+          {{ s__('mrWidget|There are merge conflicts') }}<span v-if="!mr.canMerge">.</span>
           <span v-if="!mr.canMerge">
-            {{ s__(`mrWidget|Resolve these conflicts or ask someone
-            with write access to this repository to merge it locally`) }}
+            {{
+              s__(`mrWidget|Resolve these conflicts or ask someone
+            with write access to this repository to merge it locally`)
+            }}
           </span>
         </span>
         <a
@@ -45,7 +43,7 @@ To merge this request, first rebase locally.`) }}
           :href="mr.conflictResolutionPath"
           class="js-resolve-conflicts-button btn btn-default btn-sm"
         >
-          {{ s__("mrWidget|Resolve conflicts") }}
+          {{ s__('mrWidget|Resolve conflicts') }}
         </a>
         <button
           v-if="mr.canMerge"
@@ -53,7 +51,7 @@ To merge this request, first rebase locally.`) }}
           data-toggle="modal"
           data-target="#modal_merge_info"
         >
-          {{ s__("mrWidget|Merge locally") }}
+          {{ s__('mrWidget|Merge locally') }}
         </button>
       </template>
     </div>
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 c302960f16e..2a4dff71d9b 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
@@ -74,38 +74,18 @@ export default {
   <div class="mr-widget-body media">
     <template v-if="isRefreshing">
       <status-icon status="loading" />
-      <span class="media-body bold js-refresh-label">
-        {{ s__("mrWidget|Refreshing now") }}
-      </span>
+      <span class="media-body bold js-refresh-label"> {{ s__('mrWidget|Refreshing now') }} </span>
     </template>
     <template v-else>
-      <status-icon
-        :show-disabled-button="true"
-        status="warning"
-      />
+      <status-icon :show-disabled-button="true" status="warning" />
       <div class="media-body space-children">
         <span class="bold">
-          <span
-            v-if="mr.mergeError"
-            class="has-error-message"
-          >
-            {{ mergeError }}.
-          </span>
-          <span v-else>
-            {{ s__("mrWidget|Merge failed.") }}
-          </span>
-          <span
-            :class="{ 'has-custom-error': mr.mergeError }"
-          >
-            {{ timerText }}
-          </span>
+          <span v-if="mr.mergeError" class="has-error-message"> {{ mergeError }}. </span>
+          <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
+          <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
         </span>
-        <button
-          class="btn btn-default btn-sm js-refresh-button"
-          type="button"
-          @click="refresh"
-        >
-          {{ s__("mrWidget|Refresh now") }}
+        <button class="btn btn-default btn-sm js-refresh-button" type="button" @click="refresh">
+          {{ s__('mrWidget|Refresh now') }}
         </button>
       </div>
     </template>
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 484b5600d63..02c76db4a50 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
@@ -84,9 +84,9 @@ export default {
     <div class="media-body">
       <h4 class="d-flex align-items-start">
         <span class="append-right-10">
-          {{ s__("mrWidget|Set by") }}
+          {{ s__('mrWidget|Set by') }}
           <mr-widget-author :author="mr.setToMWPSBy" />
-          {{ s__("mrWidget|to be merged automatically when the pipeline succeeds") }}
+          {{ s__('mrWidget|to be merged automatically when the pipeline succeeds') }}
         </span>
         <a
           v-if="mr.canCancelAutomaticMerge"
@@ -94,35 +94,23 @@ export default {
           role="button"
           href="#"
           class="btn btn-sm btn-default js-cancel-auto-merge"
-          @click.prevent="cancelAutomaticMerge">
-          <i
-            v-if="isCancellingAutoMerge"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true"
-          >
-          </i>
-          {{ s__("mrWidget|Cancel automatic merge") }}
+          @click.prevent="cancelAutomaticMerge"
+        >
+          <i v-if="isCancellingAutoMerge" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
+          {{ s__('mrWidget|Cancel automatic merge') }}
         </a>
       </h4>
       <section class="mr-info-list">
         <p>
-          {{ s__("mrWidget|The changes will be merged into") }}
-          <a
-            :href="mr.targetBranchPath"
-            class="label-branch"
-          >
-            {{ mr.targetBranch }}
-          </a>
+          {{ s__('mrWidget|The changes will be merged into') }}
+          <a :href="mr.targetBranchPath" class="label-branch"> {{ mr.targetBranch }} </a>
         </p>
         <p v-if="mr.shouldRemoveSourceBranch">
-          {{ s__("mrWidget|The source branch will be removed") }}
+          {{ s__('mrWidget|The source branch will be removed') }}
         </p>
-        <p
-          v-else
-          class="d-flex align-items-start"
-        >
+        <p v-else class="d-flex align-items-start">
           <span class="append-right-10">
-            {{ s__("mrWidget|The source branch will not be removed") }}
+            {{ s__('mrWidget|The source branch will not be removed') }}
           </span>
           <a
             v-if="canRemoveSourceBranch"
@@ -132,13 +120,8 @@ export default {
             href="#"
             @click.prevent="removeSourceBranch"
           >
-            <i
-              v-if="isRemovingSourceBranch"
-              class="fa fa-spinner fa-spin"
-              aria-hidden="true"
-            >
-            </i>
-            {{ s__("mrWidget|Remove source branch") }}
+            <i v-if="isRemovingSourceBranch" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
+            {{ s__('mrWidget|Remove source branch') }}
           </a>
         </p>
       </section>
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 fb9ca897844..fe83fe58b67 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
@@ -154,7 +154,7 @@ export default {
       </div>
       <section class="mr-info-list">
         <p>
-          {{ s__("mrWidget|The changes were merged into") }}
+          {{ s__('mrWidget|The changes were merged into') }}
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
@@ -174,27 +174,22 @@ export default {
           </template>
         </p>
         <p v-if="mr.sourceBranchRemoved">
-          {{ s__("mrWidget|The source branch has been removed") }}
+          {{ s__('mrWidget|The source branch has been removed') }}
         </p>
-        <p
-          v-if="shouldShowRemoveSourceBranch"
-          class="space-children"
-        >
-          <span>{{ s__("mrWidget|You can remove source branch now") }}</span>
+        <p v-if="shouldShowRemoveSourceBranch" class="space-children">
+          <span>{{ s__('mrWidget|You can remove source branch now') }}</span>
           <button
             :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-default js-remove-branch-button"
             @click="removeSourceBranch"
           >
-            {{ s__("mrWidget|Remove Source Branch") }}
+            {{ s__('mrWidget|Remove Source Branch') }}
           </button>
         </p>
         <p v-if="shouldShowSourceBranchRemoving">
           <gl-loading-icon :inline="true" />
-          <span>
-            {{ s__("mrWidget|The source branch is being removed") }}
-          </span>
+          <span> {{ s__('mrWidget|The source branch is being removed') }} </span>
         </p>
       </section>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 139e64d1878..0655eef6504 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -19,12 +19,10 @@ export default {
   <div class="mr-widget-body mr-state-locked media">
     <status-icon status="loading" />
     <div class="media-body">
-      <h4>
-        {{ s__("mrWidget|This merge request is in the process of being merged") }}
-      </h4>
+      <h4>{{ s__('mrWidget|This merge request is in the process of being merged') }}</h4>
       <section class="mr-info-list">
         <p>
-          {{ s__("mrWidget|The changes will be merged into") }}
+          {{ s__('mrWidget|The changes will be merged into') }}
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
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 227e9b85f9d..e9aac8b385c 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
@@ -46,24 +46,13 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
 
     <div class="media-body space-children">
       <span class="bold js-branch-text">
-        <span class="capitalize">
-          {{ missingBranchName }}
-        </span> {{ s__("mrWidget|branch does not exist.") }}
-        {{ missingBranchNameMessage }}
-        <i
-          v-tooltip
-          :title="message"
-          :aria-label="message"
-          class="fa fa-question-circle"
-        >
-        </i>
+        <span class="capitalize"> {{ missingBranchName }} </span>
+        {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
+        <i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i>
       </span>
     </div>
   </div>
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 360559ae0f0..c203d2824fa 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
@@ -11,14 +11,13 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="success"
-    />
+    <status-icon :show-disabled-button="true" status="success" />
     <div class="media-body space-children">
       <span class="bold">
-        {{ s__(`mrWidget|Ready to be merged automatically.
-Ask someone with write access to this repository to merge this request`) }}
+        {{
+          s__(`mrWidget|Ready to be merged automatically.
+Ask someone with write access to this repository to merge this request`)
+        }}
       </span>
     </div>
   </div>
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 a4eb5afb21c..6331a7d8388 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
@@ -10,14 +10,13 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{ s__(`mrWidget|Pipeline blocked.
-The pipeline for this merge request requires a manual action to proceed`) }}
+        {{
+          s__(`mrWidget|Pipeline blocked.
+The pipeline for this merge request requires a manual action to proceed`)
+        }}
       </span>
     </div>
   </div>
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 5a7f6cc36fa..adfbcd18588 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
@@ -87,23 +87,17 @@ export default {
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :status="status"
-      :show-disabled-button="showDisabledButton"
-    />
+    <status-icon :status="status" :show-disabled-button="showDisabledButton" />
 
     <div class="rebase-state-find-class-convention media media-body space-children">
       <template v-if="mr.rebaseInProgress || isMakingRequest">
-        <span class="bold">
-          Rebase in progress
-        </span>
+        <span class="bold"> Rebase in progress </span>
       </template>
       <template v-if="!mr.rebaseInProgress && !mr.canPushToSourceBranch">
         <span class="bold">
-          Fast-forward merge is not possible.
-          Rebase the source branch onto
-          <span class="label-branch">{{ mr.targetBranch }}</span>
-          to allow this merge request to be merged.
+          Fast-forward merge is not possible. Rebase the source branch onto
+          <span class="label-branch">{{ mr.targetBranch }}</span> to allow this merge request to be
+          merged.
         </span>
       </template>
       <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
@@ -120,19 +114,11 @@ js-toggle-container accept-action media space-children"
             <gl-loading-icon v-if="isMakingRequest" />
             Rebase
           </button>
-          <span
-            v-if="!rebasingError"
-            class="bold"
-          >
-            Fast-forward merge is not possible.
-            Rebase the source branch onto the target branch or merge target
-            branch into source branch to allow this merge request to be merged.
-          </span>
-          <span
-            v-else
-            class="bold danger">
-            {{ rebasingError }}
+          <span v-if="!rebasingError" class="bold">
+            Fast-forward merge is not possible. Rebase the source branch onto the target branch or
+            merge target branch into source branch to allow this merge request to be merged.
           </span>
+          <span v-else class="bold danger"> {{ rebasingError }} </span>
         </div>
       </template>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index e73b7e410d5..a38495bb4cc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -23,21 +23,16 @@ export default {
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <span>
-          Merge requests are a place to propose changes you have made to a project
-          and discuss those changes with others.
+          Merge requests are a place to propose changes you have made to a project and discuss those
+          changes with others.
         </span>
+        <p>Interested parties can even contribute by pushing commits if they want to.</p>
         <p>
-          Interested parties can even contribute by pushing commits if they want to.
-        </p>
-        <p>
-          Currently there are no changes in this merge request's source branch.
-          Please push new commits or use a different branch.
+          Currently there are no changes in this merge request's source branch. Please push new
+          commits or use a different branch.
         </p>
         <div>
-          <a
-            v-if="mr.newBlobPath"
-            :href="mr.newBlobPath"
-            class="btn btn-inverted btn-success">
+          <a v-if="mr.newBlobPath" :href="mr.newBlobPath" class="btn btn-inverted btn-success">
             Create file
           </a>
         </div>
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 2bb1a34412e..5f56157cb89 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
@@ -11,14 +11,13 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{ s__(`mrWidget|The pipeline for this merge request failed.
-Please retry the job or push a new commit to fix the failure`) }}
+        {{
+          s__(`mrWidget|The pipeline for this merge request failed.
+Please retry the job or push a new commit to fix the failure`)
+        }}
       </span>
     </div>
   </div>
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 e7baecbcde4..84c8a3464a5 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
@@ -249,12 +249,9 @@ export default {
             :class="mergeButtonClass"
             type="button"
             class="qa-merge-button"
-            @click="handleMergeButtonClick()">
-            <i
-              v-if="isMakingRequest"
-              class="fa fa-spinner fa-spin"
-              aria-hidden="true"
-            ></i>
+            @click="handleMergeButtonClick();"
+          >
+            <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
             {{ mergeButtonText }}
           </button>
           <button
@@ -263,26 +260,23 @@ export default {
             type="button"
             class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
             data-toggle="dropdown"
-            aria-label="Select merge moment">
-            <i
-              class="fa fa-chevron-down qa-merge-moment-dropdown"
-              aria-hidden="true"
-            ></i>
+            aria-label="Select merge moment"
+          >
+            <i class="fa fa-chevron-down qa-merge-moment-dropdown" aria-hidden="true"></i>
           </button>
           <ul
             v-if="shouldShowMergeOptionsDropdown"
             class="dropdown-menu dropdown-menu-right"
-            role="menu">
+            role="menu"
+          >
             <li>
               <a
                 class="merge_when_pipeline_succeeds qa-merge-when-pipeline-succeeds-option"
                 href="#"
-                @click.prevent="handleMergeButtonClick(true)">
+                @click.prevent="handleMergeButtonClick(true);"
+              >
                 <span class="media">
-                  <span
-                    class="merge-opt-icon"
-                    aria-hidden="true"
-                    v-html="successSvg"></span>
+                  <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span>
                   <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
                 </span>
               </a>
@@ -291,12 +285,10 @@ export default {
               <a
                 class="accept-merge-request qa-merge-immediately-option"
                 href="#"
-                @click.prevent="handleMergeButtonClick(false, true)">
+                @click.prevent="handleMergeButtonClick(false, true);"
+              >
                 <span class="media">
-                  <span
-                    class="merge-opt-icon"
-                    aria-hidden="true"
-                    v-html="warningSvg"></span>
+                  <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span>
                   <span class="media-body merge-opt-title">Merge immediately</span>
                 </span>
               </a>
@@ -311,18 +303,19 @@ export default {
                 v-model="removeSourceBranch"
                 :disabled="isRemoveSourceBranchButtonDisabled"
                 class="js-remove-source-branch-checkbox"
-                type="checkbox"/> Remove source branch
+                type="checkbox"
+              />
+              Remove source branch
             </label>
 
             <!-- Placeholder for EE extension of this component -->
             <squash-before-merge
               v-if="shouldShowSquashBeforeMerge"
               :mr="mr"
-              :is-merge-button-disabled="isMergeButtonDisabled" />
+              :is-merge-button-disabled="isMergeButtonDisabled"
+            />
 
-            <span
-              v-if="mr.ffOnlyEnabled"
-              class="js-fast-forward-message">
+            <span v-if="mr.ffOnlyEnabled" class="js-fast-forward-message">
               Fast-forward merge without a merge commit
             </span>
             <button
@@ -330,7 +323,8 @@ export default {
               :disabled="isMergeButtonDisabled"
               class="js-modify-commit-message-button btn btn-default btn-sm"
               type="button"
-              @click="toggleCommitMessageEditor">
+              @click="toggleCommitMessageEditor"
+            >
               Modify commit message
             </button>
           </template>
@@ -341,15 +335,9 @@ export default {
           </template>
         </div>
       </div>
-      <div
-        v-if="showCommitMessageEditor"
-        class="prepend-top-default commit-message-editor">
+      <div v-if="showCommitMessageEditor" class="prepend-top-default commit-message-editor">
         <div class="form-group clearfix">
-          <label
-            class="col-form-label"
-            for="commit-message">
-            Commit message
-          </label>
+          <label class="col-form-label" for="commit-message"> Commit message </label>
           <div class="col-sm-10">
             <div class="commit-message-container">
               <div class="max-width-marker"></div>
@@ -359,18 +347,14 @@ export default {
                 class="form-control js-commit-message"
                 required="required"
                 rows="14"
-                name="Commit message"></textarea>
+                name="Commit message"
+              ></textarea>
             </div>
             <p class="hint">
               Try to keep the first line under 52 characters and the others under 72
             </p>
             <div class="hint">
-              <a
-                href="#"
-                @click.prevent="updateCommitMessage"
-              >
-                {{ commitMessageLinkTitle }}
-              </a>
+              <a href="#" @click.prevent="updateCommitMessage"> {{ commitMessageLinkTitle }} </a>
             </div>
           </div>
         </div>
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 16c903c923f..8acca0d6481 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
@@ -11,14 +11,13 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{ s__(`mrWidget|The source branch HEAD has recently changed.
-Please reload the page and review the changes before merging`) }}
+        {{
+          s__(`mrWidget|The source branch HEAD has recently changed.
+Please reload the page and review the changes before merging`)
+        }}
       </span>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
index 25ad329e196..e71acf0d7dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
@@ -55,9 +55,7 @@ export default {
       rel="noopener noreferrer nofollow"
       data-container="body"
     >
-      <icon
-        name="question-o"
-      />
+      <icon name="question-o" />
     </a>
   </div>
 </template>
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 5eb2058a03b..a9fb40a4949 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
@@ -17,20 +17,17 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="true"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{ s__("mrWidget|There are unresolved discussions. Please resolve these discussions") }}
+        {{ s__('mrWidget|There are unresolved discussions. Please resolve these discussions') }}
       </span>
       <a
         v-if="mr.createIssueToResolveDiscussionsPath"
         :href="mr.createIssueToResolveDiscussionsPath"
         class="btn btn-default btn-sm js-create-issue"
       >
-        {{ s__("mrWidget|Create an issue to resolve them later") }}
+        {{ s__('mrWidget|Create an issue to resolve them later') }}
       </a>
     </div>
   </div>
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 9129fcbb918..7c322388d30 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,10 +43,7 @@ export default {
 
 <template>
   <div class="mr-widget-body media">
-    <status-icon
-      :show-disabled-button="Boolean(mr.removeWIPPath)"
-      status="warning"
-    />
+    <status-icon :show-disabled-button="Boolean(mr.removeWIPPath)" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
         This is a Work in Progress
@@ -56,7 +53,8 @@ export default {
           title="When this merge request is ready,
           remove the WIP: prefix from the title to allow it to be merged"
           aria-label="When this merge request is ready,
-          remove the WIP: prefix from the title to allow it to be merged">
+          remove the WIP: prefix from the title to allow it to be merged"
+        >
         </i>
       </span>
       <button
@@ -64,13 +62,10 @@ export default {
         :disabled="isMakingRequest"
         type="button"
         class="btn btn-default btn-sm js-remove-wip"
-        @click="removeWIP">
-        <i
-          v-if="isMakingRequest"
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true">
-        </i>
-        Resolve WIP status
+        @click="removeWIP"
+      >
+        <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"> </i> Resolve WIP
+        status
       </button>
     </div>
   </div>
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 3b840540657..a269c0a4e87 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
@@ -295,9 +295,7 @@ export default {
 </script>
 <template>
   <div class="mr-state-widget prepend-top-default">
-    <mr-widget-header
-      :mr="mr"
-    />
+    <mr-widget-header :mr="mr" />
     <mr-widget-pipeline
       v-if="shouldRenderPipelines"
       :pipeline="mr.pipeline"
@@ -322,17 +320,10 @@ export default {
       />
 
       <div class="mr-widget-section">
-        <component
-          :is="componentName"
-          :mr="mr"
-          :service="service"
-        />
+        <component :is="componentName" :mr="mr" :service="service" />
 
-        <section
-          v-if="mr.allowCollaboration"
-          class="mr-info-list mr-links"
-        >
-          {{ s__("mrWidget|Allows commits from members who can merge to the target branch") }}
+        <section v-if="mr.allowCollaboration" class="mr-info-list mr-links">
+          {{ s__('mrWidget|Allows commits from members who can merge to the target branch') }}
         </section>
 
         <mr-widget-related-links
@@ -341,16 +332,9 @@ export default {
           :related-links="mr.relatedLinks"
         />
 
-        <source-branch-removal-status
-          v-if="shouldRenderSourceBranchRemovalStatus"
-        />
-      </div>
-      <div
-        v-if="shouldRenderMergeHelp"
-        class="mr-widget-footer"
-      >
-        <mr-widget-merge-help />
+        <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
       </div>
+      <div v-if="shouldRenderMergeHelp" class="mr-widget-footer"><mr-widget-merge-help /></div>
     </div>
 
     <template v-if="shouldRenderMergedPipeline">
diff --git a/app/assets/javascripts/vue_shared/components/bar_chart.vue b/app/assets/javascripts/vue_shared/components/bar_chart.vue
index 690dd794ba4..4abf795f7bd 100644
--- a/app/assets/javascripts/vue_shared/components/bar_chart.vue
+++ b/app/assets/javascripts/vue_shared/components/bar_chart.vue
@@ -271,25 +271,17 @@ export default {
 };
 </script>
 <template>
-  <div
-    ref="svgContainer"
-    :class="activateGrabCursor"
-    class="svg-graph-container"
-  >
+  <div ref="svgContainer" :class="activateGrabCursor" class="svg-graph-container">
     <svg
       ref="baseSvg"
       :width="vpWidth"
       :height="vpHeight"
       :viewBox="svgViewBox"
-      :preserveAspectRatio="preserveAspectRatioType">
-      <g
-        ref="xAxis"
-        :transform="xAxisLocation"
-        class="x-axis"
-      />
+      :preserveAspectRatio="preserveAspectRatioType"
+    >
+      <g ref="xAxis" :transform="xAxisLocation" class="x-axis" />
       <g v-if="!isLoading">
-        <template
-          v-for="(data, index) in graphData">
+        <template v-for="(data, index) in graphData">
           <rect
             :key="index"
             v-tooltip
@@ -301,43 +293,24 @@ export default {
             :title="setTooltipTitle(data)"
             class="bar-rect"
             data-placement="top"
-            @mouseover="barHoveredIn(index)"
-            @mouseout="barHoveredOut(index)"
+            @mouseover="barHoveredIn(index);"
+            @mouseout="barHoveredOut(index);"
           />
         </template>
       </g>
-      <rect
-        :height="vbHeight + 100"
-        transform="translate(-100, -5)"
-        width="100"
-        fill="#fff"
-      />
+      <rect :height="vbHeight + 100" transform="translate(-100, -5)" width="100" fill="#fff" />
       <g class="y-axis-label">
-        <line
-          :x1="0"
-          :x2="0"
-          :y1="0"
-          :y2="vbHeight"
-          transform="translate(-35, 0)"
-          stroke="black"
-        />
-        <!--Get text length and change the height of this rect accordingly-->
+        <line :x1="0" :x2="0" :y1="0" :y2="vbHeight" transform="translate(-35, 0)" stroke="black" />
+        <!-- Get text length and change the height of this rect accordingly -->
         <rect
           :height="rectYAxisLabelDims.height"
           :transform="yAxisLabelRectTransform"
           :width="30"
           fill="#fff"
         />
-        <text
-          ref="yAxisLabel"
-          :transform="yAxisLabelTextTransform"
-        >
-          {{ yAxisLabel }}
-        </text>
+        <text ref="yAxisLabel" :transform="yAxisLabelTextTransform">{{ yAxisLabel }}</text>
       </g>
-      <g
-        class="y-axis"
-      />
+      <g class="y-axis" />
       <g v-if="showScrollIndicator">
         <rect
           :height="vbHeight + 100"
@@ -354,38 +327,24 @@ export default {
           class="animate-flicker"
         />
       </g>
-      <!--The line that shows up when the data elements surpass the available width -->
-      <g
-        v-if="showScrollIndicator"
-        :transform="scrollIndicatorTransform">
-        <rect
-          :height="vbHeight"
-          x="0"
-          y="0"
-          width="20"
-          fill="url(#shadow-gradient)"
-        />
+      <!-- The line that shows up when the data elements surpass the available width -->
+      <g v-if="showScrollIndicator" :transform="scrollIndicatorTransform">
+        <rect :height="vbHeight" x="0" y="0" width="20" fill="url(#shadow-gradient)" />
       </g>
-      <!--Left scroll indicator-->
-      <g
-        v-if="showLeftScrollIndicator"
-        transform="translate(0, 0)">
-        <rect
-          :height="vbHeight"
-          x="0"
-          y="0"
-          width="20"
-          fill="url(#left-shadow-gradient)"
-        />
+      <!-- Left scroll indicator -->
+      <g v-if="showLeftScrollIndicator" transform="translate(0, 0)">
+        <rect :height="vbHeight" x="0" y="0" width="20" fill="url(#left-shadow-gradient)" />
       </g>
       <svg-gradient
         :colors="gradientColors"
         :opacity="gradientOpacity"
-        identifier-name="shadow-gradient"/>
+        identifier-name="shadow-gradient"
+      />
       <svg-gradient
         :colors="inverseGradientColors"
         :opacity="inverseGradientOpacity"
-        identifier-name="left-shadow-gradient"/>
+        identifier-name="left-shadow-gradient"
+      />
     </svg>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue
index ccf802c456c..ddbb14ae812 100644
--- a/app/assets/javascripts/vue_shared/components/callout.vue
+++ b/app/assets/javascripts/vue_shared/components/callout.vue
@@ -17,11 +17,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    :class="`bs-callout bs-callout-${category}`"
-    role="alert"
-    aria-live="assertive"
-  >
+  <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
     {{ message }}
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index c5fbaf87b00..bb7710f708e 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -78,17 +78,8 @@ export default {
 </script>
 
 <template>
-  <span
-    v-gl-tooltip.right
-    :title="tooltipTitle"
-    class="file-changed-icon ml-auto"
-  >
-    <icon
-      v-if="showIcon"
-      :name="changedIcon"
-      :size="size"
-      :css-classes="changedIconClass"
-    />
+  <span v-gl-tooltip.right :title="tooltipTitle" class="file-changed-icon ml-auto">
+    <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
   </span>
 </template>
 
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 03f924ba99d..b8eb555106f 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -59,10 +59,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass">
-    <icon
-      :name="icon"
-      :size="size"
-    />
-  </span>
+  <span :class="cssClass"> <icon :name="icon" :size="size" /> </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 420bd25b496..ee685a4b8cd 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -111,44 +111,19 @@ export default {
   <div class="branch-commit">
     <template v-if="hasCommitRef && showBranch">
       <div class="icon-container">
-        <i
-          v-if="tag"
-          class="fa fa-tag"
-          aria-hidden="true"
-        >
-        </i>
-        <icon
-          v-if="!tag"
-          name="fork"
-        />
+        <i v-if="tag" class="fa fa-tag" aria-hidden="true"> </i> <icon v-if="!tag" name="fork" />
       </div>
 
-      <a
-        v-gl-tooltip
-        :href="commitRef.ref_url"
-        :title="commitRef.name"
-        class="ref-name"
-      >
+      <a v-gl-tooltip :href="commitRef.ref_url" :title="commitRef.name" class="ref-name">
         {{ commitRef.name }}
       </a>
     </template>
-    <icon
-      name="commit"
-      class="commit-icon js-commit-icon"
-    />
+    <icon name="commit" class="commit-icon js-commit-icon" />
 
-    <a
-      :href="commitUrl"
-      class="commit-sha"
-    >
-      {{ shortSha }}
-    </a>
+    <a :href="commitUrl" class="commit-sha"> {{ shortSha }} </a>
 
     <div class="commit-title flex-truncate-parent">
-      <span
-        v-if="title"
-        class="flex-truncate-child"
-      >
+      <span v-if="title" class="flex-truncate-child">
         <user-avatar-link
           v-if="hasAuthor"
           :link-href="author.path"
@@ -157,16 +132,9 @@ export default {
           :tooltip-text="author.username"
           class="avatar-image-container"
         />
-        <a
-          :href="commitUrl"
-          class="commit-row-message"
-        >
-          {{ title }}
-        </a>
-      </span>
-      <span v-else>
-        Can't find HEAD commit for this branch
+        <a :href="commitUrl" class="commit-row-message"> {{ title }} </a>
       </span>
+      <span v-else> Can't find HEAD commit for this branch </span>
     </div>
   </div>
 </template>
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 97bdd9915c5..c6d61d6ee62 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
@@ -39,17 +39,8 @@ export default {
           ({{ fileSizeReadable }})
         </template>
       </p>
-      <gl-link
-        :href="path"
-        class="btn btn-default"
-        rel="nofollow"
-        download
-        target="_blank">
-        <icon
-          :size="16"
-          name="download"
-          css-classes="float-left append-right-8"
-        />
+      <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
+        <icon :size="16" name="download" css-classes="float-left append-right-8" />
         {{ __('Download') }}
       </gl-link>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 05f9f960934..2ca933a37d2 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -80,21 +80,10 @@ export default {
 
 <template>
   <div>
-    <div
-      :class="innerCssClasses"
-      class="position-relative"
-    >
-      <img
-        ref="contentImg"
-        :src="path"
-        @load="onImgLoad"
-      />
-      <slot name="image-overlay"></slot>
+    <div :class="innerCssClasses" class="position-relative">
+      <img ref="contentImg" :src="path" @load="onImgLoad" /> <slot name="image-overlay"></slot>
     </div>
-    <p
-      v-if="renderInfo"
-      class="image-info"
-    >
+    <p v-if="renderInfo" class="image-info">
       <template v-if="hasFileSize">
         {{ fileSizeReadable }}
       </template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index a084cfdf612..c9915f7d685 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -78,13 +78,8 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="markdown-preview"
-    class="md md-previewer">
+  <div ref="markdown-preview" class="md md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
-    <div
-      v-else
-      v-html="previewContent">
-    </div>
+    <div v-else v-html="previewContent"></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
index 4d63296e332..2129f90d497 100644
--- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
@@ -84,67 +84,41 @@ export default {
 
 <template>
   <div class="modal-open">
-    <div
-      :id="id"
-      :class="id ? '' : 'd-block'"
-      class="modal"
-      role="dialog"
-      tabindex="-1"
-    >
-      <div
-        :class="modalDialogClass"
-        class="modal-dialog"
-        role="document"
-      >
+    <div :id="id" :class="id ? '' : 'd-block'" class="modal" role="dialog" tabindex="-1">
+      <div :class="modalDialogClass" class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <slot name="header">
-              <h4 class="modal-title float-left">
-                {{ title }}
-              </h4>
+              <h4 class="modal-title float-left">{{ title }}</h4>
               <button
                 type="button"
                 class="close float-right"
                 data-dismiss="modal"
                 aria-label="Close"
-                @click="emitCancel($event)"
+                @click="emitCancel($event);"
               >
                 <span aria-hidden="true">&times;</span>
               </button>
             </slot>
           </div>
           <div class="modal-body">
-            <slot
-              :text="text"
-              name="body"
-            >
+            <slot :text="text" name="body">
               <p>{{ text }}</p>
             </slot>
           </div>
-          <div
-            v-if="!hideFooter"
-            class="modal-footer"
-          >
+          <div v-if="!hideFooter" class="modal-footer">
             <button
               :class="btnCancelKindClass"
               type="button"
               class="btn"
               data-dismiss="modal"
-              @click="emitCancel($event)"
+              @click="emitCancel($event);"
             >
               {{ closeButtonLabel }}
             </button>
 
-            <slot
-              v-if="secondaryButtonLabel"
-              name="secondary-button"
-            >
-              <button
-                v-if="secondaryButtonLabel"
-                type="button"
-                class="btn"
-                data-dismiss="modal"
-              >
+            <slot v-if="secondaryButtonLabel" name="secondary-button">
+              <button v-if="secondaryButtonLabel" type="button" class="btn" data-dismiss="modal">
                 {{ secondaryButtonLabel }}
               </button>
             </slot>
@@ -156,7 +130,7 @@ export default {
               type="button"
               class="btn js-primary-button"
               data-dismiss="modal"
-              @click="emitSubmit($event)"
+              @click="emitSubmit($event);"
             >
               {{ primaryButtonLabel }}
             </button>
@@ -164,10 +138,6 @@ export default {
         </div>
       </div>
     </div>
-    <div
-      v-if="!id"
-      class="modal-backdrop fade show"
-    >
-    </div>
+    <div v-if="!id" class="modal-backdrop fade show"></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index 9c3f3e7f7a9..bb2e0e12c11 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -60,9 +60,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="viewer"
-    class="diff-file preview-container">
+  <div v-if="viewer" class="diff-file preview-container">
     <component
       :is="viewer"
       :diff-mode="diffMode"
@@ -70,11 +68,7 @@ export default {
       :old-path="fullOldPath"
       :project-path="projectPath"
     >
-      <slot
-        slot="image-overlay"
-        name="image-overlay"
-      >
-      </slot>
+      <slot slot="image-overlay" name="image-overlay"> </slot>
     </component>
     <slot></slot>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
index 50389b6ae63..40ae9ed6c02 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
@@ -32,37 +32,19 @@ export default {
 <template>
   <div class="diff-file-container">
     <div class="diff-viewer">
-      <div
-        v-if="diffMode === $options.diffModes.replaced"
-        class="two-up view row">
+      <div v-if="diffMode === $options.diffModes.replaced" class="two-up view row">
         <div class="col-sm-6 deleted">
-          <download-viewer
-            :path="oldPath"
-            :project-path="projectPath"
-          />
+          <download-viewer :path="oldPath" :project-path="projectPath" />
         </div>
         <div class="col-sm-6 added">
-          <download-viewer
-            :path="newPath"
-            :project-path="projectPath"
-          />
+          <download-viewer :path="newPath" :project-path="projectPath" />
         </div>
       </div>
-      <div
-        v-else-if="diffMode === $options.diffModes.new"
-        class="added">
-        <download-viewer
-          :path="newPath"
-          :project-path="projectPath"
-        />
+      <div v-else-if="diffMode === $options.diffModes.new" class="added">
+        <download-viewer :path="newPath" :project-path="projectPath" />
       </div>
-      <div
-        v-else
-        class="deleted">
-        <download-viewer
-          :path="oldPath"
-          :project-path="projectPath"
-        />
+      <div v-else class="deleted">
+        <download-viewer :path="oldPath" :project-path="projectPath" />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index cd0c1e850af..f085ef35ccc 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -100,17 +100,19 @@ export default {
   <div class="onion-skin view">
     <div
       :style="{
-        'width': onionMaxPixelWidth,
-        'height': onionMaxPixelHeight,
+        width: onionMaxPixelWidth,
+        height: onionMaxPixelHeight,
         'user-select': dragging === true ? 'none' : '',
       }"
-      class="onion-skin-frame">
+      class="onion-skin-frame"
+    >
       <div
         :style="{
-          'width': onionMaxPixelWidth,
-          'height': onionMaxPixelHeight,
+          width: onionMaxPixelWidth,
+          height: onionMaxPixelHeight,
         }"
-        class="frame deleted">
+        class="frame deleted"
+      >
         <image-viewer
           key="onionOldImg"
           :render-info="false"
@@ -121,36 +123,25 @@ export default {
       <div
         ref="addedFrame"
         :style="{
-          'opacity': onionOpacity,
-          'width': onionMaxPixelWidth,
-          'height': onionMaxPixelHeight,
+          opacity: onionOpacity,
+          width: onionMaxPixelWidth,
+          height: onionMaxPixelHeight,
         }"
-        class="added frame">
+        class="added frame"
+      >
         <image-viewer
           key="onionNewImg"
           :render-info="false"
           :path="newPath"
           @imgLoaded="onionNewImgLoaded"
         >
-          <slot
-            slot="image-overlay"
-            name="image-overlay"
-          >
-          </slot>
+          <slot slot="image-overlay" name="image-overlay"> </slot>
         </image-viewer>
       </div>
       <div class="controls">
         <div class="transparent"></div>
-        <div
-          ref="dragTrack"
-          class="drag-track"
-          @mousedown="startDrag"
-          @mouseup="stopDrag">
-          <div
-            ref="dragger"
-            :style="{ 'left': onionDraggerPixelPos }"
-            class="dragger">
-          </div>
+        <div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag">
+          <div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div>
         </div>
         <div class="opaque"></div>
       </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index 57f373fca21..1c970b72a66 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -104,9 +104,7 @@ export default {
 
 <template>
   <div class="swipe view">
-    <div
-      ref="swipeFrame"
-      class="swipe-frame">
+    <div ref="swipeFrame" class="swipe-frame">
       <image-viewer
         key="swipeOldImg"
         ref="swipeOldImg"
@@ -118,7 +116,7 @@ export default {
       <div
         ref="swipeWrap"
         :style="{
-          width: `${swipeWrapWidth}%`
+          width: `${swipeWrapWidth}%`,
         }"
         class="swipe-wrap"
       >
@@ -127,26 +125,22 @@ export default {
           :render-info="false"
           :path="newPath"
           :style="{
-            width: swipeMaxPixelWidth 
+            width: swipeMaxPixelWidth,
           }"
           class="frame added"
           @imgLoaded="swipeNewImgLoaded"
         >
-          <slot
-            slot="image-overlay"
-            name="image-overlay"
-          >
-          </slot>
+          <slot slot="image-overlay" name="image-overlay"> </slot>
         </image-viewer>
       </div>
       <span
         ref="swipeBar"
-        :style="{ 'left': swipeBarPixelPos }"
+        :style="{ left: swipeBarPixelPos }"
         class="swipe-bar"
         @mousedown="startDrag"
-        @mouseup="stopDrag">
-        <span class="top-handle"></span>
-        <span class="bottom-handle"></span>
+        @mouseup="stopDrag"
+      >
+        <span class="top-handle"></span> <span class="bottom-handle"></span>
       </span>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
index aafa88f4ff1..a17fc022195 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -32,11 +32,7 @@ export default {
       :inner-css-classes="['frame', 'added']"
       class="wrap w-50"
     >
-      <slot
-        slot="image-overlay"
-        name="image-overlay"
-      >
-      </slot>
+      <slot slot="image-overlay" name="image-overlay"> </slot>
     </image-viewer>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
index d7f24c1afc5..d5fda7e4ed3 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -63,65 +63,54 @@ export default {
 
 <template>
   <div class="diff-file-container">
-    <div
-      v-if="diffMode === $options.diffModes.replaced"
-      class="diff-viewer">
+    <div v-if="diffMode === $options.diffModes.replaced" class="diff-viewer">
       <div class="image js-replaced-image">
-        <component
-          :is="imageViewComponent"
-          v-bind="$props"
-        >
-          <slot
-            slot="image-overlay"
-            name="image-overlay"
-          >
-          </slot>
+        <component :is="imageViewComponent" v-bind="$props">
+          <slot slot="image-overlay" name="image-overlay"> </slot>
         </component>
       </div>
       <div class="view-modes">
         <ul class="view-modes-menu">
           <li
             :class="{
-              active: mode === $options.imageViewMode.twoup
+              active: mode === $options.imageViewMode.twoup,
             }"
-            @click="changeMode($options.imageViewMode.twoup)">
+            @click="changeMode($options.imageViewMode.twoup);"
+          >
             {{ s__('ImageDiffViewer|2-up') }}
           </li>
           <li
             :class="{
-              active: mode === $options.imageViewMode.swipe
+              active: mode === $options.imageViewMode.swipe,
             }"
-            @click="changeMode($options.imageViewMode.swipe)">
+            @click="changeMode($options.imageViewMode.swipe);"
+          >
             {{ s__('ImageDiffViewer|Swipe') }}
           </li>
           <li
             :class="{
-              active: mode === $options.imageViewMode.onion
+              active: mode === $options.imageViewMode.onion,
             }"
-            @click="changeMode($options.imageViewMode.onion)">
+            @click="changeMode($options.imageViewMode.onion);"
+          >
             {{ s__('ImageDiffViewer|Onion skin') }}
           </li>
         </ul>
       </div>
     </div>
-    <div
-      v-else
-      class="diff-viewer"
-    >
+    <div v-else class="diff-viewer">
       <div class="image">
         <image-viewer
           :path="imagePath"
-          :inner-css-classes="['frame', {
-            'added': isNew,
-            'deleted': diffMode === $options.diffModes.deleted
-          }]"
+          :inner-css-classes="[
+            'frame',
+            {
+              added: isNew,
+              deleted: diffMode === $options.diffModes.deleted,
+            },
+          ]"
         >
-          <slot
-            v-if="isNew || isRenamed"
-            slot="image-overlay"
-            name="image-overlay"
-          >
-          </slot>
+          <slot v-if="isNew || isRenamed" slot="image-overlay" name="image-overlay"> </slot>
         </image-viewer>
       </div>
     </div>
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 0f4effda79f..22f370c4bca 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -34,30 +34,13 @@ export default {
     data-toggle="dropdown"
     aria-expanded="false"
   >
-    <gl-loading-icon
-      v-show="isLoading"
-      :inline="true"
-    />
+    <gl-loading-icon v-show="isLoading" :inline="true" />
     <template>
-      <slot
-        v-if="$slots.default"
-      ></slot>
-      <span
-        v-else
-        class="dropdown-toggle-text"
-      >
-        {{ toggleText }}
-      </span>
+      <slot v-if="$slots.default"></slot>
+      <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
     </template>
-    <span
-      v-show="!isLoading"
-      class="dropdown-toggle-icon"
-    >
-      <i
-        class="fa fa-chevron-down"
-        aria-hidden="true"
-        data-hidden="true"
-      ></i>
+    <span v-show="!isLoading" class="dropdown-toggle-icon">
+      <i class="fa fa-chevron-down" aria-hidden="true" data-hidden="true"></i>
     </span>
   </button>
 </template>
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 b7a4613bdd2..afde0c81580 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
@@ -14,9 +14,5 @@ export default {
 </script>
 
 <template>
-  <input
-    :name="name"
-    :value="value"
-    type="hidden"
-  />
+  <input :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 7f1912f6405..c01c7cc4ccc 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
@@ -29,12 +29,7 @@ export default {
       type="search"
       autocomplete="off"
     />
-    <i
-      class="fa fa-search dropdown-input-search"
-      aria-hidden="true"
-      data-hidden="true"
-    >
-    </i>
+    <i class="fa fa-search dropdown-input-search" aria-hidden="true" data-hidden="true"> </i>
     <i
       class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index e6e92594b65..d64ab774431 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -44,14 +44,10 @@ export default {
       :aria-label="ariaLabel"
       type="button"
       class="text-expander btn-blank"
-      @click="onClick">
-      <icon
-        :size="12"
-        name="ellipsis_h"
-      />
+      @click="onClick"
+    >
+      <icon :size="12" name="ellipsis_h" />
     </button>
-    <span v-if="!isCollapsed">
-      <slot name="expanded"></slot>
-    </span>
+    <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 545be568ad3..b69ecc1dce6 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -72,21 +72,10 @@ export default {
 </script>
 <template>
   <span>
-    <svg
-      v-if="!loading && !folder"
-      :class="[iconSizeClass, cssClasses]"
-    >
-      <use v-bind="{ 'xlink:href':spriteHref }" />
+    <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
+      <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
-    <icon
-      v-if="!loading && folder"
-      :name="folderIconName"
-      :size="size"
-      css-classes="folder-icon"
-    />
-    <gl-loading-icon
-      v-if="loading"
-      :inline="true"
-    />
+    <icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" />
+    <gl-loading-icon v-if="loading" :inline="true" />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 2d89a156117..9e713673678 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -161,17 +161,11 @@ export default {
       class="file-row"
       role="button"
       @click="clickFile"
-      @mouseover="toggleHover(true)"
-      @mouseout="toggleHover(false)"
+      @mouseover="toggleHover(true);"
+      @mouseout="toggleHover(false);"
     >
-      <div
-        class="file-row-name-container"
-      >
-        <span
-          ref="textOutput"
-          :style="levelIndentation"
-          class="file-row-name str-truncated"
-        >
+      <div class="file-row-name-container">
+        <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
           <file-icon
             v-if="!showChangedIcon || file.type === 'tree'"
             :file-name="file.name"
@@ -180,12 +174,7 @@ export default {
             :opened="file.opened"
             :size="16"
           />
-          <changed-file-icon
-            v-else
-            :file="file"
-            :size="16"
-            class="append-right-5"
-          />
+          <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
           {{ outputText }}
         </span>
         <component
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
index 388a2f4ca36..834c39a5ee0 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -82,16 +82,8 @@ export default {
 <template>
   <div class="dropdown">
     <div class="btn-group">
-      <slot
-        name="mainAction"
-        :class-name="className"
-      >
-        <button
-          type="button"
-          :class="className"
-        >
-          {{ title }}
-        </button>
+      <slot name="mainAction" :class-name="className">
+        <button type="button" :class="className">{{ title }}</button>
       </slot>
 
       <button
@@ -103,10 +95,7 @@ export default {
         aria-expanded="false"
         aria-label="Expand dropdown"
       >
-        <icon
-          name="angle-down"
-          :size="12"
-        />
+        <icon name="angle-down" :size="12" />
       </button>
       <div class="dropdown-menu dropdown-menu-right">
         <div class="dropdown-input">
@@ -117,25 +106,13 @@ export default {
             placeholder="Filter"
             class="js-filtered-dropdown-input dropdown-input-field"
           />
-          <icon
-            class="dropdown-input-search"
-            name="search"
-          />
+          <icon class="dropdown-input-search" name="search" />
         </div>
 
         <div class="dropdown-content">
           <ul>
-            <li
-              v-for="(result, i) in filteredResults"
-              :key="i"
-              class="js-filtered-dropdown-result"
-            >
-              <slot
-                name="result"
-                :result="result"
-              >
-                {{ result[filterKey] }}
-              </slot>
+            <li v-for="(result, i) in filteredResults" :key="i" class="js-filtered-dropdown-result">
+              <slot name="result" :result="result"> {{ result[filterKey] }} </slot>
             </li>
           </ul>
         </div>
diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
index 97f7998f461..c1aace31fb2 100644
--- a/app/assets/javascripts/vue_shared/components/gl_countdown.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
@@ -43,11 +43,5 @@ export default {
 </script>
 
 <template>
-  <time
-    v-gl-tooltip
-    :datetime="endDateString"
-    :title="endDateString"
-  >
-    {{ remainingTime }}
-  </time>
+  <time v-gl-tooltip :datetime="endDateString" :title="endDateString"> {{ remainingTime }} </time>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index b5444d43ded..faf4181bbaf 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -68,40 +68,27 @@ export default {
 </script>
 
 <template>
-  <div
-    :id="id"
-    class="modal fade"
-    tabindex="-1"
-    role="dialog"
-  >
-    <div
-      :class="modalSizeClass"
-      class="modal-dialog"
-      role="document"
-    >
+  <div :id="id" class="modal fade" tabindex="-1" role="dialog">
+    <div :class="modalSizeClass" class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <slot name="header">
             <h4 class="modal-title">
-              <slot name="title">
-                {{ headerTitleText }}
-              </slot>
+              <slot name="title"> {{ headerTitleText }} </slot>
             </h4>
             <button
               :aria-label="s__('Modal|Close')"
               type="button"
               class="close js-modal-close-action"
               data-dismiss="modal"
-              @click="emitCancel($event)"
+              @click="emitCancel($event);"
             >
               <span aria-hidden="true">&times;</span>
             </button>
           </slot>
         </div>
 
-        <div class="modal-body">
-          <slot></slot>
-        </div>
+        <div class="modal-body"><slot></slot></div>
 
         <div class="modal-footer">
           <slot name="footer">
@@ -109,7 +96,7 @@ export default {
               type="button"
               class="btn js-modal-cancel-action qa-modal-cancel-button"
               data-dismiss="modal"
-              @click="emitCancel($event)"
+              @click="emitCancel($event);"
             >
               {{ s__('Modal|Cancel') }}
             </button>
@@ -118,7 +105,7 @@ export default {
               type="button"
               class="btn js-modal-primary-action qa-modal-primary-button"
               data-dismiss="modal"
-              @click="emitSubmit($event)"
+              @click="emitSubmit($event);"
             >
               {{ footerPrimaryButtonText }}
             </button>
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 1a91a8b81e3..c830f5b49b6 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -83,12 +83,9 @@ export default {
 <template>
   <header class="page-content-header ci-header-container">
     <section class="header-main-content">
-
       <ci-icon-badge :status="status" />
 
-      <strong>
-        {{ itemName }} #{{ itemId }}
-      </strong>
+      <strong> {{ itemName }} #{{ itemId }} </strong>
 
       <template v-if="shouldRenderTriggeredLabel">
         triggered
@@ -108,7 +105,6 @@ export default {
           :title="user.email"
           class="js-user-link commit-committer-link"
         >
-
           <user-avatar-image
             :img-src="user.avatar_url"
             :img-alt="userAvatarAltText"
@@ -118,19 +114,12 @@ export default {
 
           {{ user.name }}
         </gl-link>
-        <span
-          v-if="user.status_tooltip_html"
-          v-html="user.status_tooltip_html"></span>
+        <span v-if="user.status_tooltip_html" v-html="user.status_tooltip_html"></span>
       </template>
     </section>
 
-    <section
-      v-if="actions.length"
-      class="header-action-buttons"
-    >
-      <template
-        v-for="(action, i) in actions"
-      >
+    <section v-if="actions.length" class="header-action-buttons">
+      <template v-for="(action, i) in actions">
         <gl-link
           v-if="action.type === 'link'"
           :key="i"
@@ -159,7 +148,7 @@ export default {
           :class="action.cssClass"
           container-class="d-inline"
           :label="action.label"
-          @click="onClickAction(action)"
+          @click="onClickAction(action);"
         />
       </template>
     </section>
@@ -170,12 +159,7 @@ export default {
 sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
       @click="onClickSidebarButton"
     >
-      <i
-        class="fa fa-angle-double-left"
-        aria-hidden="true"
-        aria-labelledby="toggleSidebar"
-      >
-      </i>
+      <i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i>
     </gl-button>
   </header>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue
index 540df392e4e..a57fa09f753 100644
--- a/app/assets/javascripts/vue_shared/components/help_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/help_popover.vue
@@ -43,11 +43,7 @@ export default {
 };
 </script>
 <template>
-  <button
-    type="button"
-    class="btn btn-blank btn-transparent btn-help"
-    tabindex="0"
-  >
+  <button type="button" class="btn btn-blank btn-transparent btn-help" tabindex="0">
     <icon name="question" />
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index a25841fc02f..41c4c861566 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -106,6 +106,6 @@ export default {
     :tabindex="tabIndex"
     aria-hidden="true"
   >
-    <use v-bind="{ 'xlink:href':spriteHref }"/>
+    <use v-bind="{ 'xlink:href': spriteHref }" />
   </svg>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 0862f2c0cff..d42f0d8192c 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -29,9 +29,7 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="[sizeClass, identiconBackgroundClass]"
-    class="avatar identicon">
+  <div :class="[sizeClass, identiconBackgroundClass]" 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 dc88749c18f..e92babc499b 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -32,17 +32,14 @@ export default {
 </script>
 <template>
   <div class="issuable-note-warning">
-    <icon
-      v-if="!isLockedAndConfidential"
-      :name="warningIcon"
-      :size="16"
-      class="icon inline"
-    />
+    <icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential">
       {{ __('This issue is confidential and locked.') }}
-      {{ __(`People without permission will never
-get a notification and won't be able to comment.`) }}
+      {{
+        __(`People without permission will never
+get a notification and won't be able to comment.`)
+      }}
     </span>
 
     <span v-else-if="isConfidential">
@@ -51,8 +48,7 @@ get a notification and won't be able to comment.`) }}
     </span>
 
     <span v-else-if="isLocked">
-      {{ __('This issue is locked.') }}
-      {{ __('Only project members can comment.') }}
+      {{ __('This issue is locked.') }} {{ __('Only project members can comment.') }}
     </span>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 9bae8a32a8c..7a53d053eec 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -52,30 +52,20 @@ export default {
 </script>
 
 <template>
-  <button
-    :class="containerClass"
-    :disabled="loading || disabled"
-    type="button"
-    @click="onClick"
-  >
+  <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick">
     <transition name="fade">
       <gl-loading-icon
         v-if="loading"
         :inline="true"
         :class="{
-          'append-right-5': label
+          'append-right-5': label,
         }"
         class="js-loading-button-icon"
       />
     </transition>
     <transition name="fade">
       <slot>
-        <span
-          v-if="label"
-          class="js-loading-button-label"
-        >
-          {{ label }}
-        </span>
+        <span v-if="label" class="js-loading-button-label"> {{ label }} </span>
       </slot>
     </transition>
   </button>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 4687de62614..21d6519191f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -142,27 +142,18 @@ export default {
   <div
     ref="gl-form"
     :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
-    class="md-area js-vue-markdown-field">
+    class="md-area js-vue-markdown-field"
+  >
     <markdown-header
       :preview-markdown="previewMarkdown"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
     />
-    <div
-      v-show="!previewMarkdown"
-      class="md-write-holder"
-    >
+    <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
-        <a
-          class="zen-control zen-control-leave js-zen-leave"
-          href="#"
-          aria-label="Enter zen mode"
-        >
-          <icon
-            :size="32"
-            name="screen-normal"
-          />
+        <a class="zen-control zen-control-leave js-zen-leave" href="#" aria-label="Enter zen mode">
+          <icon :size="32" name="screen-normal" />
         </a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"
@@ -171,42 +162,19 @@ export default {
         />
       </div>
     </div>
-    <div
-      v-show="previewMarkdown"
-      class="md md-preview-holder md-preview js-vue-md-preview"
-    >
-      <div
-        ref="markdown-preview"
-        v-html="markdownPreview"
-      >
-      </div>
-      <span v-if="markdownPreviewLoading">
-        Loading...
-      </span>
+    <div v-show="previewMarkdown" class="md md-preview-holder md-preview js-vue-md-preview">
+      <div ref="markdown-preview" v-html="markdownPreview"></div>
+      <span v-if="markdownPreviewLoading"> Loading... </span>
     </div>
     <template v-if="previewMarkdown && !markdownPreviewLoading">
-      <div
-        v-if="referencedCommands"
-        class="referenced-commands"
-        v-html="referencedCommands"
-      >
-      </div>
-      <div
-        v-if="shouldShowReferencedUsers"
-        class="referenced-users"
-      >
+      <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
+      <div v-if="shouldShowReferencedUsers" class="referenced-users">
         <span>
-          <i
-            class="fa fa-exclamation-triangle"
-            aria-hidden="true"
-          >
-          </i>
-          You are about to add
+          <i class="fa fa-exclamation-triangle" aria-hidden="true"> </i> You are about to add
           <strong>
-            <span class="js-referenced-users-count">
-              {{ referencedUsers.length }}
-            </span>
-          </strong> people to the discussion. Proceed with caution.
+            <span class="js-referenced-users-count"> {{ referencedUsers.length }} </span>
+          </strong>
+          people to the discussion. Proceed with caution.
         </span>
       </div>
     </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index ca9e57a9b00..4c4ba537065 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -64,58 +64,31 @@ export default {
 <template>
   <div class="md-header">
     <ul class="nav-links clearfix">
-      <li
-        :class="{ active: !previewMarkdown }"
-        class="md-header-tab"
-      >
+      <li :class="{ active: !previewMarkdown }" class="md-header-tab">
         <button
           class="js-write-link"
           tabindex="-1"
           type="button"
-          @click="writeMarkdownTab($event)"
+          @click="writeMarkdownTab($event);"
         >
           Write
         </button>
       </li>
-      <li
-        :class="{ active: previewMarkdown }"
-        class="md-header-tab"
-      >
+      <li :class="{ active: previewMarkdown }" class="md-header-tab">
         <button
           class="js-preview-link js-md-preview-button"
           tabindex="-1"
           type="button"
-          @click="previewMarkdownTab($event)"
+          @click="previewMarkdownTab($event);"
         >
           Preview
         </button>
       </li>
-      <li
-        :class="{ active: !previewMarkdown }"
-        class="md-header-toolbar"
-      >
-        <toolbar-button
-          tag="**"
-          button-title="Add bold text"
-          icon="bold"
-        />
-        <toolbar-button
-          tag="*"
-          button-title="Add italic text"
-          icon="italic"
-        />
-        <toolbar-button
-          :prepend="true"
-          tag="> "
-          button-title="Insert a quote"
-          icon="quote"
-        />
-        <toolbar-button
-          tag="`"
-          tag-block="```"
-          button-title="Insert code"
-          icon="code"
-        />
+      <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
+        <toolbar-button tag="**" button-title="Add bold text" icon="bold" />
+        <toolbar-button tag="*" button-title="Add italic text" icon="italic" />
+        <toolbar-button :prepend="true" tag="> " button-title="Insert a quote" icon="quote" />
+        <toolbar-button tag="`" tag-block="```" button-title="Insert code" icon="code" />
         <toolbar-button
           tag="[{text}](url)"
           tag-select="url"
@@ -155,9 +128,7 @@ export default {
           title="Go full screen"
           type="button"
         >
-          <icon
-            name="screen-full"
-          />
+          <icon name="screen-full" />
         </button>
       </li>
     </ul>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 3cb48023002..3b57b5e8da4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -33,92 +33,39 @@ export default {
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link
-          :href="markdownDocsPath"
-          target="_blank"
-          tabindex="-1"
-        >
+        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">
           Markdown is supported
         </gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link
-          :href="markdownDocsPath"
-          target="_blank"
-          tabindex="-1"
-        >
-          Markdown
-        </gl-link>
+        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"> Markdown </gl-link>
         and
-        <gl-link
-          :href="quickActionsDocsPath"
-          target="_blank"
-          tabindex="-1"
-        >
+        <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">
           quick actions
         </gl-link>
         are supported
       </template>
     </div>
-    <span
-      v-if="canAttachFile"
-      class="uploading-container"
-    >
+    <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
-        <i
-          class="fa fa-file-image-o toolbar-button-icon"
-          aria-hidden="true"
-        >
-        </i>
-        <span class="attaching-file-message"></span>
-        <span class="uploading-progress">0%</span>
+        <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i>
+        <span class="attaching-file-message"></span> <span class="uploading-progress">0%</span>
         <span class="uploading-spinner">
-          <i
-            class="fa fa-spinner fa-spin toolbar-button-icon"
-            aria-hidden="true"
-          >
-          </i>
+          <i class="fa fa-spinner fa-spin toolbar-button-icon" aria-hidden="true"> </i>
         </span>
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
-          <i
-            class="fa fa-file-image-o toolbar-button-icon"
-            aria-hidden="true"
-          >
-          </i>
+          <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i>
         </span>
         <span class="uploading-error-message"></span>
-        <button
-          class="retry-uploading-link"
-          type="button"
-        >
-          Try again
-        </button>
-        or
-        <button
-          class="attach-new-file markdown-selector"
-          type="button"
-        >
-          attach a new file
-        </button>
+        <button class="retry-uploading-link" type="button">Try again</button> or
+        <button class="attach-new-file markdown-selector" type="button">attach a new file</button>
       </span>
-      <button
-        class="markdown-selector button-attach-file"
-        tabindex="-1"
-        type="button"
-      >
-        <i
-          class="fa fa-file-image-o toolbar-button-icon"
-          aria-hidden="true"
-        >
-        </i>
-        Attach a file
+      <button class="markdown-selector button-attach-file" tabindex="-1" type="button">
+        <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> Attach a file
       </button>
-      <button
-        class="btn btn-default btn-sm hide button-cancel-uploading-files"
-        type="button"
-      >
+      <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button">
         Cancel
       </button>
     </span>
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 13af4b627de..a6d2cecdf7e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -55,8 +55,6 @@ export default {
     tabindex="-1"
     data-container="body"
   >
-    <icon
-      :name="icon"
-    />
+    <icon :name="icon" />
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index 964dedb38c4..16f4ff068f6 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.vue
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -118,17 +118,10 @@ export default {
       :width="width"
       :height="height"
       class="has-tooltip"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        :d="pathD"
-        :viewBox="pathViewBox"
-      />
-      <circle
-        :cx="dotX"
-        :cy="dotY"
-        r="1.5"
-        transform="translate(0 -1)"
-      />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path :d="pathD" :viewBox="pathViewBox" />
+      <circle :cx="dotX" :cy="dotY" r="1.5" transform="translate(0 -1)" />
     </svg>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index 99d61b5639d..09a64502819 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -58,19 +58,10 @@ export default {
         active: tab.isActive,
       }"
     >
-      <a
-        :class="`js-${scope}-tab-${tab.scope}`"
-        role="button"
-        @click="onTabClick(tab)"
-      >
+      <a :class="`js-${scope}-tab-${tab.scope}`" role="button" @click="onTabClick(tab);">
         {{ tab.name }}
 
-        <span
-          v-if="shouldRenderBadge(tab.count)"
-          class="badge badge-pill"
-        >
-          {{ tab.count }}
-        </span>
+        <span v-if="shouldRenderBadge(tab.count)" class="badge badge-pill"> {{ tab.count }} </span>
       </a>
     </li>
   </ul>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index dcad79e521d..b1faebf409b 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -46,9 +46,7 @@ export default {
           :img-size="40"
         />
       </div>
-      <div
-        :class="{ discussion: !note.individual_note }"
-        class="timeline-content">
+      <div :class="{ discussion: !note.individual_note }" class="timeline-content">
         <div class="note-header">
           <div class="note-header-info">
             <a :href="getUserData.path">
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index 2dcd161b4fb..c6cf4661222 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -12,13 +12,10 @@ export default {
 <template>
   <li class="timeline-entry note note-wrapper">
     <div class="timeline-entry-inner">
-      <div class="timeline-icon">
-      </div>
+      <div class="timeline-icon"></div>
       <div class="timeline-content">
         <div class="note-header"></div>
-        <div class="note-body">
-          <gl-skeleton-loading />
-        </div>
+        <div class="note-body"><gl-skeleton-loading /></div>
       </div>
     </div>
   </li>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 6a44e6a29ed..fb86262d0b4 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -76,19 +76,13 @@ export default {
   <li
     :id="noteAnchorId"
     :class="{ target: isTargetNote }"
-    class="note system-note timeline-entry note-wrapper">
+    class="note system-note timeline-entry note-wrapper"
+  >
     <div class="timeline-entry-inner">
-      <div
-        class="timeline-icon"
-        v-html="iconHtml">
-      </div>
+      <div class="timeline-icon" v-html="iconHtml"></div>
       <div class="timeline-content">
         <div class="note-header">
-          <note-header
-            :author="note.author"
-            :created-at="note.created_at"
-            :note-id="note.id"
-          >
+          <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
             <span v-html="actionTextHtml"></span>
           </note-header>
         </div>
@@ -96,24 +90,14 @@ export default {
           <div
             :class="{
               'system-note-commit-list': hasMoreCommits,
-              'hide-shade': expanded
+              'hide-shade': expanded,
             }"
             class="note-text"
             v-html="note.note_html"
           ></div>
-          <div
-            v-if="hasMoreCommits"
-            class="flex-list"
-          >
-            <div
-              class="system-note-commit-list-toggler flex-row"
-              @click="expanded = !expanded"
-            >
-              <icon
-                :name="toggleIcon"
-                :size="8"
-                class="append-right-5"
-              />
+          <div v-if="hasMoreCommits" class="flex-list">
+            <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;">
+              <icon :name="toggleIcon" :size="8" class="append-right-5" />
               <span>Toggle commit list</span>
             </div>
           </div>
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 26c99aecae4..8bdb5bf22c2 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -62,20 +62,9 @@ export default {
 <template>
   <div class="pikaday-container">
     <div class="dropdown open">
-      <button
-        type="button"
-        class="dropdown-menu-toggle"
-        data-toggle="dropdown"
-        @click="toggled"
-      >
-        <span class="dropdown-toggle-text">
-          {{ label }}
-        </span>
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+      <button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled">
+        <span class="dropdown-toggle-text"> {{ label }} </span>
+        <i class="fa fa-chevron-down" aria-hidden="true"> </i>
       </button>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
index 17927fabbcc..b399c232937 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/default.vue
@@ -26,10 +26,7 @@ export default {
 </script>
 
 <template>
-  <span
-    :class="sizeClass"
-    class="avatar-container project-avatar"
-  >
+  <span :class="sizeClass" class="avatar-container project-avatar">
     <project-avatar-image
       v-if="project.avatar_url"
       :link-href="project.path"
@@ -37,11 +34,6 @@ export default {
       :img-alt="project.name"
       :img-size="size"
     />
-    <identicon
-      v-else
-      :entity-id="project.id"
-      :entity-name="project.name"
-      :size-class="sizeClass"
-    />
+    <identicon v-else :entity-id="project.id" :entity-name="project.name" :size-class="sizeClass" />
   </span>
 </template>
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 1a2fd2ad985..e77b9ddc7ba 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -87,7 +87,7 @@ export default {
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
-      [cssClasses]: true
+      [cssClasses]: true,
     }"
     :src="resultantSrcAttribute"
     :width="size"
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 09394847b10..1c6c3fc4734 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -73,14 +73,8 @@ export default {
     @cancel="close"
   >
     <div slot="body">
-      <p>
-        {{ __('We want to be sure it is you, please confirm you are not a robot.') }}
-      </p>
-      <div
-        ref="recaptcha"
-        v-html="html"
-      >
-      </div>
+      <p>{{ __('We want to be sure it is you, please confirm you are not a robot.') }}</p>
+      <div ref="recaptcha" v-html="html"></div>
     </div>
   </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
index 5841db52704..cc24fedceed 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
@@ -47,16 +47,9 @@ export default {
     data-boundary="viewport"
     @click="click"
   >
-    <i
-      v-if="showIcon"
-      class="fa fa-calendar"
-      aria-hidden="true"
-    >
-    </i>
+    <i v-if="showIcon" class="fa fa-calendar" aria-hidden="true"> </i>
     <slot>
-      <span>
-        {{ text }}
-      </span>
+      <span> {{ text }} </span>
     </slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
index 174c29809ac..b5e43da401e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
@@ -85,16 +85,10 @@ export default {
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
-        <span v-if="showFromText">From</span>
-        <span>{{ dateText('min') }}</span>
+        <span v-if="showFromText">From</span> <span>{{ dateText('min') }}</span>
       </span>
     </collapsed-calendar-icon>
-    <div
-      v-if="hasMinAndMaxDates"
-      class="text-center sidebar-collapsed-divider"
-    >
-      -
-    </div>
+    <div v-if="hasMinAndMaxDates" class="text-center sidebar-collapsed-divider">-</div>
     <collapsed-calendar-icon
       v-if="maxDate"
       :container-class="iconClass"
@@ -102,8 +96,7 @@ export default {
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
-        <span v-if="!minDate">Until</span>
-        <span>{{ dateText('max') }}</span>
+        <span v-if="!minDate">Until</span> <span>{{ dateText('max') }}</span>
       </span>
     </collapsed-calendar-icon>
   </div>
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 6aa880603b9..82067129c57 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -96,26 +96,14 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="blockClass"
-    class="block"
-  >
+  <div :class="blockClass" class="block">
     <div class="issuable-sidebar-header">
-      <toggle-sidebar
-        :collapsed="collapsed"
-        @toggle="toggleSidebar"
-      />
+      <toggle-sidebar :collapsed="collapsed" @toggle="toggleSidebar" />
     </div>
-    <collapsed-calendar-icon
-      :text="collapsedText"
-      class="sidebar-collapsed-icon"
-    />
+    <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
     <div class="title">
       {{ label }}
-      <gl-loading-icon
-        v-if="isLoading"
-        :inline="true"
-      />
+      <gl-loading-icon v-if="isLoading" :inline="true" />
       <div class="float-right">
         <button
           v-if="editable && !editing"
@@ -125,11 +113,7 @@ export default {
         >
           Edit
         </button>
-        <toggle-sidebar
-          v-if="showToggleSidebar"
-          :collapsed="collapsed"
-          @toggle="toggleSidebar"
-        />
+        <toggle-sidebar v-if="showToggleSidebar" :collapsed="collapsed" @toggle="toggleSidebar" />
       </div>
     </div>
     <div class="value">
@@ -142,32 +126,21 @@ export default {
         @newDateSelected="newDateSelected"
         @hidePicker="stopEditing"
       />
-      <span
-        v-else
-        class="value-content"
-      >
+      <span v-else class="value-content">
         <template v-if="selectedDate">
           <strong>{{ selectedDateWords }}</strong>
-          <span
-            v-if="selectedAndEditable"
-            class="no-value"
-          >
+          <span v-if="selectedAndEditable" class="no-value">
             -
             <button
               type="button"
               class="btn-blank btn-link btn-secondary-hover-link"
-              @click="newDateSelected(null)"
+              @click="newDateSelected(null);"
             >
               remove
             </button>
           </span>
         </template>
-        <span
-          v-else
-          class="no-value"
-        >
-          None
-        </span>
+        <span v-else class="no-value"> None </span>
       </span>
     </div>
   </div>
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 98b8b6460fe..f66e81b1e08 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
@@ -122,30 +122,18 @@ export default {
       :labels="context.labels"
       @onValueClick="handleCollapsedValueClick"
     />
-    <dropdown-title
-      :can-edit="canEdit"
-    />
-    <dropdown-value
-      :labels="context.labels"
-      :label-filter-base-path="labelFilterBasePath"
-    >
+    <dropdown-title :can-edit="canEdit" />
+    <dropdown-value :labels="context.labels" :label-filter-base-path="labelFilterBasePath">
       <slot></slot>
     </dropdown-value>
-    <div
-      v-if="canEdit"
-      class="selectbox js-selectbox"
-      style="display: none;"
-    >
+    <div v-if="canEdit" class="selectbox js-selectbox" style="display: none;">
       <dropdown-hidden-input
         v-for="label in context.labels"
         :key="label.id"
         :name="hiddenInputName"
         :value="label.id"
       />
-      <div
-        ref="dropdown"
-        class="dropdown"
-      >
+      <div ref="dropdown" class="dropdown">
         <dropdown-button
           :ability-name="abilityName"
           :field-name="hiddenInputName"
@@ -161,11 +149,9 @@ dropdown-menu-labels dropdown-menu-selectable"
         >
           <div class="dropdown-page-one">
             <dropdown-header v-if="showCreate" />
-            <dropdown-search-input/>
+            <dropdown-search-input />
             <div class="dropdown-content"></div>
-            <div class="dropdown-loading">
-              <gl-loading-icon />
-            </div>
+            <div class="dropdown-loading"><gl-loading-icon /></div>
             <dropdown-footer
               v-if="showCreate"
               :labels-web-url="labelsWebUrl"
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 48d2f16f554..498b507d11d 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
@@ -65,14 +65,7 @@ export default {
     class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
     data-toggle="dropdown"
   >
-    <span class="dropdown-toggle-text">
-      {{ dropdownToggleText }}
-    </span>
-    <i
-      aria-hidden="true"
-      class="fa fa-chevron-down"
-      data-hidden="true"
-    >
-    </i>
+    <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span>
+    <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"> </i>
   </button>
 </template>
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 fe895136ccc..74c5e063c3d 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
@@ -23,12 +23,7 @@ export default {
         type="button"
         class="dropdown-title-button dropdown-menu-back"
       >
-        <i
-          aria-hidden="true"
-          class="fa fa-arrow-left"
-          data-hidden="true"
-        >
-        </i>
+        <i aria-hidden="true" class="fa fa-arrow-left" data-hidden="true"> </i>
       </button>
       {{ headerTitle }}
       <button
@@ -36,12 +31,7 @@ export default {
         type="button"
         class="dropdown-title-button dropdown-menu-close"
       >
-        <i
-          aria-hidden="true"
-          class="fa fa-times dropdown-menu-close-icon"
-          data-hidden="true"
-        >
-        </i>
+        <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i>
       </button>
     </div>
     <div class="dropdown-content">
@@ -75,16 +65,10 @@ export default {
         />
       </div>
       <div class="clearfix">
-        <button
-          type="button"
-          class="btn btn-primary float-left js-new-label-btn disabled"
-        >
+        <button type="button" class="btn btn-primary float-left js-new-label-btn disabled">
           {{ __('Create') }}
         </button>
-        <button
-          type="button"
-          class="btn btn-default float-right js-cancel-label-btn"
-        >
+        <button type="button" class="btn btn-default float-right js-cancel-label-btn">
           {{ __('Cancel') }}
         </button>
       </div>
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 d64ad016f9b..ebbd8d119b5 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
@@ -25,19 +25,10 @@ export default {
   <div class="dropdown-footer">
     <ul class="dropdown-footer-list">
       <li>
-        <a
-          href="#"
-          class="dropdown-toggle-page"
-        >
-          {{ createLabelTitle }}
-        </a>
+        <a href="#" class="dropdown-toggle-page"> {{ createLabelTitle }} </a>
       </li>
       <li>
-        <a
-          :href="labelsWebUrl"
-          data-is-link="true"
-          class="dropdown-external-link"
-        >
+        <a :href="labelsWebUrl" data-is-link="true" class="dropdown-external-link">
           {{ manageLabelsTitle }}
         </a>
       </li>
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 e98b6392827..eb837be165b 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
@@ -10,12 +10,7 @@ export default {};
       type="button"
       class="dropdown-title-button dropdown-menu-close"
     >
-      <i
-        aria-hidden="true"
-        class="fa fa-times dropdown-menu-close-icon"
-        data-hidden="true"
-      >
-      </i>
+      <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i>
     </button>
   </div>
 </template>
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 80d65a2a534..bf51fa3dc38 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
@@ -10,12 +10,7 @@ export default {};
       class="dropdown-input-field"
       type="search"
     />
-    <i
-      aria-hidden="true"
-      class="fa fa-search dropdown-input-search"
-      data-hidden="true"
-    >
-    </i>
+    <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"> </i>
     <i
       aria-hidden="true"
       class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
index 9ac32ff13c6..cb53273c786 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue
@@ -13,16 +13,8 @@ export default {
   <div class="title hide-collapsed append-bottom-10">
     {{ __('Labels') }}
     <template v-if="canEdit">
-      <i
-        aria-hidden="true"
-        class="fa fa-spinner fa-spin block-loading"
-        data-hidden="true"
-      >
-      </i>
-      <button
-        type="button"
-        class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle"
-      >
+      <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true"> </i>
+      <button type="button" class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle">
         {{ __('Edit') }}
       </button>
     </template>
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 10e990f8a80..6faf3fafad1 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
@@ -37,22 +37,14 @@ export default {
 <template>
   <div
     :class="{
-      'has-labels':!isEmpty,
+      'has-labels': !isEmpty,
     }"
     class="hide-collapsed value issuable-show-labels js-value"
   >
-    <span
-      v-if="isEmpty"
-      class="text-secondary"
-    >
+    <span v-if="isEmpty" class="text-secondary">
       <slot>{{ __('None') }}</slot>
     </span>
-    <a
-      v-for="label in labels"
-      v-else
-      :key="label.id"
-      :href="labelFilterUrl(label)"
-    >
+    <a v-for="label in labels" v-else :key="label.id" :href="labelFilterUrl(label)">
       <span
         v-tooltip
         :style="labelStyle(label)"
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 0d5fc07e6e3..e742900dbcb 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
@@ -46,12 +46,7 @@ export default {
     data-container="body"
     @click="handleClick"
   >
-    <i
-      aria-hidden="true"
-      data-hidden="true"
-      class="fa fa-tags"
-    >
-    </i>
+    <i aria-hidden="true" data-hidden="true" class="fa fa-tags"> </i>
     <span>{{ labels.length }}</span>
   </div>
 </template>
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 80dc7d3557c..3b5ce0e9910 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -46,7 +46,7 @@ export default {
     <i
       :class="{
         'fa-angle-double-right': !collapsed,
-        'fa-angle-double-left': collapsed
+        'fa-angle-double-left': collapsed,
       }"
       aria-label="toggle collapse"
       class="fa"
diff --git a/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue
index 63034a45f77..49f987bb619 100644
--- a/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue
+++ b/app/assets/javascripts/vue_shared/components/smart_virtual_list.vue
@@ -27,16 +27,7 @@ export default {
   >
     <slot></slot>
   </virtual-list>
-  <component
-    :is="rtag"
-    v-else
-    class="js-plain-element"
-  >
-    <component
-      :is="wtag"
-      :class="wclass"
-    >
-      <slot></slot>
-    </component>
+  <component :is="rtag" v-else class="js-plain-element">
+    <component :is="wtag" :class="wclass"> <slot></slot> </component>
   </component>
 </template>
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 cd3ee544344..8ba6b73f928 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -88,16 +88,8 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="cssClass"
-    class="stacked-progress-bar"
-  >
-    <span
-      v-if="!totalCount"
-      class="status-unavailable"
-    >
-      {{ __("Not available") }}
-    </span>
+  <div :class="cssClass" class="stacked-progress-bar">
+    <span v-if="!totalCount" class="status-unavailable"> {{ __('Not available') }} </span>
     <span
       v-if="successPercent"
       v-tooltip
diff --git a/app/assets/javascripts/vue_shared/components/svg_gradient.vue b/app/assets/javascripts/vue_shared/components/svg_gradient.vue
index b61a1befcd6..cca90af275e 100644
--- a/app/assets/javascripts/vue_shared/components/svg_gradient.vue
+++ b/app/assets/javascripts/vue_shared/components/svg_gradient.vue
@@ -17,20 +17,11 @@ export default {
 };
 </script>
 <template>
-  <svg
-    height="0"
-    width="0">
+  <svg height="0" width="0">
     <defs>
-      <linearGradient
-        :id="identifierName">
-        <stop
-          :stop-color="colors[0]"
-          :stop-opacity="opacity[0]"
-          offset="0%" />
-        <stop
-          :stop-color="colors[1]"
-          :stop-opacity="opacity[1]"
-          offset="100%" />
+      <linearGradient :id="identifierName">
+        <stop :stop-color="colors[0]" :stop-opacity="opacity[0]" offset="0%" />
+        <stop :stop-color="colors[1]" :stop-opacity="opacity[1]" offset="100%" />
       </linearGradient>
     </defs>
   </svg>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 03a5a078879..01e655d27e5 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -131,10 +131,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="showPagination"
-    class="gl-pagination prepend-top-default"
-  >
+  <div v-if="showPagination" class="gl-pagination prepend-top-default">
     <ul class="pagination justify-content-center">
       <li
         v-for="(item, index) in getItems"
@@ -148,14 +145,11 @@ export default {
           'd-none d-md-block': hideOnSmallScreen(item),
           separator: item.separator,
           active: item.active,
-          disabled: item.disabled || item.separator
+          disabled: item.disabled || item.separator,
         }"
         class="page-item"
       >
-        <a
-          class="page-link"
-          @click.prevent="changePage(item.title, item.disabled)"
-        >
+        <a class="page-link" @click.prevent="changePage(item.title, item.disabled);">
           {{ item.title }}
         </a>
       </li>
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
index 1c6011dcfd0..d24c27cfcc3 100644
--- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue
+++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     :class="{
-      active: localActive
+      active: localActive,
     }"
     class="tab-pane"
     role="tabpanel"
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
index d760263929a..a01c5be98e3 100644
--- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -39,6 +39,7 @@ export default {
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
     data-container="body"
-    v-text="timeFormated(time)">
+    v-text="timeFormated(time)"
+  >
   </time>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 5d1c92c3b3d..de70fa2182b 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -61,29 +61,20 @@ export default {
 
 <template>
   <label class="toggle-wrapper">
-    <input
-      v-if="name"
-      :name="name"
-      :value="value"
-      type="hidden"
-    />
+    <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
       :aria-label="ariaLabel"
       :class="{
         'is-checked': value,
         'is-disabled': disabledInput,
-        'is-loading': isLoading
+        'is-loading': isLoading,
       }"
       type="button"
       class="project-feature-toggle"
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon">
-        <icon
-          :name="toggleIcon"
-          css-classes="toggle-icon-svg"/>
-      </span>
+      <span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span>
     </button>
   </label>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
index d5b58574123..69eb791d195 100644
--- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
+++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
@@ -59,9 +59,5 @@ export default {
   >
     <slot></slot>
   </span>
-  <span
-    v-else
-  >
-    <slot></slot>
-  </span>
+  <span v-else> <slot></slot> </span>
 </template>
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 c78d98ccd9e..01b8b94f9e3 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
@@ -87,7 +87,7 @@ export default {
       :class="{
         lazy: lazy,
         [avatarSizeClass]: true,
-        [cssClasses]: true
+        [cssClasses]: true,
       }"
       :src="resultantSrcAttribute"
       :width="size"
@@ -102,9 +102,7 @@ export default {
       boundary="window"
       class="js-user-avatar-image-toolip"
     >
-      <slot>
-        {{ tooltipText }}
-      </slot>
+      <slot> {{ tooltipText }} </slot>
     </gl-tooltip>
   </span>
 </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 6dd519ea56d..55e2a786c8f 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
@@ -83,9 +83,7 @@ export default {
 </script>
 
 <template>
-  <gl-link
-    :href="linkHref"
-    class="user-avatar-link">
+  <gl-link :href="linkHref" class="user-avatar-link">
     <user-avatar-image
       :img-src="imgSrc"
       :img-alt="imgAlt"
@@ -94,13 +92,14 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     >
-      <slot></slot>
-    </user-avatar-image><span
+      <slot></slot> </user-avatar-image
+    ><span
       v-if="shouldShowUsername"
       v-gl-tooltip
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
       class="js-user-avatar-link-username"
-    >{{ username }}</span><slot name="avatar-badge"></slot>
+      >{{ username }}</span
+    ><slot name="avatar-badge"></slot>
   </gl-link>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
index 8e460566d09..7ed4da84120 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -34,10 +34,5 @@ export default {
 </script>
 
 <template>
-  <svg
-    :class="avatarSizeClass"
-    :height="size"
-    :width="size"
-    v-html="svg"
-  />
+  <svg :class="avatarSizeClass" :height="size" :width="size" v-html="svg" />
 </template>
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 0fb90c3b78c..1c7691f865a 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -425,14 +425,16 @@ describe('common_utils', () => {
     });
 
     it('rejects the backOff promise after timing out', done => {
-      commonUtils.backOff(next => next(), 64000).catch(errBackoffResp => {
-        const timeouts = window.setTimeout.calls.allArgs().map(([, timeout]) => timeout);
+      commonUtils
+        .backOff(next => next(), 64000)
+        .catch(errBackoffResp => {
+          const timeouts = window.setTimeout.calls.allArgs().map(([, timeout]) => timeout);
 
-        expect(timeouts).toEqual([2000, 4000, 8000, 16000, 32000, 32000]);
-        expect(errBackoffResp instanceof Error).toBe(true);
-        expect(errBackoffResp.message).toBe('BACKOFF_TIMEOUT');
-        done();
-      });
+          expect(timeouts).toEqual([2000, 4000, 8000, 16000, 32000, 32000]);
+          expect(errBackoffResp instanceof Error).toBe(true);
+          expect(errBackoffResp.message).toBe('BACKOFF_TIMEOUT');
+          done();
+        });
     });
   });
 
diff --git a/spec/javascripts/shared/popover_spec.js b/spec/javascripts/shared/popover_spec.js
index 85bde075b77..cc2b2014d38 100644
--- a/spec/javascripts/shared/popover_spec.js
+++ b/spec/javascripts/shared/popover_spec.js
@@ -112,8 +112,8 @@ describe('popover', () => {
         length: 0,
       };
 
-      spyOn($.fn, 'init').and.callFake(
-        selector => (selector === '.popover:hover' ? fakeJquery : $.fn),
+      spyOn($.fn, 'init').and.callFake(selector =>
+        selector === '.popover:hover' ? fakeJquery : $.fn,
       );
       spyOn(togglePopover, 'call');
       mouseleave();
@@ -126,8 +126,8 @@ describe('popover', () => {
         length: 1,
       };
 
-      spyOn($.fn, 'init').and.callFake(
-        selector => (selector === '.popover:hover' ? fakeJquery : $.fn),
+      spyOn($.fn, 'init').and.callFake(selector =>
+        selector === '.popover:hover' ? fakeJquery : $.fn,
       );
       spyOn(togglePopover, 'call');
       mouseleave();
diff --git a/spec/javascripts/signin_tabs_memoizer_spec.js b/spec/javascripts/signin_tabs_memoizer_spec.js
index b688a299052..52da6a79939 100644
--- a/spec/javascripts/signin_tabs_memoizer_spec.js
+++ b/spec/javascripts/signin_tabs_memoizer_spec.js
@@ -51,8 +51,8 @@ describe('SigninTabsMemoizer', () => {
     const fakeTab = {
       click: () => {},
     };
-    spyOn(document, 'querySelector').and.callFake(
-      selector => (selector === `${tabSelector} a[href="#bogus"]` ? null : fakeTab),
+    spyOn(document, 'querySelector').and.callFake(selector =>
+      selector === `${tabSelector} a[href="#bogus"]` ? null : fakeTab,
     );
     spyOn(fakeTab, 'click');