Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update vue/one-component-per-file rule doc and update preset rules #1149

Merged
merged 2 commits into from May 20, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 28 additions & 5 deletions docs/rules/one-component-per-file.md
@@ -1,12 +1,23 @@
# enforce that each component should be in its own file
---
pageClass: rule-details
sidebarDepth: 0
title: vue/one-component-per-file
description: enforce that each component should be in its own file
---
# vue/one-component-per-file
> enforce that each component should be in its own file

- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.

## :book: Rule Details

This rule checks if there is oly one component per file.
This rule checks if there is only one component per file.

:-1: Examples of **incorrect** code for this rule:
<eslint-code-block filename="a.js" language="javascript" :rules="{'vue/one-component-per-file': ['error']}">

```js
/* ✗ BAD */

Vue.component('TodoList', {
// ...
})
Expand All @@ -16,18 +27,30 @@ Vue.component('TodoItem', {
})
```

:+1: Examples of **correct** code for this rule:
</eslint-code-block>

```js
<eslint-code-block :rules="{'vue/one-component-per-file': ['error']}">

```vue
<script>
/* ✓ GOOD */
export default {
name: 'my-component'
}
</script>
```

</eslint-code-block>

## :wrench: Options

Nothing.

## :books: Further reading

- [Style guide - Component files](https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/one-component-per-file.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/one-component-per-file.js)
24 changes: 13 additions & 11 deletions lib/rules/one-component-per-file.js
Expand Up @@ -14,8 +14,8 @@ module.exports = {
type: 'suggestion',
docs: {
description: 'enforce that each component should be in its own file',
category: undefined, // strongly-recommended
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/one-component-per-file.md'
categories: ['vue3-strongly-recommended', 'strongly-recommended'],
url: 'https://eslint.vuejs.org/rules/one-component-per-file.html'
},
fixable: null,
schema: [],
Expand All @@ -24,19 +24,21 @@ module.exports = {
}
},
create (context) {
let componentCount = 0
const components = []

return Object.assign({},
utils.executeOnVueComponent(context, () => {
++componentCount
utils.executeOnVueComponent(context, (node) => {
components.push(node)
}),
{
'Program:exit' (node) {
if (componentCount > 1) {
context.report({
node: node,
messageId: 'toManyComponents'
})
'Program:exit' () {
if (components.length > 1) {
for (const node of components) {
context.report({
node: node,
messageId: 'toManyComponents'
})
}
}
}
}
Expand Down
23 changes: 13 additions & 10 deletions tests/lib/rules/one-component-per-file.js
Expand Up @@ -60,35 +60,38 @@ ruleTester.run('one-component-per-file', rule, {
Vue.component('name', {})
Vue.component('name', {})
`,
errors: [{
message: 'There is more than one component in this file.'
}]
errors: [
'There is more than one component in this file.',
'There is more than one component in this file.'
]
},
{
filename: 'test.js',
code: `
Vue.component('TodoList', {
// ...
})

Vue.component('TodoItem', {
// ...
})
export default {}
`,
errors: [{
message: 'There is more than one component in this file.'
}]
errors: [
'There is more than one component in this file.',
'There is more than one component in this file.'
]
},
{
filename: 'test.vue',
code: `
Vue.component('name', {})
export default {}
`,
errors: [{
message: 'There is more than one component in this file.'
}]
errors: [
'There is more than one component in this file.',
'There is more than one component in this file.'
]
}
]
})