diff --git a/app/assets/javascripts/ide/components/repo_preview.vue b/app/assets/javascripts/ide/components/repo_preview.vue
index 3d1e0297bd5..e47270a9855 100644
--- a/app/assets/javascripts/ide/components/repo_preview.vue
+++ b/app/assets/javascripts/ide/components/repo_preview.vue
@@ -1,65 +1,71 @@
 <script>
-import { mapGetters } from 'vuex';
-import LineHighlighter from '../../line_highlighter';
-import syntaxHighlight from '../../syntax_highlight';
+  import { mapGetters } from 'vuex';
+  import LineHighlighter from '../../line_highlighter';
+  import syntaxHighlight from '../../syntax_highlight';
 
-export default {
-  computed: {
-    ...mapGetters([
-      'activeFile',
-    ]),
-    renderErrorTooLarge() {
-      return this.activeFile.renderError === 'too_large';
+  export default {
+    computed: {
+      ...mapGetters([
+        'activeFile',
+      ]),
+      renderErrorTooLarge() {
+        return this.activeFile.renderError === 'too_large';
+      },
     },
-  },
-  methods: {
-    highlightFile() {
-      syntaxHighlight($(this.$el).find('.file-content'));
-    },
-  },
-  mounted() {
-    this.highlightFile();
-    this.lineHighlighter = new LineHighlighter({
-      fileHolderSelector: '.blob-viewer-container',
-      scrollFileHolder: true,
-    });
-  },
-  updated() {
-    this.$nextTick(() => {
+    mounted() {
       this.highlightFile();
-    });
-  },
-};
+      this.lineHighlighter = new LineHighlighter({
+        fileHolderSelector: '.blob-viewer-container',
+        scrollFileHolder: true,
+      });
+    },
+    updated() {
+      this.$nextTick(() => {
+        this.highlightFile();
+      });
+    },
+    methods: {
+      highlightFile() {
+        syntaxHighlight($(this.$el).find('.file-content'));
+      },
+    },
+  };
 </script>
 
 <template>
-<div>
-  <div
-    v-if="!activeFile.renderError"
-    v-html="activeFile.html"
-    class="multi-file-preview-holder"
-  >
+  <div>
+    <div
+      v-if="!activeFile.renderError"
+      v-html="activeFile.html"
+      class="multi-file-preview-holder"
+    >
+    </div>
+    <div
+      v-else-if="activeFile.tempFile"
+      class="vertical-center render-error">
+      <p class="text-center">
+        The source could not be displayed for this temporary file.
+      </p>
+    </div>
+    <div
+      v-else-if="renderErrorTooLarge"
+      class="vertical-center render-error">
+      <p class="text-center">
+        The source could not be displayed because it is too large.
+        You can <a
+          :href="activeFile.rawPath"
+          download>download</a> it instead.
+      </p>
+    </div>
+    <div
+      v-else
+      class="vertical-center render-error">
+      <p class="text-center">
+        The source could not be displayed because a rendering error occurred.
+        You can <a
+          :href="activeFile.rawPath"
+          download>download</a> it instead.
+      </p>
+    </div>
   </div>
-  <div
-    v-else-if="activeFile.tempFile"
-    class="vertical-center render-error">
-    <p class="text-center">
-      The source could not be displayed for this temporary file.
-    </p>
-  </div>
-  <div
-    v-else-if="renderErrorTooLarge"
-    class="vertical-center render-error">
-    <p class="text-center">
-      The source could not be displayed because it is too large. You can <a :href="activeFile.rawPath" download>download</a> it instead.
-    </p>
-  </div>
-  <div
-    v-else
-    class="vertical-center render-error">
-    <p class="text-center">
-      The source could not be displayed because a rendering error occurred. You can <a :href="activeFile.rawPath" download>download</a> it instead.
-    </p>
-  </div>
-</div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index e7684884b2c..5ed7bddf6ae 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,48 +1,46 @@
 <script>
-import { mapActions } from 'vuex';
-import fileIcon from '../../vue_shared/components/file_icon.vue';
+  import { mapActions } from 'vuex';
+  import fileIcon from '../../vue_shared/components/file_icon.vue';
 
-export default {
-  props: {
-    tab: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      fileIcon,
     },
-  },
-  components: {
-    fileIcon,
-  },
-  computed: {
-    closeLabel() {
-      if (this.tab.changed || this.tab.tempFile) {
-        return `${this.tab.name} changed`;
-      }
-      return `Close ${this.tab.name}`;
+    props: {
+      tab: {
+        type: Object,
+        required: true,
+      },
     },
-    changedClass() {
-      const tabChangedObj = {
-        'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
-        'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
-      };
-      return tabChangedObj;
+    computed: {
+      closeLabel() {
+        if (this.tab.changed || this.tab.tempFile) {
+          return `${this.tab.name} changed`;
+        }
+        return `Close ${this.tab.name}`;
+      },
+      changedClass() {
+        const tabChangedObj = {
+          'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
+          'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
+        };
+        return tabChangedObj;
+      },
     },
-  },
 
-  methods: {
-    ...mapActions([
-      'closeFile',
-    ]),
-    clickFile(tab) {
-      this.$router.push(`/project${tab.url}`);
+    methods: {
+      ...mapActions([
+        'closeFile',
+      ]),
+      clickFile(tab) {
+        this.$router.push(`/project${tab.url}`);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
-  <li
-    @click="clickFile(tab)"
-  >
+  <li @click="clickFile(tab)">
     <button
       type="button"
       class="multi-file-tab-close"
@@ -69,8 +67,7 @@ export default {
       <file-icon
         :file-name="tab.name"
         :size="16"
-      >
-      </file-icon>
+      />
       {{ tab.name }}
     </div>
   </li>
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index fc10a43d1bf..f85d66e9b1d 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,308 +1,306 @@
 <script>
-import Visibility from 'visibilityjs';
-import { visitUrl } from '../../lib/utils/url_utility';
-import Poll from '../../lib/utils/poll';
-import eventHub from '../event_hub';
-import Service from '../services/index';
-import Store from '../stores';
-import titleComponent from './title.vue';
-import descriptionComponent from './description.vue';
-import editedComponent from './edited.vue';
-import formComponent from './form.vue';
-import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
+  import Visibility from 'visibilityjs';
+  import { visitUrl } from '../../lib/utils/url_utility';
+  import Poll from '../../lib/utils/poll';
+  import eventHub from '../event_hub';
+  import Service from '../services/index';
+  import Store from '../stores';
+  import titleComponent from './title.vue';
+  import descriptionComponent from './description.vue';
+  import editedComponent from './edited.vue';
+  import formComponent from './form.vue';
+  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
-export default {
-  props: {
-    endpoint: {
-      required: true,
-      type: String,
+  export default {
+    components: {
+      descriptionComponent,
+      titleComponent,
+      editedComponent,
+      formComponent,
     },
-    updateEndpoint: {
-      required: true,
-      type: String,
+    mixins: [
+      recaptchaModalImplementor,
+    ],
+    props: {
+      endpoint: {
+        required: true,
+        type: String,
+      },
+      updateEndpoint: {
+        required: true,
+        type: String,
+      },
+      canUpdate: {
+        required: true,
+        type: Boolean,
+      },
+      canDestroy: {
+        required: true,
+        type: Boolean,
+      },
+      showInlineEditButton: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      showDeleteButton: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      enableAutocomplete: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      issuableRef: {
+        type: String,
+        required: true,
+      },
+      initialTitleHtml: {
+        type: String,
+        required: true,
+      },
+      initialTitleText: {
+        type: String,
+        required: true,
+      },
+      initialDescriptionHtml: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      initialDescriptionText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      initialTaskStatus: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      updatedAt: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      updatedByName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      updatedByPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      issuableTemplates: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      markdownPreviewPath: {
+        type: String,
+        required: true,
+      },
+      markdownDocsPath: {
+        type: String,
+        required: true,
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      projectNamespace: {
+        type: String,
+        required: true,
+      },
+      issuableType: {
+        type: String,
+        required: false,
+        default: 'issue',
+      },
+      canAttachFile: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
-    canUpdate: {
-      required: true,
-      type: Boolean,
-    },
-    canDestroy: {
-      required: true,
-      type: Boolean,
-    },
-    showInlineEditButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    showDeleteButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    enableAutocomplete: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    issuableRef: {
-      type: String,
-      required: true,
-    },
-    initialTitleHtml: {
-      type: String,
-      required: true,
-    },
-    initialTitleText: {
-      type: String,
-      required: true,
-    },
-    initialDescriptionHtml: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    initialDescriptionText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    initialTaskStatus: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    updatedAt: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    updatedByName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    updatedByPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    issuableTemplates: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    markdownPreviewPath: {
-      type: String,
-      required: true,
-    },
-    markdownDocsPath: {
-      type: String,
-      required: true,
-    },
-    projectPath: {
-      type: String,
-      required: true,
-    },
-    projectNamespace: {
-      type: String,
-      required: true,
-    },
-    issuableType: {
-      type: String,
-      required: false,
-      default: 'issue',
-    },
-    canAttachFile: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  data() {
-    const store = new Store({
-      titleHtml: this.initialTitleHtml,
-      titleText: this.initialTitleText,
-      descriptionHtml: this.initialDescriptionHtml,
-      descriptionText: this.initialDescriptionText,
-      updatedAt: this.updatedAt,
-      updatedByName: this.updatedByName,
-      updatedByPath: this.updatedByPath,
-      taskStatus: this.initialTaskStatus,
-    });
-
-    return {
-      store,
-      state: store.state,
-      showForm: false,
-    };
-  },
-  computed: {
-    formState() {
-      return this.store.formState;
-    },
-    hasUpdated() {
-      return !!this.state.updatedAt;
-    },
-  },
-  components: {
-    descriptionComponent,
-    titleComponent,
-    editedComponent,
-    formComponent,
-  },
-
-  mixins: [
-    recaptchaModalImplementor,
-  ],
-
-  methods: {
-    openForm() {
-      if (!this.showForm) {
-        this.showForm = true;
-        this.store.setFormState({
-          title: this.state.titleText,
-          description: this.state.descriptionText,
-          lockedWarningVisible: false,
-          updateLoading: false,
-        });
-      }
-    },
-    closeForm() {
-      this.showForm = false;
-    },
-
-    updateIssuable() {
-      return this.service.updateIssuable(this.store.formState)
-        .then(res => res.data)
-        .then(data => this.checkForSpam(data))
-        .then((data) => {
-          if (location.pathname !== data.web_url) {
-            visitUrl(data.web_url);
-          }
-
-          return this.service.getData();
-        })
-        .then(res => res.data)
-        .then((data) => {
-          this.store.updateState(data);
-          eventHub.$emit('close.form');
-        })
-        .catch((error) => {
-          if (error && error.name === 'SpamError') {
-            this.openRecaptcha();
-          } else {
-            eventHub.$emit('close.form');
-            window.Flash(`Error updating ${this.issuableType}`);
-          }
-        });
-    },
-
-    closeRecaptchaModal() {
-      this.store.setFormState({
-        updateLoading: false,
+    data() {
+      const store = new Store({
+        titleHtml: this.initialTitleHtml,
+        titleText: this.initialTitleText,
+        descriptionHtml: this.initialDescriptionHtml,
+        descriptionText: this.initialDescriptionText,
+        updatedAt: this.updatedAt,
+        updatedByName: this.updatedByName,
+        updatedByPath: this.updatedByPath,
+        taskStatus: this.initialTaskStatus,
       });
 
-      this.closeRecaptcha();
+      return {
+        store,
+        state: store.state,
+        showForm: false,
+      };
     },
-
-    deleteIssuable() {
-      this.service.deleteIssuable()
-        .then(res => res.data)
-        .then((data) => {
-          // Stop the poll so we don't get 404's with the issuable not existing
-          this.poll.stop();
-
-          visitUrl(data.web_url);
-        })
-        .catch(() => {
-          eventHub.$emit('close.form');
-          window.Flash(`Error deleting ${this.issuableType}`);
-        });
-    },
-  },
-  created() {
-    this.service = new Service(this.endpoint);
-    this.poll = new Poll({
-      resource: this.service,
-      method: 'getData',
-      successCallback: res => this.store.updateState(res.data),
-      errorCallback(err) {
-        throw new Error(err);
+    computed: {
+      formState() {
+        return this.store.formState;
       },
-    });
+      hasUpdated() {
+        return !!this.state.updatedAt;
+      },
+    },
+    created() {
+      this.service = new Service(this.endpoint);
+      this.poll = new Poll({
+        resource: this.service,
+        method: 'getData',
+        successCallback: res => this.store.updateState(res.data),
+        errorCallback(err) {
+          throw new Error(err);
+        },
+      });
 
-    if (!Visibility.hidden()) {
-      this.poll.makeRequest();
-    }
-
-    Visibility.change(() => {
       if (!Visibility.hidden()) {
-        this.poll.restart();
-      } else {
-        this.poll.stop();
+        this.poll.makeRequest();
       }
-    });
 
-    eventHub.$on('delete.issuable', this.deleteIssuable);
-    eventHub.$on('update.issuable', this.updateIssuable);
-    eventHub.$on('close.form', this.closeForm);
-    eventHub.$on('open.form', this.openForm);
-  },
-  beforeDestroy() {
-    eventHub.$off('delete.issuable', this.deleteIssuable);
-    eventHub.$off('update.issuable', this.updateIssuable);
-    eventHub.$off('close.form', this.closeForm);
-    eventHub.$off('open.form', this.openForm);
-  },
-};
+      Visibility.change(() => {
+        if (!Visibility.hidden()) {
+          this.poll.restart();
+        } else {
+          this.poll.stop();
+        }
+      });
+
+      eventHub.$on('delete.issuable', this.deleteIssuable);
+      eventHub.$on('update.issuable', this.updateIssuable);
+      eventHub.$on('close.form', this.closeForm);
+      eventHub.$on('open.form', this.openForm);
+    },
+    beforeDestroy() {
+      eventHub.$off('delete.issuable', this.deleteIssuable);
+      eventHub.$off('update.issuable', this.updateIssuable);
+      eventHub.$off('close.form', this.closeForm);
+      eventHub.$off('open.form', this.openForm);
+    },
+    methods: {
+      openForm() {
+        if (!this.showForm) {
+          this.showForm = true;
+          this.store.setFormState({
+            title: this.state.titleText,
+            description: this.state.descriptionText,
+            lockedWarningVisible: false,
+            updateLoading: false,
+          });
+        }
+      },
+      closeForm() {
+        this.showForm = false;
+      },
+
+      updateIssuable() {
+        return this.service.updateIssuable(this.store.formState)
+          .then(res => res.data)
+          .then(data => this.checkForSpam(data))
+          .then((data) => {
+            if (location.pathname !== data.web_url) {
+              visitUrl(data.web_url);
+            }
+
+            return this.service.getData();
+          })
+          .then(res => res.data)
+          .then((data) => {
+            this.store.updateState(data);
+            eventHub.$emit('close.form');
+          })
+          .catch((error) => {
+            if (error && error.name === 'SpamError') {
+              this.openRecaptcha();
+            } else {
+              eventHub.$emit('close.form');
+              window.Flash(`Error updating ${this.issuableType}`);
+            }
+          });
+      },
+
+      closeRecaptchaModal() {
+        this.store.setFormState({
+          updateLoading: false,
+        });
+
+        this.closeRecaptcha();
+      },
+
+      deleteIssuable() {
+        this.service.deleteIssuable()
+          .then(res => res.data)
+          .then((data) => {
+            // Stop the poll so we don't get 404's with the issuable not existing
+            this.poll.stop();
+
+            visitUrl(data.web_url);
+          })
+          .catch(() => {
+            eventHub.$emit('close.form');
+            window.Flash(`Error deleting ${this.issuableType}`);
+          });
+      },
+    },
+  };
 </script>
 
 <template>
-<div>
-  <div v-if="canUpdate && showForm">
-    <form-component
-      :form-state="formState"
-      :can-destroy="canDestroy"
-      :issuable-templates="issuableTemplates"
-      :markdown-docs-path="markdownDocsPath"
-      :markdown-preview-path="markdownPreviewPath"
-      :project-path="projectPath"
-      :project-namespace="projectNamespace"
-      :show-delete-button="showDeleteButton"
-      :can-attach-file="canAttachFile"
-      :enable-autocomplete="enableAutocomplete"
-    />
+  <div>
+    <div v-if="canUpdate && showForm">
+      <form-component
+        :form-state="formState"
+        :can-destroy="canDestroy"
+        :issuable-templates="issuableTemplates"
+        :markdown-docs-path="markdownDocsPath"
+        :markdown-preview-path="markdownPreviewPath"
+        :project-path="projectPath"
+        :project-namespace="projectNamespace"
+        :show-delete-button="showDeleteButton"
+        :can-attach-file="canAttachFile"
+        :enable-autocomplete="enableAutocomplete"
+      />
 
-    <recaptcha-modal
-      v-show="showRecaptcha"
-      :html="recaptchaHTML"
-      @close="closeRecaptchaModal"
-    />
+      <recaptcha-modal
+        v-show="showRecaptcha"
+        :html="recaptchaHTML"
+        @close="closeRecaptchaModal"
+      />
+    </div>
+    <div v-else>
+      <title-component
+        :issuable-ref="issuableRef"
+        :can-update="canUpdate"
+        :title-html="state.titleHtml"
+        :title-text="state.titleText"
+        :show-inline-edit-button="showInlineEditButton"
+      />
+      <description-component
+        v-if="state.descriptionHtml"
+        :can-update="canUpdate"
+        :description-html="state.descriptionHtml"
+        :description-text="state.descriptionText"
+        :updated-at="state.updatedAt"
+        :task-status="state.taskStatus"
+        :issuable-type="issuableType"
+        :update-url="updateEndpoint"
+      />
+      <edited-component
+        v-if="hasUpdated"
+        :updated-at="state.updatedAt"
+        :updated-by-name="state.updatedByName"
+        :updated-by-path="state.updatedByPath"
+      />
+    </div>
   </div>
-  <div v-else>
-    <title-component
-      :issuable-ref="issuableRef"
-      :can-update="canUpdate"
-      :title-html="state.titleHtml"
-      :title-text="state.titleText"
-      :show-inline-edit-button="showInlineEditButton"
-    />
-    <description-component
-      v-if="state.descriptionHtml"
-      :can-update="canUpdate"
-      :description-html="state.descriptionHtml"
-      :description-text="state.descriptionText"
-      :updated-at="state.updatedAt"
-      :task-status="state.taskStatus"
-      :issuable-type="issuableType"
-      :update-url="updateEndpoint"
-    />
-    <edited-component
-      v-if="hasUpdated"
-      :updated-at="state.updatedAt"
-      :updated-by-name="state.updatedByName"
-      :updated-by-path="state.updatedByPath"
-    />
-  </div>
-</div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 7cfdefa0eb6..d9fa2764d65 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -3,10 +3,10 @@
   import markdownField from '../../../vue_shared/components/markdown/field.vue';
 
   export default {
-    mixins: [updateMixin],
     components: {
       markdownField,
     },
+    mixins: [updateMixin],
     props: {
       formState: {
         type: Object,
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 982c72e0fd1..aec890a2ff6 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -5,10 +5,10 @@
   import { spriteIcon } from '../../lib/utils/common_utils';
 
   export default {
-    mixins: [animateMixin],
     directives: {
       tooltip,
     },
+    mixins: [animateMixin],
     props: {
       issuableRef: {
         type: String,
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 39696976952..fb47881d422 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -3,7 +3,7 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
-    name: 'jobHeaderSection',
+    name: 'JobHeaderSection',
     components: {
       ciHeader,
       loadingIcon,
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 72925ec6d23..05e6e7829d6 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -26,7 +26,6 @@
 
     mixins: [MonitoringMixin],
 
-
     props: {
       graphData: {
         type: Object,