Skip to content

Enable vue/multi-word-component-names lint rule

Miguel Rincon requested to merge 360551-add-warn-to-disabled-rule-only-ce into master

What does this MR do and why?

This change adds linting to non-EE .vue files to ensure we use two words in their name with "vue/multi-word-component-names".

This important as we have some usages of components that have the same name as some HTML tags, like `form` and `table`.

Single name components are discouraged by the Vue style guide.

They can be a problem because they can be confused with other HTML components: We could name a component <table> and it would override HTML <table> in markup.

In this case we could create a <default> component which is very generic (but unlikely to cause collisions), in other cases, like in a component <header> (app/assets/javascripts/repository/components/table/header.vue) and <html> (app/assets/javascripts/notebook/cells/output/html.vue) we are already conflicting with HTML 😱.

Note: I've split this change from !126678 (closed), to reduce the size of the MRs and avoid merge conflicts.

MR
Enable vue/multi-word-component-names lint rule (!127929 - merged) 👇 you're here!
Remove override for vue/multi-word-component-names (!127930 - merged)

Screenshots or screen recordings

NA

Command to re-apply eslint-disable in all files

We can use this in case of merge conflicts:

for file in $(yarn eslint **/*.vue | grep app/assets/javascripts); do sed -i '' '1 s/^/<!-- eslint-disable vue\/multi-word-component-names -->\n/' ${file}; done

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #360551 (closed)

Edited by Miguel Rincon

Merge request reports