[ci skip] Fix more eslint rules

.eslintrc

@@ -41,12 +41,11 @@
     "vue/html-self-closing": ["error", {
       "html": {
         "void": "always",
-        "normal": "any",
+        "normal": "never",
         "component": "always"
       },
       "svg": "always",
-      "math": "any"
+      "math": "always"
     }]
-
   }
 }

app/assets/javascripts/cycle_analytics/components/stage_component.vue

@@ -12,7 +12,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,

app/assets/javascripts/environments/components/environment_item.vue

@@ -474,18 +474,21 @@
         </span>
 
         <span>
-          {{model.folderName}}
+          {{ model.folderName }}
         </span>
 
         <span class="badge">
-          {{model.size}}
+          {{ model.size }}
         </span>
       </span>
     </div>
 
-    <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
+    <div
+      class="table-section section-10 deployment-column hidden-xs hidden-sm"
+      role="gridcell"
+    >
       <span v-if="shouldRenderDeploymentID">
-        {{deploymentInternalId}}
+        {{ deploymentInternalId }}
       </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-/**
+  /**
   * Renders the Monitoring (Metrics) link in environments table.
   */
-import tooltip from '../../vue_shared/directives/tooltip';
+  import tooltip from '../../vue_shared/directives/tooltip';
+
+  export default {
+    directives: {
+      tooltip,
+    },
 
-export default {
     props: {
       monitoringUrl: {
         type: String,
@@ -12,16 +16,12 @@ export default {
       },
     },
 
-  directives: {
-    tooltip,
-  },
-
     computed: {
       title() {
         return 'Monitoring';
       },
     },
-};
+  };
 </script>
 <template>
   <a
@@ -31,10 +31,12 @@ export default {
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-area-chart"
       aria-hidden="true"
-      />
+    >
+    </i>
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

 <script>
-/**
+  /**
   * Renders Rollback or Re deploy button in environments table depending
   * of the provided property `isLastDeployment`.
   *
   * Makes a post request when the button is clicked.
   */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
-export default {
+  export default {
     props: {
       retryUrl: {
         type: String,
@@ -38,20 +38,21 @@ export default {
         eventHub.$emit('postAction', this.retryUrl);
       },
     },
-};
+  };
 </script>
 <template>
   <button
     type="button"
     class="btn hidden-xs hidden-sm"
     @click="onClick"
-    :disabled="isLoading">
+    :disabled="isLoading"
+  >
 
     <span v-if="isLastDeployment">
-      {{s__("Environments|Re-deploy")}}
+      {{ s__("Environments|Re-deploy") }}
     </span>
     <span v-else>
-      {{s__("Environments|Rollback")}}
+      {{ s__("Environments|Rollback") }}
     </span>
 
     <loading-icon v-if="isLoading" />

app/assets/javascripts/environments/components/environment_stop.vue

 <script>
-/**
+  /**
   * Renders the stop "button" that allows stop an environment.
   * Used in environments table.
   */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+
+  export default {
+    components: {
+      loadingIcon,
+    },
+
+    directives: {
+      tooltip,
+    },
 
-export default {
     props: {
       stopUrl: {
         type: String,
@@ -15,20 +23,12 @@ export default {
       },
     },
 
-  directives: {
-    tooltip,
-  },
-
     data() {
       return {
         isLoading: false,
       };
     },
 
-  components: {
-    loadingIcon,
-  },
-
     computed: {
       title() {
         return 'Stop';
@@ -47,7 +47,7 @@ export default {
         }
       },
     },
-};
+  };
 </script>
 <template>
   <button
@@ -58,10 +58,13 @@ export default {
     @click="onClick"
     :disabled="isLoading"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-stop stop-env-icon"
-      aria-hidden="true" />
+      aria-hidden="true"
+    >
+    </i>
     <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/environments/components/environment_terminal_button.vue

 <script>
-/**
+  /**
   * Renders a terminal button to open a web terminal.
   * Used in environments table.
   */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
-import tooltip from '../../vue_shared/directives/tooltip';
+  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import tooltip from '../../vue_shared/directives/tooltip';
+
+  export default {
+    directives: {
+      tooltip,
+    },
 
-export default {
     props: {
       terminalPath: {
         type: String,
@@ -15,10 +19,6 @@ export default {
       },
     },
 
-  directives: {
-    tooltip,
-  },
-
     data() {
       return {
         terminalIconSvg,
@@ -30,7 +30,7 @@ export default {
         return 'Terminal';
       },
     },
-};
+  };
 </script>
 <template>
   <a
@@ -40,6 +40,7 @@ export default {
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg">
+    v-html="terminalIconSvg"
+  >
   </a>
 </template>

app/assets/javascripts/environments/components/environments_app.vue

@@ -7,6 +7,15 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    components: {
+      emptyState,
+    },
+
+    mixins: [
+      CIPaginationMixin,
+      environmentsMixin,
+    ],
+
     props: {
       endpoint: {
         type: String,
@@ -37,14 +46,6 @@
         required: true,
       },
     },
-    components: {
-      emptyState,
-    },
-
-    mixins: [
-      CIPaginationMixin,
-      environmentsMixin,
-    ],
 
     created() {
       eventHub.$on('toggleFolder', this.toggleFolder);
@@ -99,11 +100,13 @@
 
       <div
         v-if="canCreateEnvironment && !isLoading"
-        class="nav-controls">
+        class="nav-controls"
+      >
         <a
           :href="newEnvironmentPath"
-          class="btn btn-create">
-          {{s__("Environments|New environment")}}
+          class="btn btn-create"
+        >
+          {{ s__("Environments|New environment") }}
         </a>
       </div>
     </div>

app/assets/javascripts/environments/components/environments_table.vue

@@ -39,27 +39,49 @@ 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-10 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-10 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-25 environments-commit" role="columnheader">
-        {{s__("Environments|Commit")}}
+      <div
+        class="table-section section-25 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 in environments"
-      v-bind:model="model">
+      v-for="(model, i) in environments"
+      :key="i"
+      :model="model">
       <div
         is="environment-item"
         :model="model"
@@ -85,8 +107,9 @@ export default {
             <div class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"
-                class="btn btn-default">
-                {{s__("Environments|Show all")}}
+                class="btn btn-default"
+              >
+                {{ s__("Environments|Show all") }}
               </a>
             </div>
           </div>

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -3,6 +3,10 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    mixins: [
+      environmentsMixin,
+      CIPaginationMixin,
+    ],
     props: {
       endpoint: {
         type: String,
@@ -25,10 +29,6 @@
         required: true,
       },
     },
-    mixins: [
-      environmentsMixin,
-      CIPaginationMixin,
-    ],
     methods: {
       successCallback(resp) {
         this.saveData(resp);
@@ -40,10 +40,11 @@
   <div :class="cssContainerClass">
     <div
       class="top-area"
-      v-if="!isLoading">
+      v-if="!isLoading"
+    >
 
       <h4 class="js-folder-name environments-folder-name">
-        {{s__("Environments|Environments")}} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{folderName}}</b>
       </h4>
 
       <tabs

app/assets/javascripts/groups/components/app.vue

@@ -42,6 +42,26 @@ export default {
       return this.store.getPaginationInfo();
     },
   },
+  created() {
+    this.searchEmptyMessage = this.hideProjects ?
+      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+
+    eventHub.$on('fetchPage', this.fetchPage);
+    eventHub.$on('toggleChildren', this.toggleChildren);
+    eventHub.$on('leaveGroup', this.leaveGroup);
+    eventHub.$on('updatePagination', this.updatePagination);
+    eventHub.$on('updateGroups', this.updateGroups);
+  },
+  mounted() {
+    this.fetchAllGroups();
+  },
+  beforeDestroy() {
+    eventHub.$off('fetchPage', this.fetchPage);
+    eventHub.$off('toggleChildren', this.toggleChildren);
+    eventHub.$off('leaveGroup', this.leaveGroup);
+    eventHub.$off('updatePagination', this.updatePagination);
+    eventHub.$off('updateGroups', this.updateGroups);
+  },
   methods: {
     fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
       return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
@@ -152,26 +172,6 @@ export default {
       }
     },
   },
-  created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
-
-    eventHub.$on('fetchPage', this.fetchPage);
-    eventHub.$on('toggleChildren', this.toggleChildren);
-    eventHub.$on('leaveGroup', this.leaveGroup);
-    eventHub.$on('updatePagination', this.updatePagination);
-    eventHub.$on('updateGroups', this.updateGroups);
-  },
-  mounted() {
-    this.fetchAllGroups();
-  },
-  beforeDestroy() {
-    eventHub.$off('fetchPage', this.fetchPage);
-    eventHub.$off('toggleChildren', this.toggleChildren);
-    eventHub.$off('leaveGroup', this.leaveGroup);
-    eventHub.$off('updatePagination', this.updatePagination);
-    eventHub.$off('updateGroups', this.updateGroups);
-  },
 };
 </script>
 

app/assets/javascripts/groups/components/group_folder.vue

@@ -23,7 +23,7 @@ export default {
       return n__(
         'One more item',
         '%d more items',
-        this.parentGroup.childrenCount - this.parentGroup.children.length
+        this.parentGroup.childrenCount - this.parentGroup.children.length,
       );
     },
   },
@@ -47,8 +47,9 @@ export default {
         <i
           class="fa fa-external-link"
           aria-hidden="true"
-        />
-        {{moreChildrenStats}}
+        >
+        </i>
+        {{ moreChildrenStats }}
       </a>
     </li>
   </ul>

app/assets/javascripts/groups/components/group_item.vue

 <script>
-import { visitUrl } from '../../lib/utils/url_utility';
-import tooltip from '../../vue_shared/directives/tooltip';
-import identicon from '../../vue_shared/components/identicon.vue';
-import eventHub from '../event_hub';
+  import { visitUrl } from '../../lib/utils/url_utility';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import identicon from '../../vue_shared/components/identicon.vue';
+  import eventHub from '../event_hub';
 
-import itemCaret from './item_caret.vue';
-import itemTypeIcon from './item_type_icon.vue';
-import itemStats from './item_stats.vue';
-import itemActions from './item_actions.vue';
+  import itemCaret from './item_caret.vue';
+  import itemTypeIcon from './item_type_icon.vue';
+  import itemStats from './item_stats.vue';
+  import itemActions from './item_actions.vue';
 
-export default {
+  export default {
     directives: {
       tooltip,
     },
@@ -66,7 +66,7 @@ export default {
         }
       },
     },
-};
+  };
 </script>
 
 <template>
@@ -84,14 +84,10 @@ export default {
         :group="group"
         :parent-group="parentGroup"
       />
-      <item-stats
-        :item="group"
-      />
+      <item-stats :item="group" />
       <div
         class="folder-toggle-wrap">
-        <item-caret
-          :is-group-open="group.isOpen"
-        />
+        <item-caret :is-group-open="group.isOpen" />
         <item-type-icon
           :item-type="group.type"
           :is-group-open="group.isOpen"
@@ -113,7 +109,7 @@ export default {
           <identicon
             v-else
             size-class="s24"
-            :entity-id=group.id
+            :entity-id="group.id"
             :entity-name="group.name"
           />
         </a>
@@ -135,13 +131,13 @@ export default {
           v-if="group.permission"
           class="user-access-role"
         >
-          {{group.permission}}
+          {{ group.permission }}
         </span>
       </div>
       <div
         v-if="group.description"
         class="description">
-        {{group.description}}
+        {{ group.description }}
       </div>
     </div>
     <group-folder

app/assets/javascripts/ide/components/repo_editor.vue

@@ -20,6 +20,38 @@ export default {
       });
     }
   },
+  computed: {
+    ...mapGetters([
+      'activeFile',
+      'activeFileExtension',
+    ]),
+    ...mapState([
+      'leftPanelCollapsed',
+      'rightPanelCollapsed',
+      'panelResizing',
+    ]),
+    shouldHideEditor() {
+      return this.activeFile.binary && !this.activeFile.raw;
+    },
+  },
+  watch: {
+    activeFile(oldVal, newVal) {
+      if (newVal && !newVal.active) {
+        this.initMonaco();
+      }
+    },
+    leftPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    rightPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    panelResizing(isResizing) {
+      if (isResizing === false) {
+        this.editor.updateDimensions();
+      }
+    },
+  },
   methods: {
     ...mapActions([
       'getRawFileData',
@@ -78,38 +110,6 @@ export default {
       });
     },
   },
-  watch: {
-    activeFile(oldVal, newVal) {
-      if (newVal && !newVal.active) {
-        this.initMonaco();
-      }
-    },
-    leftPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
-    rightPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
-    panelResizing(isResizing) {
-      if (isResizing === false) {
-        this.editor.updateDimensions();
-      }
-    },
-  },
-  computed: {
-    ...mapGetters([
-      'activeFile',
-      'activeFileExtension',
-    ]),
-    ...mapState([
-      'leftPanelCollapsed',
-      'rightPanelCollapsed',
-      'panelResizing',
-    ]),
-    shouldHideEditor() {
-      return this.activeFile.binary && !this.activeFile.raw;
-    },
-  },
 };
 </script>
 

app/assets/javascripts/ide/components/repo_file.vue

@@ -6,14 +6,14 @@
   import fileIcon from '../../vue_shared/components/file_icon.vue';
 
   export default {
-    mixins: [
-      timeAgoMixin,
-    ],
     components: {
       skeletonLoadingContainer,
       newDropdown,
       fileIcon,
     },
+    mixins: [
+      timeAgoMixin,
+    ],
     props: {
       file: {
         type: Object,
@@ -99,8 +99,7 @@
           :opened="file.opened"
           :style="levelIndentation"
           :size="16"
-        >
-        </file-icon>
+        />
         {{ file.name }}
       </a>
       <new-dropdown
@@ -108,7 +107,8 @@
         :project-id="file.projectId"
         :branch="file.branchId"
         :path="file.path"
-        :parent="file"/>
+        :parent="file"
+      />
       <i
         class="fa"
         v-if="changedClass"

app/assets/javascripts/ide/components/repo_loading_file.vue

@@ -25,15 +25,13 @@
       />
     </td>
     <template v-if="!leftPanelCollapsed">
-      <td
-        class="hidden-sm hidden-xs">
+      <td class="hidden-sm hidden-xs">
         <skeleton-loading-container
           :small="true"
         />
       </td>
 
-      <td
-        class="hidden-xs">
+      <td class="hidden-xs">
         <skeleton-loading-container
           class="animation-container-right"
           :small="true"

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -15,7 +15,7 @@
       <h4>{{ name }}</h4>
     </div>
     <div class="panel-body prometheus-graph-group">
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>

app/assets/javascripts/pdf/page/index.vue

@@ -45,24 +45,26 @@
   <canvas
     class="pdf-page"
     ref="canvas"
-    :data-page="number" />
+    :data-page="number"
+  >
+  </canvas>
 </template>
 
 <style>
-.pdf-page {
+  .pdf-page {
     margin: 8px auto 0 auto;
     border-top: 1px #ddd solid;
     border-bottom: 1px #ddd solid;
     width: 100%;
-}
+  }
 
-.pdf-page:first-child {
+  .pdf-page:first-child {
     margin-top: 0px;
     border-top: 0px;
-}
+  }
 
-.pdf-page:last-child {
+  .pdf-page:last-child {
     margin-bottom: 0px;
     border-bottom: 0px;
-}
+  }
 </style>

app/assets/javascripts/profile/account/components/delete_account_modal.vue

@@ -4,6 +4,9 @@
   import csrf from '~/lib/utils/csrf';
 
   export default {
+    components: {
+      modal,
+    },
     props: {
       actionUrl: {
         type: String,
@@ -24,9 +27,6 @@
         enteredUsername: '',
       };
     },
-    components: {
-      modal,
-    },
     computed: {
       csrfToken() {
         return csrf.token;
@@ -85,7 +85,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
     @submit="onSubmit"
     :submit-disabled="!canSubmit()">
 
-    <template slot="body" slot-scope="props">
+    <template
+      slot="body"
+      slot-scope="props">
       <p v-html="props.text"></p>
 
       <form
@@ -96,13 +98,19 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         <input
           type="hidden"
           name="_method"
-          value="delete" />
+          value="delete"
+        />
         <input
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken" />
+          :value="csrfToken"
+        />
 
-        <p id="input-label" v-html="inputLabel"></p>
+        <p
+          id="input-label"
+          v-html="inputLabel"
+        >
+        </p>
 
         <input
           v-if="confirmWithPassword"
@@ -110,14 +118,16 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
           class="form-control"
           type="password"
           v-model="enteredPassword"
-          aria-labelledby="input-label" />
+          aria-labelledby="input-label"
+        />
         <input
           v-else
           name="username"
           class="form-control"
           type="text"
           v-model="enteredUsername"
-          aria-labelledby="input-label" />
+          aria-labelledby="input-label"
+        />
       </form>
     </template>
 

app/assets/javascripts/projects/permissions/components/project_setting_row.vue

@@ -46,6 +46,6 @@
     >
       {{ helpText }}
     </span>
-    <slot />
+    <slot></slot>
   </div>
 </template>

app/assets/javascripts/projects_dropdown/components/search.vue

@@ -59,6 +59,7 @@
       v-if="!searchQuery"
       class="search-icon fa fa-fw fa-search"
       aria-hidden="true"
-    />
+    >
+    </i>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -20,10 +20,12 @@
       hasCi: {
         type: Boolean,
         required: false,
+        default: false,
       },
       ciStatus: {
         type: String,
         required: false,
+        default: '',
       },
     },
     computed: {
@@ -31,7 +33,7 @@
         return this.pipeline && Object.keys(this.pipeline).length > 0;
       },
       hasCIError() {
-        return this.hasCi && !this.ciStatus;
+        return this.hasCi && this.ciStatus !== '';
       },
       status() {
         return this.pipeline.details &&

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -7,6 +7,10 @@
 
   export default {
     name: 'MRWidgetRebase',
+    components: {
+      statusIcon,
+      loadingIcon,
+    },
     props: {
       mr: {
         type: Object,
@@ -17,10 +21,6 @@
         required: true,
       },
     },
-    components: {
-      statusIcon,
-      loadingIcon,
-    },
     data() {
       return {
         isMakingRequest: false,
@@ -100,7 +100,7 @@
         <span class="bold">
           Fast-forward merge is not possible.
           Rebase the source branch onto
-          <span class="label-branch">{{mr.targetBranch}}</span>
+          <span class="label-branch">{{ mr.targetBranch }}</span>
           to allow this merge request to be merged.
         </span>
       </template>
@@ -110,13 +110,15 @@
             type="button"
             class="btn btn-sm btn-reopen btn-success"
             :disabled="isMakingRequest"
-            @click="rebase">
+            @click="rebase"
+          >
             <loading-icon v-if="isMakingRequest" />
             Rebase
           </button>
           <span
             v-if="!rebasingError"
-            class="bold">
+            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.
@@ -124,7 +126,7 @@
           <span
             v-else
             class="bold danger">
-            {{rebasingError}}
+            {{ rebasingError }}
           </span>
         </div>
       </template>

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

@@ -11,7 +11,7 @@
    * </expand-button>
    */
   export default {
-    name: 'expandButton',
+    name: 'ExpandButton',
     data() {
       return {
         isCollapsed: true,

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

 <script>
-export default {
-  name: 'modal',
+  export default {
+    name: 'Modal',
 
     props: {
       id: {
         type: String,
         required: false,
+        default: '',
       },
       title: {
         type: String,
         required: false,
+        default: '',
       },
       text: {
         type: String,
         required: false,
+        default: '',
       },
       hideFooter: {
         type: Boolean,
@@ -73,15 +76,15 @@ export default {
         this.$emit('submit', event);
       },
     },
-};
+  };
 </script>
 
 <template>
-<div class="modal-open">
+  <div class="modal-open">
     <div
       :id="id"
       class="modal"
-    :class="id ? '' : 'show'"
+      :class="id !== '' ? '' : 'show'"
       role="dialog"
       tabindex="-1"
     >
@@ -94,7 +97,7 @@ export default {
           <div class="modal-header">
             <slot name="header">
               <h4 class="modal-title pull-left">
-              {{this.title}}
+                {{ this.title }}
               </h4>
               <button
                 type="button"
@@ -109,16 +112,20 @@ export default {
           </div>
           <div class="modal-body">
             <slot name="body" :text="text">
-            <p>{{this.text}}</p>
+              <p>{{ this.text }}</p>
             </slot>
           </div>
-        <div class="modal-footer" v-if="!hideFooter">
+          <div
+            class="modal-footer"
+            v-if="!hideFooter"
+          >
             <button
               type="button"
               class="btn pull-left"
               :class="btnCancelKindClass"
               @click="emitCancel($event)"
-            data-dismiss="modal">
+              data-dismiss="modal"
+            >
               {{ closeButtonLabel }}
             </button>
             <button
@@ -128,7 +135,8 @@ export default {
               :disabled="submitDisabled"
               :class="btnKindClass"
               @click="emitSubmit($event)"
-            data-dismiss="modal">
+              data-dismiss="modal"
+            >
               {{ primaryButtonLabel }}
             </button>
           </div>
@@ -136,8 +144,8 @@ export default {
       </div>
     </div>
     <div
-    v-if="!id"
+      v-if="id !== ''"
       class="modal-backdrop fade in">
     </div>
-</div>
+  </div>
 </template>

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

 <script>
-import modal from './modal.vue';
+  import modal from './modal.vue';
 
-export default {
-  name: 'recaptcha-modal',
+  export default {
+    name: 'RecaptchaModal',
+
+    components: {
+      modal,
+    },
 
     props: {
       html: {
@@ -19,8 +23,14 @@ export default {
       };
     },
 
-  components: {
-    modal,
+    watch: {
+      html() {
+        this.appendRecaptchaScript();
+      },
+    },
+
+    mounted() {
+      window.recaptchaDialogCallback = this.submit.bind(this);
     },
 
     methods: {
@@ -51,35 +61,26 @@ export default {
         this.$el.querySelector('form').submit();
       },
     },
-
-  watch: {
-    html() {
-      this.appendRecaptchaScript();
-    },
-  },
-
-  mounted() {
-    window.recaptchaDialogCallback = this.submit.bind(this);
-  },
-};
+  };
 </script>
 
 <template>
-<modal
+  <modal
     kind="warning"
     class="recaptcha-modal js-recaptcha-modal"
     :hide-footer="true"
     :title="__('Please solve the reCAPTCHA')"
     @cancel="close"
->
+  >
     <div slot="body">
       <p>
-      {{__('We want to be sure it is you, please confirm you are not a robot.')}}
+        {{ __('We want to be sure it is you, please confirm you are not a robot.') }}
       </p>
       <div
         ref="recaptcha"
         v-html="html"
-    ></div>
+      >
+      </div>
     </div>
-</modal>
+  </modal>
 </template>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

@@ -24,7 +24,11 @@
     <i
       aria-label="toggle collapse"
       class="fa"
-      :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }"
-    />
+      :class="{
+        'fa-angle-double-right': !collapsed,
+        'fa-angle-double-left': collapsed
+      }"
+    >
+    </i>
   </button>
 </template>