From b5c3e78e1ebbef6dba360427bc27a64a6c57263c Mon Sep 17 00:00:00 2001 From: lsdsjy Date: Mon, 26 Sep 2022 18:25:43 +0800 Subject: [PATCH 1/5] feat: add `globals` option to `component-name-in-template-casing` --- .../component-name-in-template-casing.md | 1 + .../component-name-in-template-casing.js | 20 ++++---- .../component-name-in-template-casing.js | 51 +++++++++++++++++++ 3 files changed, 62 insertions(+), 10 deletions(-) diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md index e39555bb9..ebbc6ce92 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) 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: + '\n \n ', + errors: ['Component name "router-view" is not PascalCase.'] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['RouterView'] }], + output: + '\n \n ', + errors: ['Component name "RouterView" is not kebab-case.'] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['router-view'] }], + output: + '\n \n ', + errors: ['Component name "RouterView" is not kebab-case.'] } ] }) From 36029448c43efe443b87c33578a14f7f0de60faa Mon Sep 17 00:00:00 2001 From: lsdsjy Date: Mon, 26 Sep 2022 19:15:52 +0800 Subject: [PATCH 2/5] chore: add test cases --- .../component-name-in-template-casing.js | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js index 9db956a50..9161e82ad 100644 --- a/tests/lib/rules/component-name-in-template-casing.js +++ b/tests/lib/rules/component-name-in-template-casing.js @@ -186,6 +186,22 @@ tester.run('component-name-in-template-casing', rule, { `, options: ['PascalCase', { globals: ['router-view'] }] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['RouterView'] }] + }, + { + code: ` + + `, + options: ['kebab-case', { globals: ['router-view'] }] } ], invalid: [ @@ -880,8 +896,11 @@ tester.run('component-name-in-template-casing', rule, { `, options: ['PascalCase', { globals: ['RouterView'] }], - output: - '\n \n ', + output: ` + + `, errors: ['Component name "router-view" is not PascalCase.'] }, { @@ -891,8 +910,11 @@ tester.run('component-name-in-template-casing', rule, { `, options: ['kebab-case', { globals: ['RouterView'] }], - output: - '\n \n ', + output: ` + + `, errors: ['Component name "RouterView" is not kebab-case.'] }, { @@ -902,8 +924,11 @@ tester.run('component-name-in-template-casing', rule, { `, options: ['kebab-case', { globals: ['router-view'] }], - output: - '\n \n ', + output: ` + + `, errors: ['Component name "RouterView" is not kebab-case.'] } ] From 722683b7d4b7580375b931608f4aca1b0aedb4bd Mon Sep 17 00:00:00 2001 From: lsdsjy Date: Mon, 26 Sep 2022 19:30:00 +0800 Subject: [PATCH 3/5] chore: test --- .../component-name-in-template-casing.js | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js index 9161e82ad..e9235a40c 100644 --- a/tests/lib/rules/component-name-in-template-casing.js +++ b/tests/lib/rules/component-name-in-template-casing.js @@ -901,7 +901,13 @@ tester.run('component-name-in-template-casing', rule, { `, - errors: ['Component name "router-view" is not PascalCase.'] + errors: [ + { + message: 'Component name "router-view" is not PascalCase.', + line: 3, + column: 11 + } + ] }, { code: ` @@ -915,7 +921,13 @@ tester.run('component-name-in-template-casing', rule, { `, - errors: ['Component name "RouterView" is not kebab-case.'] + errors: [ + { + message: 'Component name "RouterView" is not kebab-case.', + line: 3, + column: 11 + } + ] }, { code: ` @@ -929,7 +941,13 @@ tester.run('component-name-in-template-casing', rule, { `, - errors: ['Component name "RouterView" is not kebab-case.'] + errors: [ + { + message: 'Component name "RouterView" is not kebab-case.', + line: 3, + column: 11 + } + ] } ] }) From 5eb9c6945173f9a4d065e27a86c7d002cc61386e Mon Sep 17 00:00:00 2001 From: lsdsjy Date: Mon, 26 Sep 2022 19:31:30 +0800 Subject: [PATCH 4/5] Update tests/lib/rules/component-name-in-template-casing.js Co-authored-by: Flo Edelmann --- .../component-name-in-template-casing.js | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js index e9235a40c..9bd81930d 100644 --- a/tests/lib/rules/component-name-in-template-casing.js +++ b/tests/lib/rules/component-name-in-template-casing.js @@ -174,34 +174,24 @@ tester.run('component-name-in-template-casing', rule, { { code: ` - `, - options: ['PascalCase', { globals: ['RouterView'] }] - }, - { - code: ` - `, - options: ['PascalCase', { globals: ['router-view'] }] + options: ['PascalCase', { globals: ['RouterView', 'router-link'] }] }, { code: ` - `, - options: ['kebab-case', { globals: ['RouterView'] }] - }, - { - code: ` - `, - options: ['kebab-case', { globals: ['router-view'] }] + options: ['kebab-case', { globals: ['RouterView', 'router-link'] }] } ], invalid: [ From 968f0921a241373ef15e5d871a8200f029d052c3 Mon Sep 17 00:00:00 2001 From: lsdsjy Date: Mon, 10 Oct 2022 15:45:40 +0800 Subject: [PATCH 5/5] example in doc --- docs/rules/component-name-in-template-casing.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md index ebbc6ce92..90c00959d 100644 --- a/docs/rules/component-name-in-template-casing.md +++ b/docs/rules/component-name-in-template-casing.md @@ -142,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)