Rule proposal: no method as component option

[manniL]

Please describe what the rule should do:
To avoid typos for the methods declaration, like

export default {
  method: {
    myMethod(){ /*...*/ }
  }
}

I suggest to add a rule which prohibits method as a key in the default component export ☺️

What category should the rule belong to?

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

export default {
  name: 'app',
  props: {
    propA: Number
  },
  method: {
    myMethod() { return true }
  }
}

[ota-meshi]

I don't know how best to implement this rule, so please give your opinions.

We have the following ideas:

• vue/no-potential-property-typo
  This is the rule proposed by @IWANABETHATGUY. New Add vue/no-potential-property-typo rule #1072
  This rule reports option names that similar but unmatched the standard option names or those set by the user.
  Whether the property name is reported depends on the edit distance.
  👍: If the option name provided by the user's newly introduced Vue plugin or the user's own option name is not the similar as the existing option name, it will not be reported, so there is no need to change the ESLint configuration.
  👎: Depending on the edit distance, invalid option names may remain without being reported.

  e.g.

  export default {
    // ok
    testtt: {},
  }

• vue/no-unknown-component-options
  This rule reports option names that are not in the whitelist.
  Whitelists are listed by standard option names or set by the user.
  👍: Since it reports option names other than whitelist, you can report all incorrect option names.
  👎: It is difficult for users to fully build a whitelist. It is necessary to list all the option names provided by the Vue.js plugin used by the user and the option names available in the user's own framework.

• vue/no-restricted-component-options
  This rule reports option names that are blacklisted.
  If the user sets the method in the blacklist, it can be reported method.
  👎: With this rule, you must list all possible typos in order to prevent typos.

I like the vue/no-unknown-component-options rule because I know the framework I use.
However, I know that people may not be aware of the options provided by the framework they are using. In this case, users may find it easier to use the vue/no-potential-property-typo rule.

[IWANABETHATGUY]

I think vue/no-unknown-component-options is better, for solving the downside of the vue/no-unknown-component-options, we could set default presets as ['vue']

[ota-meshi]

@IWANABETHATGUY Thank you for your opinion!
@manniL If you have an opinion, I'd be glad if you could comment.

[manniL]

Thanks for considering and for the ideas! ☺️

My (personal) 2 cents:

• vue/no-unknown-component-options wouldn't be a nice fit for my workflow, as I am using this.$options.somethingHere from time to time. Having to whitelist these options seems like an additional step that I personally wouldn't want to take

• vue/no-restricted-component-options is a good option but might require maintenance overhead by having an up-to-date list of typos.

• I like the idea behind vue/no-potential-property-typo! "Common" typos are certainly detected, which is the largest pitfall for beginners IMO. This is the "best of both worlds" from my perspective ☺️

[ota-meshi]

Thank you for your opinion!

We add the vue/no-potential-property-typo rule as proposed by @IWANABETHATGUY as a first step. This rule is the easiest to use for people, and can report invalid option names that are most likely to be present.

People may also need rule that use whitelists (vue/no-unknown-component-options), but we will not add them this time.
If two rules exist (vue/no-unknown-component-options and vue/no-potential-property-typo), they may report the same option, but I don't think it's a problem because there is no conflict.

To @IWANABETHATGUY.
I want to reconsider the rule name. The name "property" also refers to common properties in JavaScript, so people may be confused.
In Vue.js documentation, it is expressed as "Options", so I want to include the name "component-option".
e.g. vue/no-potential-component-option-typo. What do you think?

https://vuejs.org/v2/api/index.html#Options-Data

[IWANABETHATGUY]

That's ok for me, i will change that.