[ci skip] Fix more rules

.eslintrc

@@ -37,6 +37,16 @@
     "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
     "promise/catch-or-return": "error",
-    "no-underscore-dangle": ["error", { "allow": ["__"]}]
+    "no-underscore-dangle": ["error", { "allow": ["__"]}],
+    "vue/html-self-closing": ["error", {
+      "html": {
+        "void": "always",
+        "normal": "any",
+        "component": "always"
+      },
+      "svg": "always",
+      "math": "any"
+    }]
+
   }
 }

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

 <script>
-export default {
-  name: 'modal',
-
+  export default {
+    name: 'Modal',
     props: {
       title: {
         type: String,
         required: false,
+        default: '',
       },
       text: {
         type: String,
         required: false,
+        default: '',
       },
       hideFooter: {
         type: Boolean,
@@ -69,11 +70,10 @@ export default {
         this.$emit('submit', status);
       },
     },
-};
+  };
 </script>
-
 <template>
-<div class="modal-open">
+  <div class="modal-open">
     <div
       class="modal show"
       role="dialog"
@@ -88,7 +88,7 @@ export default {
           <div class="modal-header">
             <slot name="header">
               <h4 class="modal-title pull-left">
-              {{this.title}}
+                {{ this.title }}
               </h4>
               <button
                 type="button"
@@ -101,11 +101,13 @@ export default {
             </slot>
           </div>
           <div class="modal-body">
-          <slot name="body" :text="text">
-            <p>{{this.text}}</p>
+            <slot name="body">
             </slot>
           </div>
-        <div class="modal-footer" v-if="!hideFooter">
+          <div
+            class="modal-footer"
+            v-if="!hideFooter"
+          >
             <button
               type="button"
               class="btn pull-left"
@@ -126,6 +128,6 @@ export default {
         </div>
       </div>
     </div>
-  <div class="modal-backdrop fade in" />
-</div>
+    <div class="modal-backdrop fade in"></div>
+  </div>
 </template>

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

@@ -45,7 +45,7 @@
         this.$emit('onChangeTab', tab.scope);
       },
     },
-};
+  };
 </script>
 <template>
   <ul class="nav-links scrolling-tabs">
@@ -67,9 +67,8 @@
           v-if="shouldRenderBadge(tab.count)"
           class="badge"
         >
-          {{tab.count}}
+          {{ tab.count }}
         </span>
-
       </a>
     </li>
   </ul>

app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue

@@ -20,16 +20,16 @@
   import userAvatarLink from '../user_avatar/user_avatar_link.vue';
 
   export default {
-    name: 'placeholderNote',
+    name: 'PlaceholderNote',
+    components: {
+      userAvatarLink,
+    },
     props: {
       note: {
         type: Object,
         required: true,
       },
     },
-    components: {
-      userAvatarLink,
-    },
     computed: {
       ...mapGetters([
         'getUserData',
@@ -54,14 +54,14 @@
         <div class="note-header">
           <div class="note-header-info">
             <a :href="getUserData.path">
-              <span class="hidden-xs">{{getUserData.name}}</span>
-              <span class="note-headline-light">@{{getUserData.username}}</span>
+              <span class="hidden-xs">{{ getUserData.name }}</span>
+              <span class="note-headline-light">@{{ getUserData.username }}</span>
             </a>
           </div>
         </div>
         <div class="note-body">
           <div class="note-text">
-            <p>{{note.body}}</p>
+            <p>{{ note.body }}</p>
           </div>
         </div>
       </div>

app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue

@@ -8,7 +8,7 @@
    *  />
    */
   export default {
-    name: 'placeholderSystemNote',
+    name: 'PlaceholderSystemNote',
     props: {
       note: {
         type: Object,
@@ -22,7 +22,7 @@
   <li class="note system-note timeline-entry being-posted fade-in-half">
     <div class="timeline-entry-inner">
       <div class="timeline-content">
-       <em>{{note.body}}</em>
+        <em>{{ note.body }}</em>
       </div>
     </div>
   </li>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -21,16 +21,16 @@
   import { spriteIcon } from '../../../lib/utils/common_utils';
 
   export default {
-    name: 'systemNote',
+    name: 'SystemNote',
+    components: {
+      noteHeader,
+    },
     props: {
       note: {
         type: Object,
         required: true,
       },
     },
-    components: {
-      noteHeader,
-    },
     computed: {
       ...mapGetters([
         'targetNoteHash',

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

 <script>
-export default {
+  export default {
     props: {
       startSize: {
         type: Number,
@@ -77,7 +77,7 @@ export default {
         this.$emit('resize-end', this.size);
       },
     },
-};
+  };
 </script>
 
 <template>

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

@@ -3,7 +3,7 @@
   import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
 
   export default {
-    name: 'datePicker',
+    name: 'DatePicker',
     props: {
       label: {
         type: String,
@@ -23,14 +23,6 @@
         required: false,
       },
     },
-    methods: {
-      selected(dateText) {
-        this.$emit('newDateSelected', this.calendar.toString(dateText));
-      },
-      toggled() {
-        this.$emit('hidePicker');
-      },
-    },
     mounted() {
       this.calendar = new Pikaday({
         field: this.$el.querySelector('.dropdown-menu-toggle'),
@@ -53,6 +45,14 @@
     beforeDestroy() {
       this.calendar.destroy();
     },
+    methods: {
+      selected(dateText) {
+        this.$emit('newDateSelected', this.calendar.toString(dateText));
+      },
+      toggled() {
+        this.$emit('hidePicker');
+      },
+    },
   };
 </script>
 
@@ -66,7 +66,7 @@
         @click="toggled"
       >
         <span class="dropdown-toggle-text">
-          {{label}}
+          {{ label }}
         </span>
         <i
           class="fa fa-chevron-down"

app/assets/javascripts/vue_shared/components/project_avatar/image.vue

 <script>
 
-/* This is a re-usable vue component for rendering a project avatar that
+  /* This is a re-usable vue component for rendering a project avatar that
     does not need to link to the project's profile. The image and an optional
     tooltip can be configured by props passed to this component.
 
@@ -14,14 +14,17 @@
       tooltip-placement="top"
     />
 
-*/
+  */
 
-import defaultAvatarUrl from 'images/no_avatar.png';
-import { placeholderImage } from '../../../lazy_loader';
-import tooltip from '../../directives/tooltip';
+  import defaultAvatarUrl from 'images/no_avatar.png';
+  import { placeholderImage } from '../../../lazy_loader';
+  import tooltip from '../../directives/tooltip';
 
-export default {
+  export default {
     name: 'ProjectAvatarImage',
+    directives: {
+      tooltip,
+    },
     props: {
       lazy: {
         type: Boolean,
@@ -59,9 +62,6 @@ export default {
         default: 'top',
       },
     },
-  directives: {
-    tooltip,
-  },
     computed: {
       // API response sends null when gravatar is disabled and
       // we provide an empty string when we use it inside project avatar link.
@@ -79,7 +79,7 @@ export default {
         return `s${this.size}`;
       },
     },
-};
+  };
 </script>
 
 <template>
@@ -87,7 +87,7 @@ export default {
     v-tooltip
     class="avatar"
     :class="{
-      lazy,
+      lazy: lazy,
       [avatarSizeClass]: true,
       [cssClasses]: true
     }"

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

@@ -2,8 +2,10 @@
 import modal from './modal.vue';
 
 export default {
-  name: 'recaptcha-modal',
-
+  name: 'RecaptchaModal',
+  components: {
+    modal,
+  },
   props: {
     html: {
       type: String,
@@ -18,11 +20,14 @@ export default {
       scriptSrc: 'https://www.google.com/recaptcha/api.js',
     };
   },
-
-  components: {
-    modal,
+  watch: {
+    html() {
+      this.appendRecaptchaScript();
+    },
+  },
+  mounted() {
+    window.recaptchaDialogCallback = this.submit.bind(this);
   },
-
   methods: {
     appendRecaptchaScript() {
       this.removeRecaptchaScript();
@@ -51,35 +56,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')"
     @toggle="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/collapsed_calendar_icon.vue

 <script>
   export default {
-    name: 'collapsedCalendarIcon',
+    name: 'CollapsedCalendarIcon',
     props: {
       containerClass: {
         type: String,

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

@@ -4,7 +4,11 @@
   import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
 
   export default {
-    name: 'sidebarCollapsedGroupedDatePicker',
+    name: 'SidebarCollapsedGroupedDatePicker',
+    components: {
+      toggleSidebar,
+      collapsedCalendarIcon,
+    },
     props: {
       collapsed: {
         type: Boolean,
@@ -30,10 +34,6 @@
         default: false,
       },
     },
-    components: {
-      toggleSidebar,
-      collapsedCalendarIcon,
-    },
     computed: {
       hasMinAndMaxDates() {
         return this.minDate && this.maxDate;

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

@@ -6,7 +6,13 @@
   import { dateInWords } from '../../../lib/utils/datetime_utility';
 
   export default {
-    name: 'sidebarDatePicker',
+    name: 'SidebarDatePicker',
+    components: {
+      datePicker,
+      toggleSidebar,
+      loadingIcon,
+      collapsedCalendarIcon,
+    },
     props: {
       collapsed: {
         type: Boolean,
@@ -51,12 +57,6 @@
         editing: false,
       };
     },
-    components: {
-      datePicker,
-      toggleSidebar,
-      loadingIcon,
-      collapsedCalendarIcon,
-    },
     computed: {
       selectedAndEditable() {
         return this.selectedDate && this.editable;

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

 <script>
   export default {
-    name: 'toggleSidebar',
+    name: 'ToggleSidebar',
     props: {
       collapsed: {
         type: Boolean,
@@ -25,6 +25,6 @@
       aria-label="toggle collapse"
       class="fa"
       :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }"
-    ></i>
+    />
   </button>
 </template>

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

 <script>
-import { s__ } from '../../locale';
+  import { s__ } from '../../locale';
 
-const PAGINATION_UI_BUTTON_LIMIT = 4;
-const UI_LIMIT = 6;
-const SPREAD = '...';
-const PREV = s__('Pagination|Prev');
-const NEXT = s__('Pagination|Next');
-const FIRST = s__('Pagination|« First');
-const LAST = s__('Pagination|Last »');
+  const PAGINATION_UI_BUTTON_LIMIT = 4;
+  const UI_LIMIT = 6;
+  const SPREAD = '...';
+  const PREV = s__('Pagination|Prev');
+  const NEXT = s__('Pagination|Next');
+  const FIRST = s__('Pagination|« First');
+  const LAST = s__('Pagination|Last »');
 
-export default {
+  export default {
     props: {
       /**
         This function will take the information given by the pagination component
-
-      Here is an example `change` method:
-
-      change(pagenum) {
-        gl.utils.visitUrl(`?page=${pagenum}`);
-      },
       */
       change: {
         type: Function,
@@ -46,34 +40,6 @@ export default {
         required: true,
       },
     },
-  methods: {
-    changePage(e) {
-      if (e.target.parentElement.classList.contains('disabled')) return;
-
-      const text = e.target.innerText;
-      const { totalPages, nextPage, previousPage } = this.pageInfo;
-
-      switch (text) {
-        case SPREAD:
-          break;
-        case LAST:
-          this.change(totalPages);
-          break;
-        case NEXT:
-          this.change(nextPage);
-          break;
-        case PREV:
-          this.change(previousPage);
-          break;
-        case FIRST:
-          this.change(1);
-          break;
-        default:
-          this.change(+text);
-          break;
-      }
-    },
-  },
     computed: {
       prev() {
         return this.pageInfo.previousPage;
@@ -126,7 +92,35 @@ export default {
         return this.pageInfo.totalPages > 1;
       },
     },
-};
+    methods: {
+      changePage(e) {
+        if (e.target.parentElement.classList.contains('disabled')) return;
+
+        const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+        switch (text) {
+          case SPREAD:
+            break;
+          case LAST:
+            this.change(totalPages);
+            break;
+          case NEXT:
+            this.change(nextPage);
+            break;
+          case PREV:
+            this.change(previousPage);
+            break;
+          case FIRST:
+            this.change(1);
+            break;
+          default:
+            this.change(+text);
+            break;
+        }
+      },
+    },
+  };
 </script>
 <template>
   <div
@@ -135,7 +129,8 @@ export default {
   >
     <ul class="pagination clearfix">
       <li
-        v-for="item in getItems"
+        v-for="(item, index) in getItems"
+        :key="index"
         :class="{
           page: item.page,
           'js-previous-button': item.prev,
@@ -145,8 +140,11 @@ export default {
           separator: item.separator,
           active: item.active,
           disabled: item.disabled
-        }">
-        <a @click.prevent="changePage($event)">{{item.title}}</a>
+        }"
+      >
+        <a @click.prevent="changePage($event)">
+          {{ item.title }}
+        </a>
       </li>
     </ul>
   </div>

package.json

@@ -90,11 +90,11 @@
   "devDependencies": {
     "@gitlab-org/gitlab-svgs": "^1.4.0",
     "babel-plugin-istanbul": "^4.1.5",
-    "eslint": "^3.10.1",
+    "eslint": "3.18.0",
     "eslint-config-airbnb-base": "^10.0.1",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-filenames": "^1.1.0",
-    "eslint-plugin-html": "^4.0.1",
+    "eslint-plugin-html": "2.0.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jasmine": "^2.1.0",
     "eslint-plugin-promise": "^3.5.0",

yarn.lock

@@ -2372,9 +2372,9 @@ eslint-plugin-filenames@^1.1.0:
     lodash.kebabcase "4.0.1"
     lodash.snakecase "4.0.1"
 
-eslint-plugin-html@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-4.0.1.tgz#fc70072263cc938496fbbc9cf648660e41fa269a"
+eslint-plugin-html@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-2.0.1.tgz#3a829510e82522f1e2e44d55d7661a176121fce1"
   dependencies:
     htmlparser2 "^3.8.2"
 
@@ -2419,9 +2419,9 @@ eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
-eslint@^3.10.1:
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
+eslint@3.18.0:
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.18.0.tgz#647e985c4ae71502d20ac62c109f66d5104c8a4b"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"