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

…1149) * Update `vue/one-component-per-file` rule doc and update preset rules * update
vuejs · May 20, 2020 · 7f39dc7 · 7f39dc7
1 parent 64cd823
commit 7f39dc7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/docs/rules/one-component-per-file.md b/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', {
   // ...
 })
@@ -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)
diff --git a/lib/rules/one-component-per-file.js b/lib/rules/one-component-per-file.js
@@ -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: [],
@@ -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'
+              })
+            }
           }
         }
       }

diff --git a/tests/lib/rules/one-component-per-file.js b/tests/lib/rules/one-component-per-file.js
@@ -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.'
+      ]
     }
   ]
 })