⭐️New: Add vue/match-component-file-name rule

README.md

@@ -233,6 +233,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 | :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
+|  | [vue/match-component-file-name](./docs/rules/match-component-file-name.md) | require component name property to match its file name |
 | :wrench: | [vue/multiline-html-element-content-newline](./docs/rules/multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element |
 | :wrench: | [vue/no-spaces-around-equal-signs-in-attribute](./docs/rules/no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |

docs/rules/match-component-file-name.md

@@ -0,0 +1,41 @@
+# require component name property to match its file name (vue/match-component-file-name)
+
+You can define an array of file extensions this rule should verify for 
+the component's name.
+
+By default this rule will only verify components in a file with a `.jsx` 
+extension.
+
+## :book: Rule Details
+
+This rule reports if a component `name` property does not match its file name.
+
+:-1: Examples of **incorrect** code for this rule:
+
+```jsx
+// file name: src/MyComponent.jsx
+export default {
+  name: 'MComponent', // note the missing y
+  render: () {
+    return <h1>Hello world</h1>
+  }
+}
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```jsx
+// file name: src/MyComponent.jsx
+export default {
+  name: 'MyComponent',
+  render: () {
+    return <h1>Hello world</h1>
+  }
+}
+```
+
+## :wrench: Options
+
+- `['jsx']` (default) ... verify components in files with `.jsx` extension.
+- `['jsx', 'vue', 'js']` (*or any combinations of these extensions*) 
+  ... verify components in files with listed extensions.

lib/index.js

@@ -18,6 +18,7 @@ module.exports = {
     'html-quotes': require('./rules/html-quotes'),
     'html-self-closing': require('./rules/html-self-closing'),
     'jsx-uses-vars': require('./rules/jsx-uses-vars'),
+    'match-component-file-name': require('./rules/match-component-file-name'),
     'max-attributes-per-line': require('./rules/max-attributes-per-line'),
     'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),

lib/rules/match-component-file-name.js

@@ -0,0 +1,80 @@
+/**
+ * @fileoverview Require component name property to match its file name
+ * @author Rodrigo Pedra Brum <[email protected]>
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const path = require('path')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'require component name property to match its file name',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.4/docs/rules/match-component-file-name.md'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'array',
+        items: {
+          type: 'string'
+        },
+        uniqueItems: true,
+        additionalItems: false
+      }
+    ]
+  },
+
+  create (context) {
+    const options = context.options[0]
+    const allowedExtensions = Array.isArray(options) ? options : ['jsx']
+
+    return utils.executeOnVue(context, (object) => {
+      const nameProperty = object.properties
+        .find(item =>
+          item.type === 'Property' &&
+          item.key.name === 'name' &&
+          item.key.type === 'Identifier' &&
+          (
+            item.value.type === 'Literal' || (
+              item.value.type === 'TemplateLiteral' &&
+              item.value.expressions.length === 0 &&
+              item.value.quasis.length === 1
+            )
+          )
+        )
+
+      if (!nameProperty) {
+        return
+      }
+
+      const name = nameProperty.value.type === 'TemplateLiteral'
+        ? nameProperty.quasis[0].value.cooked
+        : nameProperty.value.value
+      const [, filename, extension] = /^(.+?)\.(.+)$/g.exec(path.basename(context.getFilename()))
+
+      if (!allowedExtensions.includes(extension)) {
+        return
+      }
+
+      if (name !== filename) {
+        context.report({
+          obj: object,
+          loc: object.loc,
+          message: 'Component name `{{name}}` should match file name {{filename}}.',
+          data: { filename, name }
+        })
+      }
+    })
+  }
+}

tests/lib/rules/match-component-file-name.js

@@ -0,0 +1,253 @@
+/**
+ * @fileoverview Require component name property to match its file name
+ * @author Rodrigo Pedra Brum <[email protected]>
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/match-component-file-name')
+const RuleTester = require('eslint').RuleTester
+
+const jsxParserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module',
+  ecmaFeatures: { jsx: true }
+}
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module'
+}
+
+const ruleTester = new RuleTester()
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+ruleTester.run('match-component-file-name', rule, {
+  valid: [
+    // ,jsx
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          render() { return <div /> }
+        }
+      `,
+      parserOptions: jsxParserOptions
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          name: 'MyComponent',
+          render() { return <div /> }
+        }
+      `,
+      parserOptions: jsxParserOptions
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          name: 'MyComponent',
+          render() { return <div /> }
+        }
+      `,
+      options: [['jsx']],
+      parserOptions: jsxParserOptions
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          name: 'MComponent',
+          render() { return <div /> }
+        }
+      `,
+      options: [['vue']], // missing jsx in options
+      parserOptions: jsxParserOptions
+    },
+
+    // .vue
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <script>
+          export default {
+            name: 'MComponent',
+            template: '<div />'
+          }
+        </script>
+      `,
+      parser: 'vue-eslint-parser',
+      parserOptions // options default to [['jsx']]
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <script>
+          export default {
+            name: 'MComponent',
+            template: '<div />'
+          }
+        </script>
+      `,
+      options: [['jsx']], // missing 'vue' in options
+      parser: 'vue-eslint-parser',
+      parserOptions
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <script>
+          export default {
+            template: '<div />'
+          }
+        </script>
+      `,
+      options: [['vue']],
+      parser: 'vue-eslint-parser',
+      parserOptions
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <template>
+          <div />
+        </template>
+      `,
+      options: [['vue']],
+      parser: 'vue-eslint-parser',
+      parserOptions
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <script>
+          export default {
+            name: 'MyComponent',
+            template: '<div />'
+          }
+        </script>
+      `,
+      options: [['vue']],
+      parser: 'vue-eslint-parser',
+      parserOptions
+    },
+
+    // .js
+    {
+      filename: 'MyComponent.js',
+      code: `
+        new Vue({
+          name: 'MComponent',
+          template: '<div />'
+        })
+      `,
+      parserOptions // options default to [['jsx']]
+    },
+    {
+      filename: 'MyComponent.js',
+      code: `
+        new Vue({
+          name: 'MComponent',
+          template: '<div />'
+        })
+      `,
+      options: [['vue']], // missing 'js' in options
+      parserOptions
+    },
+    {
+      filename: 'MyComponent.js',
+      code: `
+        new Vue({
+          template: '<div />'
+        })
+      `,
+      options: [['js']],
+      parserOptions
+    },
+    {
+      filename: 'MyComponent.js',
+      code: `
+        new Vue({
+          name: 'MyComponent',
+          template: '<div />'
+        })
+      `,
+      options: [['js']],
+      parserOptions
+    }
+  ],
+
+  invalid: [
+    // .jsx
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          name: 'MComponent',
+          render() { return <div /> }
+        }
+      `,
+      parserOptions: jsxParserOptions,
+      errors: [{
+        message: 'Component name `MComponent` should match file name MyComponent.'
+      }]
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: `
+        export default {
+          name: 'MComponent',
+          render() { return <div /> }
+        }
+      `,
+      options: [['jsx']],
+      parserOptions: jsxParserOptions,
+      errors: [{
+        message: 'Component name `MComponent` should match file name MyComponent.'
+      }]
+    },
+
+    // .vue
+    {
+      filename: 'MyComponent.vue',
+      code: `
+        <script>
+          export default {
+            name: 'MComponent',
+            template: '<div />'
+          }
+        </script>
+      `,
+      options: [['vue']],
+      parser: 'vue-eslint-parser',
+      parserOptions,
+      errors: [{
+        message: 'Component name `MComponent` should match file name MyComponent.'
+      }]
+    },
+
+    // .js
+    {
+      filename: 'MyComponent.js',
+      code: `
+        new Vue({
+          name: 'MComponent',
+          template: '<div />'
+        })
+      `,
+      options: [['js']],
+      parserOptions,
+      errors: [{
+        message: 'Component name `MComponent` should match file name MyComponent.'
+      }]
+    }
+  ]
+})