Review and enable new eslint-plugin-vue rules

The following discussion from gitlab-ce!21825 should be addressed:

  • @mikegreiling started a discussion: (+1 comment)

    These should be re-enabled in a follow-up MR after we have evaluated which rules we wish to adopt and how we'd like to configure them.

    Disabling v-html for example is probably a good idea, but we currently use it in quite a few places where we insert formatted translation strings or svg nodes into our elements. Enabling this will require us to address a good deal of gitlab-ce~3011693

Recent updates to eslint-plugin-vue have added the following new recommended rules:

  • vue/html-closing-bracket-newline
  • vue/html-closing-bracket-spacing
  • vue/no-unused-components
  • vue/no-v-html

And it has also replaced vue/no-confusing-v-for-v-if with vue/no-use-v-if-with-v-for which, rather than enforcing the order of v-for and v-if, it outright bans the use of both of these within the same element.

I think the first three should be completely uncontroversial, but the ban on v-html may require some work to fix as we currently require it for embedding SVGs and for some locale strings that contain markup. See gitlab-ce#42402 and gitlab-ce#37850.

Assignee Loading
Time tracking Loading