Fixes more eslint rules

27 files changed, 486 insertions, 455 deletions

diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 61b684a8fc6..16bd2f5feb3 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -69,7 +69,8 @@
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
-        />
+        >
+        </i>
         <loading-icon v-if="isLoading" />
       </span>
     </button>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 084a7de2305..605a88e997e 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -9,6 +9,10 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
+    components: {
+      loadingIcon,
+    },
+
     props: {
       retryUrl: {
         type: String,
@@ -21,10 +25,6 @@
       },
     },
 
-    components: {
-      loadingIcon,
-    },
-
     data() {
       return {
         isLoading: false,
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index a82bba15a89..c0be72f7401 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -119,7 +119,7 @@
       :can-read-environment="canReadEnvironment"
       @onChangePage="onChangePage"
     >
-     <empty-state
+      <empty-state
         slot="emptyState"
         v-if="!isLoading && state.environments.length === 0"
         :new-path="newEnvironmentPath"
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index a8384e545b2..4c4ef31b8d1 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -31,6 +31,15 @@ export default {
     },
   },
 
+  computed: {
+    shouldRenderFolderContent() {
+      return this.model.isFolder &&
+        this.model.isOpen &&
+        this.model.children &&
+        this.model.children.length > 0;
+    },
+  },
+
   methods: {
     folderUrl(model) {
       return `${window.location.pathname}/folders/${model.folderName}`;
@@ -80,17 +89,21 @@ export default {
     </div>
     <template
       v-for="(model, i) in environments"
-      :key="i"
       :model="model">
       <div
         is="environment-item"
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
+        :key="i"
       />
 
-      <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-        <div v-if="model.isLoadingFolderContent">
+      <template
+        v-if="shouldRenderFolderContent"
+      >
+        <div
+          v-if="model.isLoadingFolderContent"
+          :key="i">
           <loading-icon size="2" />
         </div>
 
@@ -101,9 +114,10 @@ export default {
             :model="children"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
+            :key="i"
           />
 
-          <div>
+          <div :key="i">
             <div class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 51f14881eaa..5ef5e347387 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -44,7 +44,7 @@
     >
 
       <h4 class="js-folder-name environments-folder-name">
-        {{ s__("Environments|Environments") }} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
       </h4>
 
       <tabs
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 1eda9f18e81..0d795f50d16 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -86,7 +86,8 @@
       />
       <item-stats :item="group" />
       <div
-        class="folder-toggle-wrap">
+        class="folder-toggle-wrap"
+      >
         <item-caret :is-group-open="group.isOpen" />
         <item-type-icon
           :item-type="group.type"
@@ -115,7 +116,8 @@
         </a>
       </div>
       <div
-        class="title namespace-title">
+        class="title namespace-title"
+      >
         <a
           v-tooltip
           :href="group.relativePath"
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 75a2bf34887..adde8c8cdb3 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,47 +1,48 @@
 <script>
-import tablePagination from '~/vue_shared/components/table_pagination.vue';
-import eventHub from '../event_hub';
-import { getParameterByName } from '../../lib/utils/common_utils';
+  import tablePagination from '~/vue_shared/components/table_pagination.vue';
+  import eventHub from '../event_hub';
+  import { getParameterByName } from '../../lib/utils/common_utils';
 
-export default {
-  components: {
-    tablePagination,
-  },
-  props: {
-    groups: {
-      type: Array,
-      required: true,
+  export default {
+    components: {
+      tablePagination,
     },
-    pageInfo: {
-      type: Object,
-      required: true,
+    props: {
+      groups: {
+        type: Array,
+        required: true,
+      },
+      pageInfo: {
+        type: Object,
+        required: true,
+      },
+      searchEmpty: {
+        type: Boolean,
+        required: true,
+      },
+      searchEmptyMessage: {
+        type: String,
+        required: true,
+      },
     },
-    searchEmpty: {
-      type: Boolean,
-      required: true,
+    methods: {
+      change(page) {
+        const filterGroupsParam = getParameterByName('filter_groups');
+        const sortParam = getParameterByName('sort');
+        const archivedParam = getParameterByName('archived');
+        eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
+      },
     },
-    searchEmptyMessage: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    change(page) {
-      const filterGroupsParam = getParameterByName('filter_groups');
-      const sortParam = getParameterByName('sort');
-      const archivedParam = getParameterByName('archived');
-      eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
-    },
-  },
-};
+  };
 </script>
 
 <template>
   <div class="groups-list-tree-container">
     <div
       v-if="searchEmpty"
-      class="has-no-search-results">
-      {{searchEmptyMessage}}
+      class="has-no-search-results"
+    >
+      {{ searchEmptyMessage }}
     </div>
     <group-folder
       v-if="!searchEmpty"
@@ -50,7 +51,7 @@ export default {
     <table-pagination
       v-if="!searchEmpty"
       :change="change"
-      :pageInfo="pageInfo"
+      :page-info="pageInfo"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index 9e90fe2b701..2a5bec5e86c 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -2,6 +2,9 @@
 import icon from '~/vue_shared/components/icon.vue';
 
 export default {
+  components: {
+    icon,
+  },
   props: {
     isGroupOpen: {
       type: Boolean,
@@ -9,9 +12,6 @@ export default {
       default: false,
     },
   },
-  components: {
-    icon,
-  },
   computed: {
     iconClass() {
       return this.isGroupOpen ? 'angle-down' : 'angle-right';
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 1df23c17746..168b4e4af2c 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -1,44 +1,44 @@
 <script>
-import icon from '~/vue_shared/components/icon.vue';
-import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import {
-  ITEM_TYPE,
-  VISIBILITY_TYPE_ICON,
-  GROUP_VISIBILITY_TYPE,
-  PROJECT_VISIBILITY_TYPE
-} from '../constants';
-import itemStatsValue from './item_stats_value.vue';
+  import icon from '~/vue_shared/components/icon.vue';
+  import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+  import {
+    ITEM_TYPE,
+    VISIBILITY_TYPE_ICON,
+    GROUP_VISIBILITY_TYPE,
+    PROJECT_VISIBILITY_TYPE,
+  } from '../constants';
+  import itemStatsValue from './item_stats_value.vue';
 
-export default {
-  components: {
-    icon,
-    timeAgoTooltip,
-    itemStatsValue,
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      icon,
+      timeAgoTooltip,
+      itemStatsValue,
     },
-  },
-  computed: {
-    visibilityIcon() {
-      return VISIBILITY_TYPE_ICON[this.item.visibility];
+    props: {
+      item: {
+        type: Object,
+        required: true,
+      },
     },
-    visibilityTooltip() {
-      if (this.item.type === ITEM_TYPE.GROUP) {
-        return GROUP_VISIBILITY_TYPE[this.item.visibility];
-      }
-      return PROJECT_VISIBILITY_TYPE[this.item.visibility];
+    computed: {
+      visibilityIcon() {
+        return VISIBILITY_TYPE_ICON[this.item.visibility];
+      },
+      visibilityTooltip() {
+        if (this.item.type === ITEM_TYPE.GROUP) {
+          return GROUP_VISIBILITY_TYPE[this.item.visibility];
+        }
+        return PROJECT_VISIBILITY_TYPE[this.item.visibility];
+      },
+      isProject() {
+        return this.item.type === ITEM_TYPE.PROJECT;
+      },
+      isGroup() {
+        return this.item.type === ITEM_TYPE.GROUP;
+      },
     },
-    isProject() {
-      return this.item.type === ITEM_TYPE.PROJECT;
-    },
-    isGroup() {
-      return this.item.type === ITEM_TYPE.GROUP;
-    },
-  },
-};
+  };
 </script>
 
 <template>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index f441cabf6d2..08d0bf6e344 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -1,52 +1,52 @@
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import icon from '~/vue_shared/components/icon.vue';
 
-export default {
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: '',
+  export default {
+    components: {
+      icon,
     },
-    cssClass: {
-      type: String,
-      required: false,
-      default: '',
+    directives: {
+      tooltip,
     },
-    iconName: {
-      type: String,
-      required: true,
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      cssClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      iconName: {
+        type: String,
+        required: true,
+      },
+      tooltipPlacement: {
+        type: String,
+        required: false,
+        default: 'bottom',
+      },
+      /**
+      * value could either be number or string
+      * as `memberCount` is always passed as string
+      * while `subgroupCount` & `projectCount`
+      * are always number
+      */
+      value: {
+        type: [Number, String],
+        required: false,
+        default: '',
+      },
     },
-    tooltipPlacement: {
-      type: String,
-      required: false,
-      default: 'bottom',
+    computed: {
+      isValuePresent() {
+        return this.value !== '';
+      },
     },
-    /**
-     * value could either be number or string
-     * as `memberCount` is always passed as string
-     * while `subgroupCount` & `projectCount`
-     * are always number
-     */
-    value: {
-      type: [Number, String],
-      required: false,
-      default: '',
-    },
-  },
-  directives: {
-    tooltip,
-  },
-  components: {
-    icon,
-  },
-  computed: {
-    isValuePresent() {
-      return this.value !== '';
-    },
-  },
-};
+  };
 </script>
 
 <template>
@@ -57,12 +57,12 @@ export default {
     :class="cssClass"
     :title="title"
   >
-    <icon :name="iconName"/>
+    <icon :name="iconName" />
     <span
       v-if="isValuePresent"
       class="stat-value"
     >
-      {{value}}
+      {{ value }}
     </span>
   </span>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 704dff981df..a8459b011df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -32,7 +32,6 @@
         this.$emit('toggleCollapsed');
       },
     },
-
   };
 </script>
 
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 7f29a355eca..46c3224d582 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -9,6 +9,15 @@ import repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
 
 export default {
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+    repoPreview,
+  },
   computed: {
     ...mapState([
       'currentBlobView',
@@ -19,15 +28,6 @@ export default {
       'activeFile',
     ]),
   },
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    repoFileButtons,
-    ideStatusBar,
-    repoEditor,
-    repoPreview,
-  },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
     window.onbeforeunload = (e) => {
@@ -43,7 +43,7 @@ export default {
 </script>
 
 <template>
-  <div 
+  <div
     class="ide-view"
   >
     <ide-sidebar/>
@@ -51,23 +51,26 @@ export default {
       class="multi-file-edit-pane"
     >
       <template
-        v-if="activeFile">
-        <repo-tabs/>
+        v-if="activeFile"
+      >
+        <repo-tabs />
         <component
           class="multi-file-edit-pane-content"
           :is="currentBlobView"
         />
-        <repo-file-buttons/>
+        <repo-file-buttons />
         <ide-status-bar
-          :file="selectedFile"/>
+          :file="selectedFile"
+        />
       </template>
       <template
-        v-else>
+        v-else
+      >
         <div class="ide-empty-state">
           <h2 class="clgray">Welcome to the GitLab IDE</h2>
         </div>
       </template>
     </div>
-    <ide-contextbar/>
+    <ide-contextbar />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
index 78c01272af6..dd947f66969 100644
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -1,59 +1,59 @@
 <script>
-import { mapGetters, mapState, mapActions } from 'vuex';
-import repoCommitSection from './repo_commit_section.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import repoCommitSection from './repo_commit_section.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
-export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
-  components: {
-    repoCommitSection,
-    icon,
-    panelResizer,
-  },
-  computed: {
-    ...mapState([
-      'rightPanelCollapsed',
-    ]),
-    ...mapGetters([
-      'changedFiles',
-    ]),
-    currentIcon() {
-      return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+  export default {
+    components: {
+      repoCommitSection,
+      icon,
+      panelResizer,
     },
-    maxSize() {
-      return window.innerWidth / 2;
+    data() {
+      return {
+        width: 290,
+      };
     },
-    panelStyle() {
-      if (!this.rightPanelCollapsed) {
-        return { width: `${this.width}px` };
-      }
-      return {};
+    computed: {
+      ...mapState([
+        'rightPanelCollapsed',
+      ]),
+      ...mapGetters([
+        'changedFiles',
+      ]),
+      currentIcon() {
+        return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+      },
+      maxSize() {
+        return window.innerWidth / 2;
+      },
+      panelStyle() {
+        if (!this.rightPanelCollapsed) {
+          return { width: `${this.width}px` };
+        }
+        return {};
+      },
     },
-  },
-  methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-      'setResizingStatus',
-    ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'right',
-        collapsed: !this.rightPanelCollapsed,
-      });
+    methods: {
+      ...mapActions([
+        'setPanelCollapsedStatus',
+        'setResizingStatus',
+      ]),
+      toggleCollapsed() {
+        this.setPanelCollapsedStatus({
+          side: 'right',
+          collapsed: !this.rightPanelCollapsed,
+        });
+      },
+      resizingStarted() {
+        this.setResizingStatus(true);
+      },
+      resizingEnded() {
+        this.setResizingStatus(false);
+      },
     },
-    resizingStarted() {
-      this.setResizingStatus(true);
-    },
-    resizingEnded() {
-      this.setResizingStatus(false);
-    },
-  },
-};
+  };
 </script>
 
 <template>
@@ -64,17 +64,17 @@ export default {
     }"
     :style="panelStyle"
   >
-    <div 
-      class="multi-file-commit-panel-section">
+    <div class="multi-file-commit-panel-section">
       <header
         class="multi-file-commit-panel-header"
         :class="{
-            'is-collapsed': rightPanelCollapsed,
-          }"
-        >
+          'is-collapsed': rightPanelCollapsed,
+        }"
+      >
         <div
           class="multi-file-commit-panel-header-title"
-          v-if="!rightPanelCollapsed">
+          v-if="!rightPanelCollapsed"
+        >
           <icon
             name="list-bulleted"
             :size="18"
@@ -92,8 +92,7 @@ export default {
           />
         </button>
       </header>
-      <repo-commit-section 
-        class=""/>
+      <repo-commit-section />
     </div>
     <panel-resizer
       :size.sync="width"
@@ -103,6 +102,7 @@ export default {
       :max-size="maxSize"
       @resize-start="resizingStarted"
       @resize-end="resizingEnded"
-      side="left"/>
+      side="left"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
index bd3a521ff43..af2f7341a91 100644
--- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
@@ -28,20 +28,20 @@ export default {
       <div class="branch-header-title">
         <icon
           name="branch"
-          :size="12">
-        </icon>
+          :size="12"
+        />
         {{ branch.name }}
       </div>
       <div class="branch-header-btns">
         <new-dropdown
           :project-id="projectId"
           :branch="branch.name"
-          path=""/>
+          path=""
+        />
       </div>
     </div>
     <div>
-      <repo-tree
-        :treeId="branch.treeId"/>
+      <repo-tree :tree-id="branch.treeId" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue
index 61daba6d176..ed49a0e72a2 100644
--- a/app/assets/javascripts/ide/components/ide_project_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_tree.vue
@@ -19,9 +19,10 @@ export default {
 <template>
   <div class="projects-sidebar">
     <div class="context-header">
-      <a 
-        :title="project.name" 
-        :href="project.web_url">
+      <a
+        :title="project.name"
+        :href="project.web_url"
+      >
         <div class="avatar-container s40 project-avatar">
           <project-avatar-image
             class="avatar-container project-avatar"
@@ -29,7 +30,7 @@ export default {
             :img-src="project.avatar_url"
             :img-alt="project.name"
             :img-size="40"
-            />
+          />
         </div>
         <div class="sidebar-context-title">
           {{ project.name }}
@@ -38,10 +39,11 @@ export default {
     </div>
     <div class="multi-file-commit-panel-inner-scroll">
       <branches-tree
-        v-for="(branch, index) in project.branches"
+        v-for="branch in project.branches"
         :key="branch.name"
         :project-id="project.path_with_namespace"
-        :branch="branch"/>
+        :branch="branch"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
index b6b089e6b25..35d21fae086 100644
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -1,66 +1,68 @@
 <script>
-import { mapState } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
-import { treeList } from '../stores/utils';
+  import { mapState } from 'vuex';
+  import RepoPreviousDirectory from './repo_prev_directory.vue';
+  import RepoFile from './repo_file.vue';
+  import RepoLoadingFile from './repo_loading_file.vue';
+  import { treeList } from '../stores/utils';
 
-export default {
-  components: {
-    'repo-previous-directory': RepoPreviousDirectory,
-    'repo-file': RepoFile,
-    'repo-loading-file': RepoLoadingFile,
-  },
-  props: {
-    treeId: {
-      type: String,
-      required: true,
+  export default {
+    components: {
+      'repo-previous-directory': RepoPreviousDirectory,
+      'repo-file': RepoFile,
+      'repo-loading-file': RepoLoadingFile,
     },
-  },
-  computed: {
-    ...mapState([
-      'loading',
-      'isRoot',
-    ]),
-    ...mapState({
-      projectName(state) {
-        return state.project.name;
+    props: {
+      treeId: {
+        type: String,
+        required: true,
       },
-    }),
-    fetchedList() {
-      return treeList(this.$store.state, this.treeId);
     },
-    hasPreviousDirectory() {
-      return !this.isRoot && this.fetchedList.length;
-    },
-    showLoading() {
-      return this.loading;
+    computed: {
+      ...mapState([
+        'loading',
+        'isRoot',
+      ]),
+      ...mapState({
+        projectName(state) {
+          return state.project.name;
+        },
+      }),
+      fetchedList() {
+        return treeList(this.$store.state, this.treeId);
+      },
+      hasPreviousDirectory() {
+        return !this.isRoot && this.fetchedList.length;
+      },
+      showLoading() {
+        return this.loading;
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
-<div>
-  <div class="ide-file-list">
-    <table class="table">
-      <tbody
-        v-if="treeId">
-        <repo-previous-directory
-          v-if="hasPreviousDirectory"
-        />
-        <repo-loading-file
-          v-if="showLoading"
-          v-for="n in 5"
-          :key="n"
-        />
-        <repo-file
-          v-for="file in fetchedList"
-          :key="file.key"
-          :file="file"
-        />
-      </tbody>
-    </table>
+  <div>
+    <div class="ide-file-list">
+      <table class="table">
+        <tbody
+          v-if="treeId"
+        >
+          <repo-previous-directory
+            v-if="hasPreviousDirectory"
+          />
+          <template v-if="showLoading">
+            <repo-loading-file
+              v-for="n in 5"
+              :key="n"
+            />
+          </template>
+          <repo-file
+            v-for="file in fetchedList"
+            :key="file.key"
+            :file="file"
+          />
+        </tbody>
+      </table>
+    </div>
   </div>
-</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 269f300a04d..d88cde8adfe 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -5,16 +5,16 @@ import icon from '../../vue_shared/components/icon.vue';
 import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
 export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
   components: {
     projectTree,
     icon,
     panelResizer,
   },
+  data() {
+    return {
+      width: 290,
+    };
+  },
   computed: {
     ...mapState([
       'projects',
@@ -56,17 +56,18 @@ export default {
 
 <template>
   <div
-      class="multi-file-commit-panel"
-      :class="{
-        'is-collapsed': leftPanelCollapsed,
-      }"
-      :style="panelStyle"
-    >
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': leftPanelCollapsed,
+    }"
+    :style="panelStyle"
+  >
     <div class="multi-file-commit-panel-inner">
       <project-tree
-        v-for="(project, index) in projects"
+        v-for="project in projects"
         :key="project.id"
-        :project="project"/>
+        :project="project"
+      />
     </div>
     <button
       type="button"
@@ -80,7 +81,9 @@ export default {
       <span
         v-if="!leftPanelCollapsed"
         class="collapse-text"
-      >Collapse sidebar</span>
+      >
+        Collapse sidebar
+      </span>
     </button>
     <panel-resizer
       :size.sync="width"
@@ -90,6 +93,7 @@ export default {
       :max-size="maxSize"
       @resize-start="resizingStarted"
       @resize-end="resizingEnded"
-      side="right"/>
+      side="right"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index a24abadd936..e48c446c4a4 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,70 +1,65 @@
 <script>
-import { mapState } from 'vuex';
-import icon from '../../vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import timeAgoMixin from '../../vue_shared/mixins/timeago';
+  import { mapState } from 'vuex';
+  import icon from '../../vue_shared/components/icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import timeAgoMixin from '../../vue_shared/mixins/timeago';
 
-export default {
-  props: {
-    file: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      icon,
     },
-  },
-  components: {
-    icon,
-  },
-  directives: {
-    tooltip,
-  },
-  mixins: [
-    timeAgoMixin,
-  ],
-  computed: {
-    ...mapState([
-      'selectedFile',
-    ]),
-  },
-};
+    directives: {
+      tooltip,
+    },
+    mixins: [
+      timeAgoMixin,
+    ],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState([
+        'selectedFile',
+      ]),
+    },
+  };
 </script>
 
 <template>
-  <div
-    class="ide-status-bar">
+  <div class="ide-status-bar">
     <div>
       <icon
         name="branch"
-        :size="12">
-      </icon>
+        :size="12"
+      />
       {{ selectedFile.branchId }}
     </div>
     <div>
-      <div
-        v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
+      <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
         Last commit:
         <a
           v-tooltip
           :title="selectedFile.lastCommit.message"
-          :href="selectedFile.lastCommit.url">
-          {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by 
+          :href="selectedFile.lastCommit.url"
+        >
+          {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by
           {{ selectedFile.lastCommit.author }}
         </a>
-      </div>      
+      </div>
     </div>
-    <div
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.name }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.eol }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.fileLanguage }}
     </div>
   </div>
diff --git a/app/assets/javascripts/ide/components/new_branch_form.vue b/app/assets/javascripts/ide/components/new_branch_form.vue
index 2119d373d31..56e31256132 100644
--- a/app/assets/javascripts/ide/components/new_branch_form.vue
+++ b/app/assets/javascripts/ide/components/new_branch_form.vue
@@ -21,6 +21,13 @@
         return this.loading || this.branchName === '';
       },
     },
+    created() {
+      // Dropdown is outside of Vue instance & is controlled by Bootstrap
+      this.$dropdown = $('.git-revision-dropdown');
+
+      // text element is outside Vue app
+      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
+    },
     methods: {
       ...mapActions([
         'createNewBranch',
@@ -55,13 +62,6 @@
           }));
       },
     },
-    created() {
-      // Dropdown is outside of Vue instance & is controlled by Bootstrap
-      this.$dropdown = $('.git-revision-dropdown');
-
-      // text element is outside Vue app
-      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
-    },
   };
 </script>
 
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index d475813c4f7..ef653357f5f 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -4,6 +4,11 @@
   import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
+    components: {
+      icon,
+      newModal,
+      upload,
+    },
     props: {
       branch: {
         type: String,
@@ -18,11 +23,6 @@
         default: null,
       },
     },
-    components: {
-      icon,
-      newModal,
-      upload,
-    },
     data() {
       return {
         openModal: false,
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 0312f56efbd..36cd825c6dd 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -4,6 +4,9 @@
   import modal from '../../../vue_shared/components/modal.vue';
 
   export default {
+    components: {
+      modal,
+    },
     props: {
       branchId: {
         type: String,
@@ -27,28 +30,6 @@
         entryName: this.path !== '' ? `${this.path}/` : '',
       };
     },
-    components: {
-      modal,
-    },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createEntryInStore() {
-        this.createTempEntry({
-          projectId: this.currentProjectId,
-          branchId: this.branchId,
-          parent: this.parent,
-          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
-          type: this.type,
-        });
-
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit('hide');
-      },
-    },
     computed: {
       ...mapState([
         'currentProjectId',
@@ -78,6 +59,25 @@
     mounted() {
       this.$refs.fieldName.focus();
     },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createEntryInStore() {
+        this.createTempEntry({
+          projectId: this.currentProjectId,
+          branchId: this.branchId,
+          parent: this.parent,
+          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
+          type: this.type,
+        });
+
+        this.hideModal();
+      },
+      hideModal() {
+        this.$emit('hide');
+      },
+    },
   };
 </script>
 
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 2a2f2a241fc..6244737fa43 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -18,6 +18,12 @@
         'currentProjectId',
       ]),
     },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
     methods: {
       ...mapActions([
         'createTempEntry',
@@ -59,12 +65,6 @@
         this.$refs.fileUpload.click();
       },
     },
-    mounted() {
-      this.$refs.fileUpload.addEventListener('change', this.openFile);
-    },
-    beforeDestroy() {
-      this.$refs.fileUpload.removeEventListener('change', this.openFile);
-    },
   };
 </script>
 
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 63e3174b236..780c7157bcf 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -105,69 +105,69 @@ export default {
 </script>
 
 <template>
-<div class="multi-file-commit-panel-section">
-  <modal
-    v-if="showNewBranchModal"
-    :primary-button-label="__('Create new branch')"
-    kind="primary"
-    :title="__('Branch has changed')"
-    :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
-    @cancel="showNewBranchModal = false"
-    @submit="makeCommit(true)"
-  />
-  <commit-files-list
-    title="Staged"
-    :file-list="changedFiles"
-    :collapsed="rightPanelCollapsed"
-    @toggleCollapsed="toggleCollapsed"
-  />
-  <form
-    class="form-horizontal multi-file-commit-form"
-    @submit.prevent="tryCommit"
-    v-if="!rightPanelCollapsed"
-  >
-    <div class="multi-file-commit-fieldset">
-      <textarea
-        class="form-control multi-file-commit-message"
-        name="commit-message"
-        v-model="commitMessage"
-        placeholder="Commit message"
-      >
-      </textarea>
-    </div>
-    <div class="multi-file-commit-fieldset">
-      <label
-        v-tooltip
-        title="Create a new merge request with these changes"
-        data-container="body"
-        data-placement="top"
-      >
-        <input
-          type="checkbox"
-          v-model="startNewMR"
-        />
-        Merge Request
-      </label>
-      <button
-        type="submit"
-        :disabled="commitButtonDisabled"
-        class="btn btn-default btn-sm append-right-10 prepend-left-10"
-      >
-        <i
-          v-if="submitCommitsLoading"
-          class="js-commit-loading-icon fa fa-spinner fa-spin"
-          aria-hidden="true"
-          aria-label="loading"
+  <div class="multi-file-commit-panel-section">
+    <modal
+      v-if="showNewBranchModal"
+      :primary-button-label="__('Create new branch')"
+      kind="primary"
+      :title="__('Branch has changed')"
+      :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
+      @cancel="showNewBranchModal = false"
+      @submit="makeCommit(true)"
+    />
+    <commit-files-list
+      title="Staged"
+      :file-list="changedFiles"
+      :collapsed="rightPanelCollapsed"
+      @toggleCollapsed="toggleCollapsed"
+    />
+    <form
+      class="form-horizontal multi-file-commit-form"
+      @submit.prevent="tryCommit"
+      v-if="!rightPanelCollapsed"
+    >
+      <div class="multi-file-commit-fieldset">
+        <textarea
+          class="form-control multi-file-commit-message"
+          name="commit-message"
+          v-model="commitMessage"
+          placeholder="Commit message"
         >
-        </i>
-        Commit
-      </button>
-      <div
-        class="multi-file-commit-message-count"
-      >
-        {{ commitMessageCount }}
+        </textarea>
       </div>
-    </div>
-  </form>
-</div>
+      <div class="multi-file-commit-fieldset">
+        <label
+          v-tooltip
+          title="Create a new merge request with these changes"
+          data-container="body"
+          data-placement="top"
+        >
+          <input
+            type="checkbox"
+            v-model="startNewMR"
+          />
+          Merge Request
+        </label>
+        <button
+          type="submit"
+          :disabled="commitButtonDisabled"
+          class="btn btn-default btn-sm append-right-10 prepend-left-10"
+        >
+          <i
+            v-if="submitCommitsLoading"
+            class="js-commit-loading-icon fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="loading"
+          >
+          </i>
+          Commit
+        </button>
+        <div
+          class="multi-file-commit-message-count"
+        >
+          {{ commitMessageCount }}
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue
index 42d5d709209..c43e9163340 100644
--- a/app/assets/javascripts/ide/components/repo_edit_button.vue
+++ b/app/assets/javascripts/ide/components/repo_edit_button.vue
@@ -40,7 +40,7 @@ export default {
         aria-hidden="true">
       </i>
       <span>
-        {{buttonLabel}}
+        {{ buttonLabel }}
       </span>
     </button>
     <modal
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 8ad47988a7e..83b82ae44c9 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -6,20 +6,6 @@ import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 
 export default {
-  beforeDestroy() {
-    this.editor.dispose();
-  },
-  mounted() {
-    if (this.editor && monaco) {
-      this.initMonaco();
-    } else {
-      monacoLoader(['vs/editor/editor.main'], () => {
-        this.editor = Editor.create(monaco);
-
-        this.initMonaco();
-      });
-    }
-  },
   computed: {
     ...mapGetters([
       'activeFile',
@@ -52,6 +38,20 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
+  mounted() {
+    if (this.editor && monaco) {
+      this.initMonaco();
+    } else {
+      monacoLoader(['vs/editor/editor.main'], () => {
+        this.editor = Editor.create(monaco);
+
+        this.initMonaco();
+      });
+    }
+  },
   methods: {
     ...mapActions([
       'getRawFileData',
diff --git a/app/assets/javascripts/ide/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue
index 34f0d51819a..aabc0d8eada 100644
--- a/app/assets/javascripts/ide/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/ide/components/repo_file_buttons.vue
@@ -35,20 +35,24 @@ export default {
     <div
       class="btn-group"
       role="group"
-      aria-label="File actions">
+      aria-label="File actions"
+    >
       <a
         :href="activeFile.blamePath"
-        class="btn btn-default btn-sm blame">
+        class="btn btn-default btn-sm blame"
+      >
         Blame
       </a>
       <a
         :href="activeFile.commitsPath"
-        class="btn btn-default btn-sm history">
+        class="btn btn-default btn-sm history"
+      >
         History
       </a>
       <a
         :href="activeFile.permalink"
-        class="btn btn-default btn-sm permalink">
+        class="btn btn-default btn-sm permalink"
+      >
         Permalink
       </a>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index 66dfd991377..32be581defe 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -97,7 +97,7 @@
           <div class="modal-header">
             <slot name="header">
               <h4 class="modal-title pull-left">
-                {{ this.title }}
+                {{ title }}
               </h4>
               <button
                 type="button"
@@ -111,7 +111,10 @@
             </slot>
           </div>
           <div class="modal-body">
-            <slot name="body" :text="text">
+            <slot
+              name="body"
+              :text="text"
+            >
               <p>{{ this.text }}</p>
             </slot>
           </div>
@@ -145,7 +148,8 @@
     </div>
     <div
       v-if="id !== ''"
-      class="modal-backdrop fade in">
+      class="modal-backdrop fade in"
+    >
     </div>
   </div>
 </template>