Skip to content

Commit 06dc4a2

Browse files
lbennett-stackiota-meshi
authored andcommitted
New: Add vue/name-property-required rule (#945)
* New: Add `vue/name-property-required` rule * Rename to `require-name-property`, remove literal value assertion, add docs
1 parent a2865e4 commit 06dc4a2

File tree

3 files changed

+182
-0
lines changed

3 files changed

+182
-0
lines changed

Diff for: docs/rules/require-name-property.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/require-name-property
5+
description: require a component name property
6+
---
7+
# vue/require-name-property
8+
> require a component name property
9+
10+
## :book: Rule Details
11+
12+
This rule requires a `name` property to be set on components.
13+
14+
<eslint-code-block :rules="{'vue/require-name-property': ['error']}">
15+
16+
```vue
17+
<script>
18+
/* ✓ GOOD */
19+
export default {
20+
name: 'OurButton'
21+
}
22+
23+
/* ✗ BAD */
24+
export default {
25+
}
26+
27+
/* ✗ BAD */
28+
export default {
29+
notName: 'OurButton'
30+
}
31+
</script>
32+
```
33+
34+
</eslint-code-block>
35+
36+
## :wrench: Options
37+
38+
Nothing.
39+
40+
## :mag: Implementation
41+
42+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-name-property.js)
43+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-name-property.js)

Diff for: lib/rules/require-name-property.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* @fileoverview Require a name property in Vue components
3+
* @author LukeeeeBennett
4+
*/
5+
'use strict'
6+
7+
const utils = require('../utils')
8+
9+
function isNameProperty (node) {
10+
return node.type === 'Property' &&
11+
node.key.name === 'name' &&
12+
!node.computed
13+
}
14+
15+
module.exports = {
16+
meta: {
17+
type: 'suggestion',
18+
docs: {
19+
description: 'require a name property in Vue components',
20+
category: undefined,
21+
url: 'https://eslint.vuejs.org/rules/require-name-property.html'
22+
},
23+
fixable: null,
24+
schema: []
25+
},
26+
27+
create (context) {
28+
return utils.executeOnVue(context, component => {
29+
if (component.properties.some(isNameProperty)) return
30+
31+
context.report({
32+
node: component,
33+
message: 'Required name property is not set.'
34+
})
35+
})
36+
}
37+
}

Diff for: tests/lib/rules/require-name-property.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* @fileoverview Require a name property in Vue components
3+
* @author LukeeeeBennett
4+
*/
5+
'use strict'
6+
7+
const rule = require('../../../lib/rules/require-name-property')
8+
const RuleTester = require('eslint').RuleTester
9+
10+
const parserOptions = {
11+
ecmaVersion: 2018,
12+
sourceType: 'module'
13+
}
14+
15+
const ruleTester = new RuleTester()
16+
ruleTester.run('require-name-property', rule, {
17+
valid: [
18+
{
19+
filename: 'ValidComponent.vue',
20+
code: `
21+
export default {
22+
name: 'IssaName'
23+
}
24+
`,
25+
parserOptions
26+
},
27+
{
28+
filename: 'ValidComponent.vue',
29+
code: `
30+
export default {
31+
name: undefined
32+
}
33+
`,
34+
parserOptions
35+
},
36+
{
37+
filename: 'ValidComponent.vue',
38+
code: `
39+
export default {
40+
name: ''
41+
}
42+
`,
43+
parserOptions
44+
}
45+
],
46+
47+
invalid: [
48+
{
49+
filename: 'InvalidComponent.vue',
50+
code: `
51+
export default {
52+
}
53+
`,
54+
parserOptions,
55+
errors: [{
56+
message: 'Required name property is not set.',
57+
type: 'ObjectExpression'
58+
}]
59+
},
60+
{
61+
filename: 'InvalidComponent.vue',
62+
code: `
63+
export default {
64+
nameNot: 'IssaNameNot'
65+
}
66+
`,
67+
parserOptions,
68+
errors: [{
69+
message: 'Required name property is not set.',
70+
type: 'ObjectExpression'
71+
}]
72+
},
73+
{
74+
filename: 'InvalidComponent.vue',
75+
code: `
76+
export default {
77+
computed: {
78+
name() { return 'name' }
79+
}
80+
}
81+
`,
82+
parserOptions,
83+
errors: [{
84+
message: 'Required name property is not set.',
85+
type: 'ObjectExpression'
86+
}]
87+
},
88+
{
89+
filename: 'InvalidComponent.vue',
90+
code: `
91+
export default {
92+
[name]: 'IssaName'
93+
}
94+
`,
95+
parserOptions,
96+
errors: [{
97+
message: 'Required name property is not set.',
98+
type: 'ObjectExpression'
99+
}]
100+
}
101+
]
102+
})

0 commit comments

Comments
 (0)