Address `vue/custom-event-name-casing` offenses

❗ COMMUNITY CONTRIBUTORS, PLEASE ONLY PICK UP ONE DIRECTORY OF <20 FILES AT A TIME TO KEEP MERGE REQUESTS MANAGEABLE ❗

The vue/custom-event-name-casing ESLint rule was enabled in Adds linting for Vue events formatting (!214221 - merged) and uncovered many offenses

This epic tracks the progress for addressing existing offenses in the files that are currently ignored in .eslint_todo/vue-custom-event-name-casing.mjs.

Example from the docs. We are standardizing on kebab case and not allowing camelCase.

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('my-event')" />

  <!-- ✗ BAD -->
  <button @click="$emit('myEvent')" />
</template>
<script>
export default {
  methods: {
    onClick() {
      /* ✓ GOOD */
      this.$emit('my-event')

      /* ✗ BAD */
      this.$emit('myEvent')
    }
  }
}
</script>

Implementation

  1. Pick a directory of files from .eslint_todo/vue-custom-event-name-casing.mjs
  2. Change the event names in all the files in the directory to be kebab-case
  3. Update the event names of all usage of changed event names
  4. Create a screen recording of the components working as expected in the application
  5. Remove the modified files from .eslint_todo/vue-custom-event-name-casing.mjs and .eslint_todo/vue-v-on-event-hyphenation.mjs (The eslint file .eslint_todo/vue-custom-event-name-casing.mjs enforces the rule that components must emit kebab-case custom events. The eslint file .eslint_todo/vue-v-on-event-hyphenation.mjs enforces the rule that components must consume kebab-case custom events.)
  6. Stage all changes 
    git add .
  7. Run Prettier on all staged files 
    yarn run lint:prettier:staged:fix
  8. Stage all new changes 
    git add .
  9. Run eslint to verify all files were fixed or fix any any issues 
    node scripts/frontend/eslint.js --no-warn-ignored --no-error-on-unmatched-pattern --format gitlab .eslint_todo/vue-custom-event-name-casing.mjs ./path/to/directory
  10. Open a merge request to update any alt text that doesn't follow the guidelines. For details with how to open a merge request, see Contribute to the GitLab documentation. In the merge request description, include this text: 
    Related to: https://gitlab.com/gitlab-org/gitlab/-/issues/583558

Support

Support contact: @aturinske

Edited by 🤖 GitLab Bot 🤖