diff --git a/docs/rules/require-component-name.md b/docs/rules/require-component-name.md new file mode 100644 index 000000000..5df3174a1 --- /dev/null +++ b/docs/rules/require-component-name.md @@ -0,0 +1,30 @@ +# Require components to have names (vue/require-component-name) + +- :gear: This rule is included in `"plugin:vue/recommended"`. + +## :book: Rule Details + +This rule requires components to have names. + +:-1: Examples of **incorrect** code for this rule: + +```js +export default { + data() { + return {}; + }, + created() {}, +} +``` + +:+1: Examples of **correct** code for this rule: + +```js +export default { + name: 'my-component', + data() { + return {}; + }, + created() {}, +} +``` diff --git a/lib/configs/recommended.js b/lib/configs/recommended.js index 8c9dbad4a..6da7ff4dc 100644 --- a/lib/configs/recommended.js +++ b/lib/configs/recommended.js @@ -10,6 +10,7 @@ module.exports = { 'vue/html-quotes': 'error', 'vue/no-v-html': 'error', 'vue/order-in-components': 'error', + 'vue/require-component-name': 'error', 'vue/this-in-template': 'error' } } diff --git a/lib/index.js b/lib/index.js index fff64d396..d9c4f8f11 100644 --- a/lib/index.js +++ b/lib/index.js @@ -42,6 +42,7 @@ module.exports = { 'order-in-components': require('./rules/order-in-components'), 'prop-name-casing': require('./rules/prop-name-casing'), 'require-component-is': require('./rules/require-component-is'), + 'require-component-name': require('./rules/require-component-name'), 'require-default-prop': require('./rules/require-default-prop'), 'require-prop-type-constructor': require('./rules/require-prop-type-constructor'), 'require-prop-types': require('./rules/require-prop-types'), diff --git a/lib/rules/require-component-name.js b/lib/rules/require-component-name.js new file mode 100644 index 000000000..6a28a89b6 --- /dev/null +++ b/lib/rules/require-component-name.js @@ -0,0 +1,36 @@ +/** + * @fileoverview Require components to have names + * @author Hiroki Osame + */ +'use strict' + +// ------------------------------------------------------------------------------ +// Rule Definition +// ------------------------------------------------------------------------------ +const utils = require('../utils') + +module.exports = { + meta: { + docs: { + description: 'require components to have names', + category: 'recommended', + url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/require-component-name.md' + }, + fixable: null, + schema: [ + ] + }, + + create (context) { + return utils.executeOnVueComponent(context, (obj) => { + const hasName = obj.properties.find(prop => prop.key.name === 'name') + if (!hasName) { + context.report({ + obj, + loc: obj.loc, + message: 'Expected component to have a name.' + }) + } + }) + } +} diff --git a/tests/lib/rules/require-component-name.js b/tests/lib/rules/require-component-name.js new file mode 100644 index 000000000..eeb5dc1c2 --- /dev/null +++ b/tests/lib/rules/require-component-name.js @@ -0,0 +1,50 @@ +/** + * @fileoverview Require components to have names + * @author Hiroki Osame + */ +'use strict' + +// ------------------------------------------------------------------------------ +// Requirements +// ------------------------------------------------------------------------------ + +const rule = require('../../../lib/rules/require-component-name') +const RuleTester = require('eslint').RuleTester +const parserOptions = { + ecmaVersion: 2018, + sourceType: 'module' +} + +// ------------------------------------------------------------------------------ +// Tests +// ------------------------------------------------------------------------------ + +const ruleTester = new RuleTester({ parserOptions }) +ruleTester.run('require-component-name', rule, { + + valid: [ + { + filename: 'test.vue', + code: ` + export default { + name: 'test-component' + } + ` + } + + // give me some code that won't trigger a warning + ], + + invalid: [ + { + filename: 'test.vue', + code: ` + export default { + } + `, + errors: [{ + message: 'Expected component to have a name.' + }] + } + ] +})