# vue/no-potential-component-option-typo

disallow a potential typo in your component property

# 📖 Rule Details

This rule disallow a potential typo in your component options

Here is the config

{
  "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

{
  "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

{
  "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

# 🔍 Implementation