Skip to content

Commit

Permalink
New: Add vue/name-property-required rule (#945)
Browse files Browse the repository at this point in the history
* New: Add `vue/name-property-required` rule

* Rename to `require-name-property`, remove literal value assertion, add docs
  • Loading branch information
lbennett-stacki authored and ota-meshi committed Dec 26, 2019
1 parent a2865e4 commit 06dc4a2
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 0 deletions.
43 changes: 43 additions & 0 deletions docs/rules/require-name-property.md
@@ -0,0 +1,43 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/require-name-property
description: require a component name property
---
# vue/require-name-property
> require a component name property
## :book: Rule Details

This rule requires a `name` property to be set on components.

<eslint-code-block :rules="{'vue/require-name-property': ['error']}">

```vue
<script>
/* ✓ GOOD */
export default {
name: 'OurButton'
}
/* ✗ BAD */
export default {
}
/* ✗ BAD */
export default {
notName: 'OurButton'
}
</script>
```

</eslint-code-block>

## :wrench: Options

Nothing.

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-name-property.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-name-property.js)
37 changes: 37 additions & 0 deletions lib/rules/require-name-property.js
@@ -0,0 +1,37 @@
/**
* @fileoverview Require a name property in Vue components
* @author LukeeeeBennett
*/
'use strict'

const utils = require('../utils')

function isNameProperty (node) {
return node.type === 'Property' &&
node.key.name === 'name' &&
!node.computed
}

module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'require a name property in Vue components',
category: undefined,
url: 'https://eslint.vuejs.org/rules/require-name-property.html'
},
fixable: null,
schema: []
},

create (context) {
return utils.executeOnVue(context, component => {
if (component.properties.some(isNameProperty)) return

context.report({
node: component,
message: 'Required name property is not set.'
})
})
}
}
102 changes: 102 additions & 0 deletions tests/lib/rules/require-name-property.js
@@ -0,0 +1,102 @@
/**
* @fileoverview Require a name property in Vue components
* @author LukeeeeBennett
*/
'use strict'

const rule = require('../../../lib/rules/require-name-property')
const RuleTester = require('eslint').RuleTester

const parserOptions = {
ecmaVersion: 2018,
sourceType: 'module'
}

const ruleTester = new RuleTester()
ruleTester.run('require-name-property', rule, {
valid: [
{
filename: 'ValidComponent.vue',
code: `
export default {
name: 'IssaName'
}
`,
parserOptions
},
{
filename: 'ValidComponent.vue',
code: `
export default {
name: undefined
}
`,
parserOptions
},
{
filename: 'ValidComponent.vue',
code: `
export default {
name: ''
}
`,
parserOptions
}
],

invalid: [
{
filename: 'InvalidComponent.vue',
code: `
export default {
}
`,
parserOptions,
errors: [{
message: 'Required name property is not set.',
type: 'ObjectExpression'
}]
},
{
filename: 'InvalidComponent.vue',
code: `
export default {
nameNot: 'IssaNameNot'
}
`,
parserOptions,
errors: [{
message: 'Required name property is not set.',
type: 'ObjectExpression'
}]
},
{
filename: 'InvalidComponent.vue',
code: `
export default {
computed: {
name() { return 'name' }
}
}
`,
parserOptions,
errors: [{
message: 'Required name property is not set.',
type: 'ObjectExpression'
}]
},
{
filename: 'InvalidComponent.vue',
code: `
export default {
[name]: 'IssaName'
}
`,
parserOptions,
errors: [{
message: 'Required name property is not set.',
type: 'ObjectExpression'
}]
}
]
})

0 comments on commit 06dc4a2

Please sign in to comment.