Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 64cd823

Browse files
authored
Add vue/one-component-per-file rule. (#671)
1 parent 4eb39e7 commit 64cd823

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎docs/rules/one-component-per-file.md

Lines changed: 33 additions & 0 deletions
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)

‎lib/rules/one-component-per-file.js

Lines changed: 45 additions & 0 deletions
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+
}
Lines changed: 94 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /