(implements #323) Add require-prop-type-constructor rule

README.md

@@ -230,6 +230,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 |
+| :wrench: | [vue/require-prop-type-constructor](./docs/rules/require-prop-type-constructor.md) | require prop type to be a constructor |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
 
 ### Deprecated

docs/rules/require-prop-type-constructor.md

@@ -0,0 +1,60 @@
+# require prop type to be a constructor (vue/require-prop-type-constructor)
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+This rule reports prop types that can't be presumed as constructors.
+
+It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule black list few types of nodes, instead of white-listing correct ones.
+
+The following types are forbidden and will be reported:
+
+- Literal
+- TemplateLiteral
+- BinaryExpression
+- UpdateExpression
+
+It will catch most commonly made mistakes which are using strings instead of constructors.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```js
+export default {
+  props: {
+    myProp: "Number",
+    anotherProp: ["Number", "String"],
+    myFieldWithBadType: {
+      type: "Object",
+      default: function() {
+        return {}
+      },
+    },
+    myOtherFieldWithBadType: {
+      type: "Number",
+      default: 1,
+    },
+  }
+}
+```
+
+Examples of **correct** code for this rule:
+
+```js
+export default {
+  props: {
+    myProp: Number,
+    anotherProp: [Number, String],
+    myFieldWithBadType: {
+      type: Object,
+      default: function() {
+        return {}
+      },
+    },
+    myOtherFieldWithBadType: {
+      type: Number,
+      default: 1,
+    },
+  }
+}
+```

lib/index.js

@@ -40,6 +40,7 @@ module.exports = {
     'prop-name-casing': require('./rules/prop-name-casing'),
     'require-component-is': require('./rules/require-component-is'),
     'require-default-prop': require('./rules/require-default-prop'),
+    'require-prop-type-constructor': require('./rules/require-prop-type-constructor'),
     'require-prop-types': require('./rules/require-prop-types'),
     'require-render-return': require('./rules/require-render-return'),
     'require-v-for-key': require('./rules/require-v-for-key'),

lib/rules/require-prop-type-constructor.js

@@ -0,0 +1,98 @@
+/**
+ * @fileoverview require prop type to be a constructor
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const message = 'The "{{name}}" property should be a constructor.'
+
+const forbiddenTypes = [
+  'Literal',
+  'TemplateLiteral',
+  'BinaryExpression',
+  'UpdateExpression'
+]
+
+const isForbiddenType = nodeType => forbiddenTypes.indexOf(nodeType) > -1
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'require prop type to be a constructor',
+      category: undefined, // essential
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.1/docs/rules/require-prop-type-constructor.md'
+    },
+    fixable: 'code',  // or "code" or "whitespace"
+    schema: []
+  },
+
+  create (context) {
+    const fix = node => fixer => {
+      if (node.type === 'Literal') {
+        return fixer.replaceText(node, node.value)
+      } else if (
+        node.type === 'TemplateLiteral' &&
+        node.expressions.length === 0 &&
+        node.quasis.length === 1
+      ) {
+        return fixer.replaceText(node, node.quasis[0].value.cooked)
+      }
+    }
+
+    const checkPropertyNode = (p) => {
+      if (isForbiddenType(p.value.type)) {
+        context.report({
+          node: p.value,
+          message,
+          data: {
+            name: utils.getStaticPropertyName(p.key)
+          },
+          fix: fix(p.value)
+        })
+      } else if (p.value.type === 'ArrayExpression') {
+        p.value.elements
+          .filter(prop => isForbiddenType(prop.type))
+          .forEach(prop => context.report({
+            node: prop,
+            message,
+            data: {
+              name: utils.getStaticPropertyName(p.key)
+            },
+            fix: fix(prop)
+          }))
+      }
+    }
+
+    return utils.executeOnVueComponent(context, (obj) => {
+      const node = obj.properties.find(p =>
+        p.type === 'Property' &&
+        p.key.type === 'Identifier' &&
+        p.key.name === 'props' &&
+        p.value.type === 'ObjectExpression'
+      )
+
+      if (!node) return
+
+      node.value.properties.forEach(p => {
+        if (isForbiddenType(p.value.type) || p.value.type === 'ArrayExpression') {
+          checkPropertyNode(p)
+        } else if (p.value.type === 'ObjectExpression') {
+          const typeProperty = p.value.properties.find(prop =>
+            prop.type === 'Property' &&
+            prop.key.name === 'type'
+          )
+
+          if (!typeProperty) return
+
+          checkPropertyNode(typeProperty)
+        }
+      })
+    })
+  }
+}

tests/lib/rules/require-prop-type-constructor.js

@@ -0,0 +1,134 @@
+/**
+ * @fileoverview require prop type to be a constructor
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/require-prop-type-constructor')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module'
+  }
+})
+ruleTester.run('require-prop-type-constructor', rule, {
+
+  valid: [
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+        export default {
+          props: {
+            myProp: Number,
+            anotherType: [Number, String],
+            extraProp: {
+              type: Number,
+              default: 10
+            },
+            lastProp: {
+              type: [Number, Boolean]
+            }
+          }
+        }
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+      export default {
+        props: {
+          myProp: 'Number',
+          anotherType: ['Number', 'String'],
+          extraProp: {
+            type: 'Number',
+            default: 10
+          },
+          lastProp: {
+            type: ['Boolean']
+          }
+        }
+      }
+      `,
+      output: `
+      export default {
+        props: {
+          myProp: Number,
+          anotherType: [Number, String],
+          extraProp: {
+            type: Number,
+            default: 10
+          },
+          lastProp: {
+            type: [Boolean]
+          }
+        }
+      }
+      `,
+      errors: [{
+        message: 'The "myProp" property should be a constructor.',
+        line: 4
+      }, {
+        message: 'The "anotherType" property should be a constructor.',
+        line: 5
+      }, {
+        message: 'The "anotherType" property should be a constructor.',
+        line: 5
+      }, {
+        message: 'The "type" property should be a constructor.',
+        line: 7
+      }, {
+        message: 'The "type" property should be a constructor.',
+        line: 11
+      }]
+    },
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+      export default {
+        props: {
+          a: \`String\`,
+          b: Foo + '',
+          c: 1,
+          d: true,
+        }
+      }
+      `,
+      output: `
+      export default {
+        props: {
+          a: String,
+          b: Foo + '',
+          c: 1,
+          d: true,
+        }
+      }
+      `,
+      errors: [{
+        message: 'The "a" property should be a constructor.',
+        line: 4
+      }, {
+        message: 'The "b" property should be a constructor.',
+        line: 5
+      }, {
+        message: 'The "c" property should be a constructor.',
+        line: 6
+      }, {
+        message: 'The "d" property should be a constructor.',
+        line: 7
+      }]
+    }
+  ]
+})