diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md index e39555bb9..90c00959d 100644 --- a/docs/rules/component-name-in-template-casing.md +++ b/docs/rules/component-name-in-template-casing.md @@ -33,6 +33,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js - `registeredComponentsOnly` ... If `true`, only registered components (in PascalCase) are checked. If `false`, check all. default `true` - `ignores` (`string[]`) ... The element names to ignore. Sets the element name to allow. For example, custom elements or Vue components with special name. You can set the regexp by writing it like `"/^name/"`. +- `globals` (`string[]`) ... Globally registered component names to check. For example, `RouterView` and `RouterLink` are globally registered by `vue-router` and can't be detected as registered in a SFC file. ### `"PascalCase", { registeredComponentsOnly: true }` (default) @@ -141,6 +142,22 @@ export default { +### `"PascalCase", { globals: ["RouterView"] }` + + + +```vue + +``` + + + ## :books: Further Reading - [Style guide - Component name casing in templates](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates) diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js index 772fa83ac..ef137f65c 100644 --- a/lib/rules/component-name-in-template-casing.js +++ b/lib/rules/component-name-in-template-casing.js @@ -40,6 +40,11 @@ module.exports = { { type: 'object', properties: { + globals: { + type: 'array', + items: { type: 'string' }, + uniqueItems: true + }, ignores: { type: 'array', items: { type: 'string' }, @@ -63,13 +68,15 @@ module.exports = { : defaultCase /** @type {RegExp[]} */ const ignores = (options.ignores || []).map(toRegExp) + /** @type {string[]} */ + const globals = (options.globals || []).map(casing.pascalCase) const registeredComponentsOnly = options.registeredComponentsOnly !== false const tokens = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore() /** @type { Set } */ - const registeredComponents = new Set() + const registeredComponents = new Set(globals) if (utils.isScriptSetup(context)) { // For `, errors: ['Component name "TheComponent" is not kebab-case.'] + }, + { + code: ` + + `, + options: ['PascalCase', { globals: ['RouterView'] }], + output: ` + + `, + errors: [ + { + message: 'Component name "router-view" is not PascalCase.', + line: 3, + column: 11 + } + ] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['RouterView'] }], + output: ` + + `, + errors: [ + { + message: 'Component name "RouterView" is not kebab-case.', + line: 3, + column: 11 + } + ] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['router-view'] }], + output: ` + + `, + errors: [ + { + message: 'Component name "RouterView" is not kebab-case.', + line: 3, + column: 11 + } + ] } ] })