ITADN

Adjust or remove `multi-word-component-names` from `vue3-essential` config

#3060Openhaoqunjiang 创建于 2026-03-18
H
haoqunjiangcommented
**The problem you want to solve.** I understand that the shared config is based on an outdated style guide and is intended to be deprecated in the future. But until we have a better alternative, I think it is still beneficial to update the config to reflect modern Vue.js practices. This rule was included to "prevent conflicts with existing and future HTML elements, since all HTML elements are single words". However, it is becoming increasingly annoying in modern Vue.js development. Now that file-based routing has become mainstream, many page components are single-word components, and that should be considered acceptable. The popular shareable ESLint config `@antfu/eslint-config` disables this rule by default: https://github.com/antfu/eslint-config/blob/54241c17cf2fbc5652e7a5ceffa3786a85bb7866/src/configs/vue.ts#L143 `@nuxt/eslint-config` disables this rule for file-based routes: https://github.com/nuxt/eslint/blob/f852ae5c06910520d5f69891f5a16faa460e8bd0/packages/eslint-config/src/configs/disables.ts#L36 Many Vue projects on GitHub explicitly disable it as well: https://github.com/search?q=multi-word-component-names&type=code Now that we have [file-based routing support in `vue-router` v5](https://router.vuejs.org/file-based-routing/file-based-routing.html), I am also considering disabling this rule for files under `src/pages` in `create-vue` templates. However, I would prefer a solution in the official config so that I do not have to override it in userland. **Your take on the correct solution to the problem.** The original goal to "prevent conflicts with existing and future HTML elements" can be achieved in other ways. In Vue 3, we encourage users to use PascalCase for Vue components and kebab-case for HTML elements. Only in-DOM template users would still need this rule to avoid conflicts. I propose either adjusting the default exclusion patterns for this rule or removing it from the `vue3-essential` config. Personally, I am more inclined toward complete removal. If we are to adjust the exclusion pattern, I suggest ignoring all files under the `**/pages/` directory (`vue-router` and `quasar` use `src/pages/`, and `nuxt` uses `app/pages/` for file-based routing). **Additional context**
1 条评论