diff --git a/docs/rules/one-component-per-file.md b/docs/rules/one-component-per-file.md new file mode 100644 index 000000000..b163d0daa --- /dev/null +++ b/docs/rules/one-component-per-file.md @@ -0,0 +1,33 @@ +# enforce that each component should be in its own file + +## :book: Rule Details + +This rule checks if there is oly one component per file. + +:-1: Examples of **incorrect** code for this rule: + +```js +Vue.component('TodoList', { + // ... +}) + +Vue.component('TodoItem', { + // ... +}) +``` + +:+1: Examples of **correct** code for this rule: + +```js +export default { + name: 'my-component' +} +``` + +## :wrench: Options + +Nothing. + +## :books: Further reading + +- [Style guide - Component files](https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended) diff --git a/lib/rules/no-v-html.js b/lib/rules/no-v-html.js index 6ca85f5dc..3f59f23f6 100644 --- a/lib/rules/no-v-html.js +++ b/lib/rules/no-v-html.js @@ -6,7 +6,7 @@ const utils = require('../utils') // ------------------------------------------------------------------------------ -// Rule Definitionutilu +// Rule Definition // ------------------------------------------------------------------------------ module.exports = { diff --git a/lib/rules/one-component-per-file.js b/lib/rules/one-component-per-file.js new file mode 100644 index 000000000..d6d67b813 --- /dev/null +++ b/lib/rules/one-component-per-file.js @@ -0,0 +1,45 @@ +/** + * @fileoverview enforce that each component should be in its own file + * @author Armano + */ +'use strict' +const utils = require('../utils') + +// ------------------------------------------------------------------------------ +// Rule Definition +// ------------------------------------------------------------------------------ + +module.exports = { + meta: { + 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' + }, + fixable: null, + schema: [], + messages: { + toManyComponents: 'There is more than one component in this file.' + } + }, + create (context) { + let componentCount = 0 + + return Object.assign({}, + utils.executeOnVueComponent(context, () => { + ++componentCount + }), + { + 'Program:exit' (node) { + if (componentCount > 1) { + 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 new file mode 100644 index 000000000..3c3c30961 --- /dev/null +++ b/tests/lib/rules/one-component-per-file.js @@ -0,0 +1,94 @@ +/** + * @fileoverview enforce that each component should be in its own file + * @author Armano + */ +'use strict' + +// ------------------------------------------------------------------------------ +// Requirements +// ------------------------------------------------------------------------------ + +const rule = require('../../../lib/rules/one-component-per-file') +const RuleTester = require('eslint').RuleTester + +const ruleTester = new RuleTester({ + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module' + } +}) + +ruleTester.run('one-component-per-file', rule, { + valid: [ + { + filename: 'test.js', + code: `Vue.component('name', {})` + }, + { + filename: 'test.js', + code: ` + Vue.component('name', {}) + new Vue({}) + ` + }, + { + filename: 'test.js', + code: ` + const foo = {} + new Vue({}) + ` + }, + { + filename: 'test.vue', + code: `export default {}` + }, + { + filename: 'test.vue', + code: `export default { + components: { + test: { + name: 'foo' + } + } + }` + } + ], + invalid: [ + { + filename: 'test.js', + code: ` + Vue.component('name', {}) + Vue.component('name', {}) + `, + errors: [{ + message: '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.' + }] + }, + { + filename: 'test.vue', + code: ` + Vue.component('name', {}) + export default {} + `, + errors: [{ + message: 'There is more than one component in this file.' + }] + } + ] +})