Disallow misspellings of properties (stlye, clsas)

[guyguy2001]

Please describe what the rule should do:
The rule should disallow the usage of misspellings of style and class (such as stlye) in the template, as misspelling them can waste a lot of time while trying to figure it out.

Should I make this rule accept a list of blacklisted property names, and have the misspellings as the default? Or should I keep it specific to the misspellings of style and class, and allow the user to give it a whitelist of words from that list that they want to allow?

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:

<div stlye="display: none;"></div>

[ota-meshi]

Thank you for this issue!

If you want to apply this rule now, you can use vue/no-restricted-syntax.

However, this setting is very difficult. So, as you say, I like to new rule that restrict specified attributes.

<template>
  <div
    stlye="display: none;"
    style="display: none;"
    :stlye="{display: 'none'}"
    :style="{display: 'none'}"
    stlye
    style
    @stlye="stlye"
    @style="style"/>
</template>
<script>
/* eslint vue/no-restricted-syntax:[
  'error',
  'VAttribute[directive=false][key.name="stlye"]',
  'VAttribute[directive=true][key.name.name="bind"][key.argument.name="stlye"]',
] */
</script>