Skip to content

Commit f181cf7

Browse files
committed
Add vue/one-component-per-file rule.
1 parent c6bbd95 commit f181cf7

File tree

4 files changed

+173
-1
lines changed

4 files changed

+173
-1
lines changed

Diff for: docs/rules/one-component-per-file.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# enforce that each component should be in its own file
2+
3+
## :book: Rule Details
4+
5+
This rule checks if there is oly one component per file.
6+
7+
:-1: Examples of **incorrect** code for this rule:
8+
9+
```js
10+
Vue.component('TodoList', {
11+
// ...
12+
})
13+
14+
Vue.component('TodoItem', {
15+
// ...
16+
})
17+
```
18+
19+
:+1: Examples of **correct** code for this rule:
20+
21+
```js
22+
export default {
23+
name: 'my-component'
24+
}
25+
```
26+
27+
## :wrench: Options
28+
29+
Nothing.
30+
31+
## :books: Further reading
32+
33+
- [Style guide - Component files](https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended)

Diff for: lib/rules/no-v-html.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
const utils = require('../utils')
77

88
// ------------------------------------------------------------------------------
9-
// Rule Definitionutilu
9+
// Rule Definition
1010
// ------------------------------------------------------------------------------
1111

1212
module.exports = {

Diff for: lib/rules/one-component-per-file.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* @fileoverview enforce that each component should be in its own file
3+
* @author Armano
4+
*/
5+
'use strict'
6+
const utils = require('../utils')
7+
8+
// ------------------------------------------------------------------------------
9+
// Rule Definition
10+
// ------------------------------------------------------------------------------
11+
12+
module.exports = {
13+
meta: {
14+
type: 'suggestion',
15+
docs: {
16+
description: 'enforce that each component should be in its own file',
17+
category: undefined, // strongly-recommended
18+
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/one-component-per-file.md'
19+
},
20+
fixable: null,
21+
schema: [],
22+
messages: {
23+
toManyComponents: 'There is more than one component in this file.'
24+
}
25+
},
26+
create (context) {
27+
let componentCount = 0
28+
29+
return Object.assign({},
30+
utils.executeOnVueComponent(context, () => {
31+
++componentCount
32+
}),
33+
{
34+
'Program:exit' (node) {
35+
if (componentCount > 1) {
36+
context.report({
37+
node: node,
38+
messageId: 'toManyComponents'
39+
})
40+
}
41+
}
42+
}
43+
)
44+
}
45+
}

Diff for: tests/lib/rules/one-component-per-file.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* @fileoverview enforce that each component should be in its own file
3+
* @author Armano
4+
*/
5+
'use strict'
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
const rule = require('../../../lib/rules/one-component-per-file')
12+
const RuleTester = require('eslint').RuleTester
13+
14+
const ruleTester = new RuleTester({
15+
parserOptions: {
16+
ecmaVersion: 2018,
17+
sourceType: 'module'
18+
}
19+
})
20+
21+
ruleTester.run('one-component-per-file', rule, {
22+
valid: [
23+
{
24+
filename: 'test.js',
25+
code: `Vue.component('name', {})`
26+
},
27+
{
28+
filename: 'test.js',
29+
code: `
30+
Vue.component('name', {})
31+
new Vue({})
32+
`
33+
},
34+
{
35+
filename: 'test.js',
36+
code: `
37+
const foo = {}
38+
new Vue({})
39+
`
40+
},
41+
{
42+
filename: 'test.vue',
43+
code: `export default {}`
44+
},
45+
{
46+
filename: 'test.vue',
47+
code: `export default {
48+
components: {
49+
test: {
50+
name: 'foo'
51+
}
52+
}
53+
}`
54+
}
55+
],
56+
invalid: [
57+
{
58+
filename: 'test.js',
59+
code: `
60+
Vue.component('name', {})
61+
Vue.component('name', {})
62+
`,
63+
errors: [{
64+
message: 'There is more than one component in this file.'
65+
}]
66+
},
67+
{
68+
filename: 'test.js',
69+
code: `
70+
Vue.component('TodoList', {
71+
// ...
72+
})
73+
74+
Vue.component('TodoItem', {
75+
// ...
76+
})
77+
export default {}
78+
`,
79+
errors: [{
80+
message: 'There is more than one component in this file.'
81+
}]
82+
},
83+
{
84+
filename: 'test.vue',
85+
code: `
86+
Vue.component('name', {})
87+
export default {}
88+
`,
89+
errors: [{
90+
message: 'There is more than one component in this file.'
91+
}]
92+
}
93+
]
94+
})

0 commit comments

Comments
 (0)