Skip to content

vue/no-potential-component-option-typo

disallow a potential typo in your component property

  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

This rule disallow a potential typo in your component options

Here is the config

json
{
  "vue/no-potential-component-option-typo": ["error", {
    "presets": ["all"],
    "custom": ["test"]
  }]
}
<script> export default { /* ✓ GOOD */ props: { }, /* ✗ BAD */ method: { }, /* ✓ GOOD */ data: { }, /* ✗ BAD */ beforeRouteEnteR() { }, /* ✗ BAD due to custom option 'test' */ testt: { } } </script>
Now loading...

we use edit distance to compare two string similarity, threshold is an option to control upper bound of edit distance to report

Here is the another example about config option threshold

json
{
  "vue/no-potential-component-option-typo": ["error", {
    "presets": ["vue", "nuxt"],
    "threshold": 5
  }]
}
<script> export default { /* ✓ GOOD, due to threshold is 5 */ props: { }, /* ✗ BAD, due to threshold is 5 */ mehtod: { }, /* ✓ GOOD, due to threshold is 5 */ data: { }, /* ✓ GOOD, due to we don't choose vue-router preset or add a custom option */ beforeRouteEnteR() { } } </script>
Now loading...

🔧 Options

json
{
  "vue/no-potential-component-option-typo": ["error", {
    "presets": ["vue"],
    "custom": [],
    "threshold": 1
  }]
}
  • presets ... enum type, contains several common vue component option set, ["all"] is the same as ["vue", "vue-router", "nuxt"]. default ["vue"]
  • custom ... array type, a list store your custom component option want to detect. default []
  • threshold ... number type, a number used to control the upper limit of the reported editing distance, we recommend don't change this config option, even if it is required, not bigger than 2. default 1

🚀 Suggestion

  • We provide all the possible component option that edit distance between your vue component option and configuration options is greater than 0 and less equal than threshold

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation