Skip to content

Re-enable vue/multi-word-component-names

The following discussion from !84623 (merged) should be addressed:

Actually, looking at app/assets/javascripts/content_editor/components/bubble_menus/formatting.vue has made me realise that the way the lint rule is written doesn't make sense 🤔 It doesn't matter what the component's internal name is, only the name under which it's registered.

That is, the rule does not complain about this hypothetical step_component.vue file:

<script>
export default {
  name: 'StepComponent',
  // etc...
};
</script>

So far so good. But then where it's used:

<script>
import step from './step_component.vue';

export default {
  components: {
    step,
  },
};
</script>

<template>
  <step>foo</step>
</template>

This is surely incorrect, since if tomorrow a native <step> element is defined, this will break/behave unexpectedly (once vue is updated anyway).

This definitely seems like an oversight, since it does prevent something like Vue.component('step', {}).

So, I think I'm going to have to backtrack on this 🙈 Sorry @afontaine and everyone else! I think we should:

  1. Disable the rule in this MR
  2. Open an MR to disable it in @gitlab/eslint-plugin
  3. Open an issue upstream for this
  4. Open follow-up issues to re-enable the rule once this is address upstream.

For now, this issue represents all next steps. This issue should be broken down into separate issues.