New Add vue/no-potential-property-typo rule

[IWANABETHATGUY]

#922

[IWANABETHATGUY]

i make a new rule , no-potential-typo rule to warn user a potential typo error, when user define a custom component option is similar to vue built-in option, here is an example;

export default {
  // ok 
  data() {

  },
  // ok , this maybe a custom property
  testtt: {},
  // bad, this is more likely to be  a typo
  method: {}
}

[ota-meshi]

Hi @IWANABETHATGUY.
I think it is difficult to judge typos automatically.
I'm worried that this rule may require users to use more suppression comments.

I like a rule to have users set a whitelist and report non-whitelist properties. e.g. no-unknown-component-options rule.
Users can also add properties such as beforeRouteEnter.

https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

I like to list similar names in the whitelist as a suggestion to fix the wrong property.

What do you think?

[IWANABETHATGUY]

beforeRouterLeave is absolute alright for this rule, usually when two string editdistance is. greater than 0 and lessEqual than 1 we report that warning,
here is the built-in options lib/utils/vue-component-options.json, we could default this rule for warning not a error.
i don't think people will define a component option like this

export default {
  dat() {},
  method: {},
  comput: {},
  filter: {}
}

we default the threshold is 1, only the option in code is very similar but not a vue built-in option will report. we don't check the inner property, so i think this is safe for user;
what do you think?

[ota-meshi]

I think people want to detect invalid properties. (The cause of the invalid property may be a typo.)
I think it makes sense to be able to check that properties other than those on the whitelist are not set as a result of the CI.
However, even if you can check that there are no typos (depends on edit distance) as a result of the CI, it doesn't make sense. Because the invalid property may remain.

I agree that define a component option whitelist is difficult.
We may wish to provide some whitelist presets.
e.g. Vue.js standard, router, nuxt and more.
Users can whitelist presets and custom property names.

(Sorry if you don't communicate well because I don't understand English well.)

[IWANABETHATGUY]

bacuase the indent, the test case is pretty ugly, do you have some good idea for this? and do i need more test case for this rule?

[ota-meshi]

Hi @IWANABETHATGUY!
I'm not sure if this rule is best, so I'd like to start with an issue #922.

[IWANABETHATGUY]

@ota-meshi could you please help for review

[ota-meshi]

Sorry for the late reply.
I have change requests.

[IWANABETHATGUY]

i still have a change request, but i have some question, could please give me some tips?

[ota-meshi]

I want you to add a test case that can verify that all of the names defined in vue-component-options.json are valid.

[ota-meshi]

LGTM! thank you!