From 69393bd0edd1e9ad64a6028a2660a3a1dc958f2b Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Mon, 9 Mar 2020 13:27:25 +0800
Subject: [PATCH 01/21] feat(utils/index.js): add util lib

---
 lib/utils/index.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/lib/utils/index.js b/lib/utils/index.js
index 011ec6571..35d1132e1 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -867,5 +867,44 @@ module.exports = {
    */
   unwrapTypes (node) {
     return node.type === 'TSAsExpression' ? node.expression : node
+  },
+
+  /**
+   *
+   *
+   * @param {string} a string a to compare
+   * @param {any} b string b to compare
+   * @param {number} [threshold=1]
+   * @returns if these two string editdistance lessEqual than threshold,
+   *          usually if the answer is true, like `method` `methods`, we
+   *          could say this is a potential typo.
+   */
+  isEditDistanceLessEqualThanThreshold (a, b, threshold = 1) {
+    const alen = a.length
+    const blen = b.length
+    const dp = Array.from({ length: alen + 1 }).map(_ =>
+      Array.from({ length: blen + 1 }).fill(0)
+    )
+    for (let i = 0; i <= alen; i++) {
+      dp[i][0] = i
+    }
+    for (let j = 0; j <= blen; j++) {
+      dp[0][j] = j
+    }
+    for (let i = 1; i <= alen; i++) {
+      let min = threshold + 1
+      for (let j = 1; j <= blen; j++) {
+        if (a[i - 1] === b[j - 1]) {
+          dp[i][j] = dp[i - 1][j - 1]
+        } else {
+          dp[i][j] = Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]) + 1
+        }
+        min = Math.min(min, dp[i][j])
+      }
+      if (min === threshold + 1) {
+        return false
+      }
+    }
+    return dp[alen][blen] <= threshold
   }
 }

From 2773283bbad9bcdbb2b56246b1f9e633ac2248a3 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Mon, 9 Mar 2020 13:38:54 +0800
Subject: [PATCH 02/21] feat(tests/lib/utils/index.js): add unit test

---
 tests/lib/utils/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index f698a98ef..6e1fadb78 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -367,3 +367,20 @@ describe('getComponentProps', () => {
     assert.notOk(props[3].value)
   })
 })
+
+describe('isEditDistanceLessEqualThanThreshold', () => {
+  const isEditDistanceLessEqualThanThreshold = utils.isEditDistanceLessEqualThanThreshold
+  it('should return false if two string editdistance greater than threshold', () => {
+    assert.equal(isEditDistanceLessEqualThanThreshold('book', 'back'), false)
+    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'metho'), false)
+    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'metds'), false)
+    assert.equal(isEditDistanceLessEqualThanThreshold('computed', 'comput'), false)
+  })
+
+  it('should return true if two string editdistance lessEqual than threshold', () => {
+    assert.equal(isEditDistanceLessEqualThanThreshold('book', 'back', 2), true)
+    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'method'), true)
+    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'methds'), true)
+    assert.equal(isEditDistanceLessEqualThanThreshold('computed', 'computd'), true)
+  })
+})

From 9d9724e2a56c2d8e75c14576ae6abd4ac9a65378 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Mon, 9 Mar 2020 22:43:01 +0800
Subject: [PATCH 03/21] feat: change test, complete rule

---
 docs/rules/no-potential-property-typo.md      | 36 +++++++++
 lib/rules/no-potential-property-typo.js       | 76 +++++++++++++++++++
 lib/utils/index.js                            | 22 ++----
 lib/utils/vue-component-options.json          | 39 ++++++++++
 tests/lib/rules/no-potential-property-typo.js | 29 +++++++
 tests/lib/utils/index.js                      | 25 +++---
 6 files changed, 199 insertions(+), 28 deletions(-)
 create mode 100644 docs/rules/no-potential-property-typo.md
 create mode 100644 lib/rules/no-potential-property-typo.js
 create mode 100644 lib/utils/vue-component-options.json
 create mode 100644 tests/lib/rules/no-potential-property-typo.js

diff --git a/docs/rules/no-potential-property-typo.md b/docs/rules/no-potential-property-typo.md
new file mode 100644
index 000000000..fc997a862
--- /dev/null
+++ b/docs/rules/no-potential-property-typo.md
@@ -0,0 +1,36 @@
+# detect if there is a potential typo in your component property (no-potential-property-typo)
+
+Please describe the origin of the rule here.
+
+
+## Rule Details
+
+This rule aims to...
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+// fill me in
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+// fill me in
+
+```
+
+### Options
+
+If there are any options, describe them here. Otherwise, delete this section.
+
+## When Not To Use It
+
+Give a short description of when it would be appropriate to turn off this rule.
+
+## Further Reading
+
+If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.
diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-potential-property-typo.js
new file mode 100644
index 000000000..60e3f130b
--- /dev/null
+++ b/lib/rules/no-potential-property-typo.js
@@ -0,0 +1,76 @@
+/**
+ * @fileoverview detect if there is a potential typo in your component property
+ * @author IWANABETHATGUY
+ */
+'use strict'
+
+const { executeOnVue, editDistance } = require('../utils')
+const vueComponentOptions = require('../utils/vue-component-options.json')
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow a potential typo in your component property',
+      category: 'essential',
+      recommended: false,
+      url: 'https://eslint.vuejs.org/rules/no-potential-property-typo.html'
+    },
+    fixable: null,
+    schema: [
+      // fill in your schema
+    ]
+  },
+
+  create: function (context) {
+    // variables should be defined here
+
+    // ----------------------------------------------------------------------
+    // Helpers
+    // ----------------------------------------------------------------------
+
+    // any helper functions should go here or else delete this section
+
+    // ----------------------------------------------------------------------
+    // Public
+    // ----------------------------------------------------------------------
+
+    return executeOnVue(context, obj => {
+      // TODO: threshold is an option
+      const threshold = 1
+      const componentInstanceOptions = obj.properties.filter(
+        p => p.type === 'Property' && p.key.type === 'Identifier'
+      )
+      if (!componentInstanceOptions.length) {
+        return
+      }
+      componentInstanceOptions.forEach(option => {
+        const name = option.key.name
+        const potentialTypoList = vueComponentOptions
+          .map(o => ({ option: o, distance: editDistance(o, name) }))
+          .filter(({ distance }) => distance > threshold || distance === 0)
+          .sort((a, b) => a.distance - b.distance)
+        if (potentialTypoList.length) {
+          context.report({
+            node: option.key,
+            loc: option.key.loc,
+            message: `'{{name}}' may be a typo, which is similar to vue component option {{option}}.`,
+            data: {
+              name,
+              option: potentialTypoList.map(({ option }) => option).join(',')
+            },
+            suggestion: potentialTypoList.map(({ option }) => ({
+              desc: `Replace property ${name} to ${option}`,
+              fix (fixer) {
+                return fixer.replaceText(option.key, option)
+              }
+            }))
+          })
+        }
+      })
+    })
+  }
+}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 35d1132e1..0db1cbe34 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -870,16 +870,15 @@ module.exports = {
   },
 
   /**
-   *
-   *
+   * return two string editdistance
    * @param {string} a string a to compare
-   * @param {any} b string b to compare
-   * @param {number} [threshold=1]
-   * @returns if these two string editdistance lessEqual than threshold,
-   *          usually if the answer is true, like `method` `methods`, we
-   *          could say this is a potential typo.
+   * @param {string} b string b to compare
+   * @returns {number}
    */
-  isEditDistanceLessEqualThanThreshold (a, b, threshold = 1) {
+  editDistance (a, b) {
+    if (a === b) {
+      return 0
+    }
     const alen = a.length
     const blen = b.length
     const dp = Array.from({ length: alen + 1 }).map(_ =>
@@ -892,19 +891,14 @@ module.exports = {
       dp[0][j] = j
     }
     for (let i = 1; i <= alen; i++) {
-      let min = threshold + 1
       for (let j = 1; j <= blen; j++) {
         if (a[i - 1] === b[j - 1]) {
           dp[i][j] = dp[i - 1][j - 1]
         } else {
           dp[i][j] = Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]) + 1
         }
-        min = Math.min(min, dp[i][j])
-      }
-      if (min === threshold + 1) {
-        return false
       }
     }
-    return dp[alen][blen] <= threshold
+    return dp[alen][blen]
   }
 }
diff --git a/lib/utils/vue-component-options.json b/lib/utils/vue-component-options.json
new file mode 100644
index 000000000..21cecbfb3
--- /dev/null
+++ b/lib/utils/vue-component-options.json
@@ -0,0 +1,39 @@
+[
+  "data",
+  "props",
+  "propsData",
+  "computed",
+  "methods",
+  "watch",
+  "el",
+  "template",
+  "render",
+  "renderError",
+  "staticRenderFns",
+  "beforeCreate",
+  "created",
+  "beforeDestroy",
+  "destroyed",
+  "beforeMount",
+  "mounted",
+  "beforeUpdate",
+  "updated",
+  "activated",
+  "deactivated",
+  "errorCaptured",
+  "serverPrefetch",
+  "directives",
+  "components",
+  "transitions",
+  "filters",
+  "provide",
+  "inject",
+  "model",
+  "parent",
+  "mixins",
+  "name",
+  "extends",
+  "delimiters",
+  "comments",
+  "inheritAttrs"
+]
\ No newline at end of file
diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-potential-property-typo.js
new file mode 100644
index 000000000..ed0058d28
--- /dev/null
+++ b/tests/lib/rules/no-potential-property-typo.js
@@ -0,0 +1,29 @@
+/**
+ * @fileoverview detect if there is a potential typo in your component property
+ * @author IWANABETHATGUY
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-potential-property-typo')
+
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester()
+ruleTester.run('no-potential-property-typo', rule, {
+
+  valid: [
+
+    // give me some code that won't trigger a warning
+  ],
+
+  invalid: [
+  ]
+})
diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index 6e1fadb78..219c94d35 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -368,19 +368,16 @@ describe('getComponentProps', () => {
   })
 })
 
-describe('isEditDistanceLessEqualThanThreshold', () => {
-  const isEditDistanceLessEqualThanThreshold = utils.isEditDistanceLessEqualThanThreshold
-  it('should return false if two string editdistance greater than threshold', () => {
-    assert.equal(isEditDistanceLessEqualThanThreshold('book', 'back'), false)
-    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'metho'), false)
-    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'metds'), false)
-    assert.equal(isEditDistanceLessEqualThanThreshold('computed', 'comput'), false)
-  })
-
-  it('should return true if two string editdistance lessEqual than threshold', () => {
-    assert.equal(isEditDistanceLessEqualThanThreshold('book', 'back', 2), true)
-    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'method'), true)
-    assert.equal(isEditDistanceLessEqualThanThreshold('methods', 'methds'), true)
-    assert.equal(isEditDistanceLessEqualThanThreshold('computed', 'computd'), true)
+describe('editdistance', () => {
+  const editDistance = utils.editDistance
+  it('should return editDistance beteen two string', () => {
+    assert.equal(editDistance('book', 'back'), 2)
+    assert.equal(editDistance('methods', 'metho'), 2)
+    assert.equal(editDistance('methods', 'metds'), 2)
+    assert.equal(editDistance('computed', 'comput'), 2)
+    assert.equal(editDistance('book', 'back'), 2)
+    assert.equal(editDistance('methods', 'method'), 1)
+    assert.equal(editDistance('methods', 'methds'), 1)
+    assert.equal(editDistance('computed', 'computd'), 1)
   })
 })

From b39cff983173489c3b46d0912446f8167e2aecbd Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 10 Mar 2020 14:55:40 +0800
Subject: [PATCH 04/21] feat: add test, add preset, custom option

---
 lib/rules/no-potential-property-typo.js       | 73 +++++++++++-----
 lib/utils/vue-component-options.json          | 86 ++++++++++---------
 tests/lib/rules/no-potential-property-typo.js | 64 ++++++++++++--
 3 files changed, 157 insertions(+), 66 deletions(-)

diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-potential-property-typo.js
index 60e3f130b..c08d6e4c6 100644
--- a/lib/rules/no-potential-property-typo.js
+++ b/lib/rules/no-potential-property-typo.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const { executeOnVue, editDistance } = require('../utils')
+const utils = require('../utils')
 const vueComponentOptions = require('../utils/vue-component-options.json')
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -21,49 +21,80 @@ module.exports = {
     },
     fixable: null,
     schema: [
-      // fill in your schema
+      {
+        type: 'object',
+        properties: {
+          presets: {
+            type: 'array',
+            items: {
+              type: 'string',
+              enum: ['all', 'vue', 'vue-router', 'nuxt']
+            },
+            uniqueItems: true,
+            minItems: 0
+          },
+          custom: {
+            type: 'array',
+            minItems: 0,
+            items: { type: 'string' },
+            uniqueItems: true
+          },
+          threshold: {
+            type: 'number',
+            'minimum': 1
+          }
+        }
+      }
     ]
   },
 
   create: function (context) {
-    // variables should be defined here
-
-    // ----------------------------------------------------------------------
-    // Helpers
-    // ----------------------------------------------------------------------
-
-    // any helper functions should go here or else delete this section
-
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
-    return executeOnVue(context, obj => {
+    const option = context.options[0] || {}
+    const custom = option['custom'] || []
+    const presets = option['presets'] || []
+    const threshold = option['threshold'] || 1
+    let candidateOptions = []
+    if (presets.includes('all')) {
+      candidateOptions = Object.keys(vueComponentOptions).reduce((pre, cur) => {
+        return [...pre, ...vueComponentOptions[cur]]
+      }, [])
+    } else {
+      candidateOptions = presets.reduce((pre, cur) => {
+        if (vueComponentOptions[cur]) {
+          return [...pre, ...vueComponentOptions[cur]]
+        }
+        return pre
+      }, [])
+    }
+    candidateOptions = [...new Set(candidateOptions.concat(custom))]
+    if (!candidateOptions.length) {
+      return {}
+    }
+    return utils.executeOnVue(context, obj => {
       // TODO: threshold is an option
-      const threshold = 1
       const componentInstanceOptions = obj.properties.filter(
         p => p.type === 'Property' && p.key.type === 'Identifier'
       )
       if (!componentInstanceOptions.length) {
-        return
+        return {}
       }
       componentInstanceOptions.forEach(option => {
         const name = option.key.name
-        const potentialTypoList = vueComponentOptions
-          .map(o => ({ option: o, distance: editDistance(o, name) }))
+        const potentialTypoList = candidateOptions
+          .map(o => ({ option: o, distance: utils.editDistance(o, name) }))
           .filter(({ distance }) => distance > threshold || distance === 0)
           .sort((a, b) => a.distance - b.distance)
         if (potentialTypoList.length) {
           context.report({
             node: option.key,
             loc: option.key.loc,
-            message: `'{{name}}' may be a typo, which is similar to vue component option {{option}}.`,
+            message: `'{{name}}' may be a typo, which is similar to vue component option '{{option}}'.`,
             data: {
               name,
               option: potentialTypoList.map(({ option }) => option).join(',')
             },
             suggestion: potentialTypoList.map(({ option }) => ({
-              desc: `Replace property ${name} to ${option}`,
+              desc: `Replace property '${name}' to '${option}'`,
               fix (fixer) {
                 return fixer.replaceText(option.key, option)
               }
diff --git a/lib/utils/vue-component-options.json b/lib/utils/vue-component-options.json
index 21cecbfb3..643e1299e 100644
--- a/lib/utils/vue-component-options.json
+++ b/lib/utils/vue-component-options.json
@@ -1,39 +1,47 @@
-[
-  "data",
-  "props",
-  "propsData",
-  "computed",
-  "methods",
-  "watch",
-  "el",
-  "template",
-  "render",
-  "renderError",
-  "staticRenderFns",
-  "beforeCreate",
-  "created",
-  "beforeDestroy",
-  "destroyed",
-  "beforeMount",
-  "mounted",
-  "beforeUpdate",
-  "updated",
-  "activated",
-  "deactivated",
-  "errorCaptured",
-  "serverPrefetch",
-  "directives",
-  "components",
-  "transitions",
-  "filters",
-  "provide",
-  "inject",
-  "model",
-  "parent",
-  "mixins",
-  "name",
-  "extends",
-  "delimiters",
-  "comments",
-  "inheritAttrs"
-]
\ No newline at end of file
+{
+  "nuxt": ["asyncData", "fetch", "head", "key", "layout", "loading", "middleware", "scrollToTop", "transition", "validate", "watchQuery"],
+  "vue-router": [
+    "beforeRouteEnter",
+    "beforeRouteUpdate",
+    "beforeRouteLeave"
+  ],
+  "vue": [
+    "data",
+    "props",
+    "propsData",
+    "computed",
+    "methods",
+    "watch",
+    "el",
+    "template",
+    "render",
+    "renderError",
+    "staticRenderFns",
+    "beforeCreate",
+    "created",
+    "beforeDestroy",
+    "destroyed",
+    "beforeMount",
+    "mounted",
+    "beforeUpdate",
+    "updated",
+    "activated",
+    "deactivated",
+    "errorCaptured",
+    "serverPrefetch",
+    "directives",
+    "components",
+    "transitions",
+    "filters",
+    "provide",
+    "inject",
+    "model",
+    "parent",
+    "mixins",
+    "name",
+    "extends",
+    "delimiters",
+    "comments",
+    "inheritAttrs"
+  ]
+}
\ No newline at end of file
diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-potential-property-typo.js
index ed0058d28..ca67d6fe0 100644
--- a/tests/lib/rules/no-potential-property-typo.js
+++ b/tests/lib/rules/no-potential-property-typo.js
@@ -8,22 +8,74 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-var rule = require('../../../lib/rules/no-potential-property-typo')
+const rule = require('../../../lib/rules/no-potential-property-typo')
 
-var RuleTester = require('eslint').RuleTester
+const RuleTester = require('eslint').RuleTester
 
 // ------------------------------------------------------------------------------
 // Tests
 // ------------------------------------------------------------------------------
 
-var ruleTester = new RuleTester()
-ruleTester.run('no-potential-property-typo', rule, {
-
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2017, sourceType: 'module' }
+})
+tester.run('no-potential-property-typo', rule, {
   valid: [
-
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        dat: {},
+        method: {}
+      }
+      `
+    }
     // give me some code that won't trigger a warning
   ],
 
   invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        dat: {},
+        method: {}
+      }
+      `,
+      options: [{ custom: ['data', 'methods'] }],
+      errors: [
+        `'dat' may be a typo, which is similar to vue component option 'data'.`,
+        `'method' may be a typo, which is similar to vue component option 'methods'.`
+        // {
+        //   message: `'dat' may be a typo, which is similar to vue component option 'data'.`
+        //   // suggestions: [
+        //   //   {
+        //   //     desc: `Replace property 'dat' to 'data'`,
+        //   //     output: `
+        //   //     export default {
+        //   //       data: {},
+        //   //       method: {}
+        //   //     }
+        //   //     `
+        //   //   }
+        //   // ]
+        // },
+        // {
+        //   message: `'method' may be a typo, which is similar to vue component option 'methods'.`
+        //   // suggestions: [
+        //   //   {
+        //   //     desc: `Replace property 'method' to 'methods'`,
+        //   //     output: `
+        //   //     export default {
+        //   //       dat: {},
+        //   //       methods: {}
+        //   //     }
+        //   //     `
+        //   //   }
+        //   // ]
+        // }
+      ]
+    }
   ]
 })

From d16d7cde9072e48dfe579b1b985b99b9bc137af0 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 10 Mar 2020 16:33:06 +0800
Subject: [PATCH 05/21] feat: add testcase

---
 docs/rules/README.md                          |   1 +
 docs/rules/no-potential-property-typo.md      |  16 +-
 lib/configs/essential.js                      |   1 +
 lib/index.js                                  |   1 +
 lib/rules/no-potential-property-typo.js       |  17 +-
 tests/lib/rules/no-potential-property-typo.js | 190 ++++++++++++++----
 6 files changed, 179 insertions(+), 47 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index ab1f5b220..ce00a14ce 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -42,6 +42,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
+| [vue/no-potential-property-typo](./no-potential-property-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
diff --git a/docs/rules/no-potential-property-typo.md b/docs/rules/no-potential-property-typo.md
index fc997a862..ce2878532 100644
--- a/docs/rules/no-potential-property-typo.md
+++ b/docs/rules/no-potential-property-typo.md
@@ -1,4 +1,13 @@
-# detect if there is a potential typo in your component property (no-potential-property-typo)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-potential-property-typo
+description: disallow a potential typo in your component property
+---
+# vue/no-potential-property-typo
+> disallow a potential typo in your component property
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
 Please describe the origin of the rule here.
 
@@ -34,3 +43,8 @@ Give a short description of when it would be appropriate to turn off this rule.
 ## Further Reading
 
 If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-property-typo.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-property-typo.js)
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index a335310fe..23c9b1515 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -10,6 +10,7 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-parsing-error': 'error',
+    'vue/no-potential-property-typo': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
diff --git a/lib/index.js b/lib/index.js
index 02e65ba96..3180295e5 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -48,6 +48,7 @@ module.exports = {
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
     'no-parsing-error': require('./rules/no-parsing-error'),
+    'no-potential-property-typo': require('./rules/no-potential-property-typo'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
     'no-reserved-keys': require('./rules/no-reserved-keys'),
     'no-restricted-syntax': require('./rules/no-restricted-syntax'),
diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-potential-property-typo.js
index c08d6e4c6..a5562749d 100644
--- a/lib/rules/no-potential-property-typo.js
+++ b/lib/rules/no-potential-property-typo.js
@@ -63,6 +63,7 @@ module.exports = {
         if (vueComponentOptions[cur]) {
           return [...pre, ...vueComponentOptions[cur]]
         }
+        // TODO: test cover
         return pre
       }, [])
     }
@@ -71,32 +72,34 @@ module.exports = {
       return {}
     }
     return utils.executeOnVue(context, obj => {
-      // TODO: threshold is an option
       const componentInstanceOptions = obj.properties.filter(
         p => p.type === 'Property' && p.key.type === 'Identifier'
       )
       if (!componentInstanceOptions.length) {
+        // TODO: test cover
         return {}
       }
       componentInstanceOptions.forEach(option => {
-        const name = option.key.name
+        const id = option.key
+        const name = id.name
         const potentialTypoList = candidateOptions
           .map(o => ({ option: o, distance: utils.editDistance(o, name) }))
-          .filter(({ distance }) => distance > threshold || distance === 0)
+          // TODO: test cover
+          .filter(({ distance }) => distance <= threshold && distance > 0)
           .sort((a, b) => a.distance - b.distance)
         if (potentialTypoList.length) {
           context.report({
-            node: option.key,
-            loc: option.key.loc,
+            node: id,
+            loc: id.loc,
             message: `'{{name}}' may be a typo, which is similar to vue component option '{{option}}'.`,
             data: {
               name,
               option: potentialTypoList.map(({ option }) => option).join(',')
             },
-            suggestion: potentialTypoList.map(({ option }) => ({
+            suggest: potentialTypoList.map(({ option }) => ({
               desc: `Replace property '${name}' to '${option}'`,
               fix (fixer) {
-                return fixer.replaceText(option.key, option)
+                return fixer.replaceText(id, option)
               }
             }))
           })
diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-potential-property-typo.js
index ca67d6fe0..9d872e022 100644
--- a/tests/lib/rules/no-potential-property-typo.js
+++ b/tests/lib/rules/no-potential-property-typo.js
@@ -18,64 +18,176 @@ const RuleTester = require('eslint').RuleTester
 
 const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2017, sourceType: 'module' }
+  parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
 })
 tester.run('no-potential-property-typo', rule, {
   valid: [
     {
       filename: 'test.vue',
       code: `
+      <script>
       export default {
         dat: {},
         method: {}
       }
+      </script>
       `
     }
     // give me some code that won't trigger a warning
   ],
-
   invalid: [
     {
       filename: 'test.vue',
       code: `
-      export default {
-        dat: {},
-        method: {}
-      }
-      `,
-      options: [{ custom: ['data', 'methods'] }],
+<script>
+export default {
+  dat: {},
+  method: {}
+}
+</script>
+      `.trim(),
+      errors: [
+        {
+          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          suggestions: [
+            {
+              desc: `Replace property 'dat' to 'data'`,
+              output: `
+<script>
+export default {
+  data: {},
+  method: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        },
+        {
+          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          suggestions: [
+            {
+              desc: `Replace property 'method' to 'methods'`,
+              output: `
+<script>
+export default {
+  dat: {},
+  methods: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        }
+      ],
+      options: [{ custom: ['data', 'methods'] }]
+    },
+    // test if user define custom rule is duplicate with presets
+    {
+      filename: 'test.vue',
+      code: `
+<script>
+export default {
+  dat: {},
+  method: {}
+}
+</script>
+      `.trim(),
       errors: [
-        `'dat' may be a typo, which is similar to vue component option 'data'.`,
-        `'method' may be a typo, which is similar to vue component option 'methods'.`
-        // {
-        //   message: `'dat' may be a typo, which is similar to vue component option 'data'.`
-        //   // suggestions: [
-        //   //   {
-        //   //     desc: `Replace property 'dat' to 'data'`,
-        //   //     output: `
-        //   //     export default {
-        //   //       data: {},
-        //   //       method: {}
-        //   //     }
-        //   //     `
-        //   //   }
-        //   // ]
-        // },
-        // {
-        //   message: `'method' may be a typo, which is similar to vue component option 'methods'.`
-        //   // suggestions: [
-        //   //   {
-        //   //     desc: `Replace property 'method' to 'methods'`,
-        //   //     output: `
-        //   //     export default {
-        //   //       dat: {},
-        //   //       methods: {}
-        //   //     }
-        //   //     `
-        //   //   }
-        //   // ]
-        // }
-      ]
+        {
+          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          suggestions: [
+            {
+              desc: `Replace property 'dat' to 'data'`,
+              output: `
+<script>
+export default {
+  data: {},
+  method: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        },
+        {
+          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          suggestions: [
+            {
+              desc: `Replace property 'method' to 'methods'`,
+              output: `
+<script>
+export default {
+  dat: {},
+  methods: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        }
+      ],
+      options: [{ custom: ['data', 'methods'], presets: ['all'] }]
+    },
+    // test if report correctly, only have preset option
+    {
+
+      filename: 'test.vue',
+      code: `
+<script>
+export default {
+  dat: {},
+  method: {}
+}
+</script>
+      `.trim(),
+      errors: [
+        {
+          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          suggestions: [
+            {
+              desc: `Replace property 'dat' to 'data'`,
+              output: `
+<script>
+export default {
+  data: {},
+  method: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        },
+        {
+          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          suggestions: [
+            {
+              desc: `Replace property 'method' to 'methods'`,
+              output: `
+<script>
+export default {
+  dat: {},
+  methods: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        }
+      ],
+      options: [{ presets: ['vue'] }]
+    },
+    // test if presets item is not a valid preset like 'react'?
+    {
+
+      filename: 'test.vue',
+      code: `
+<script>
+export default {
+}
+</script>
+      `.trim(),
+      options: [{ presets: ['react'] }]
     }
   ]
 })

From ce4898d1336cd73a08908c07deb9bc7249c9b103 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 10 Mar 2020 19:36:33 +0800
Subject: [PATCH 06/21] test: add test, 100% test cover

---
 lib/rules/no-potential-property-typo.js       |  8 +--
 tests/lib/rules/no-potential-property-typo.js | 68 ++++++++++++++++---
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-potential-property-typo.js
index a5562749d..75abe02ef 100644
--- a/lib/rules/no-potential-property-typo.js
+++ b/lib/rules/no-potential-property-typo.js
@@ -60,11 +60,7 @@ module.exports = {
       }, [])
     } else {
       candidateOptions = presets.reduce((pre, cur) => {
-        if (vueComponentOptions[cur]) {
-          return [...pre, ...vueComponentOptions[cur]]
-        }
-        // TODO: test cover
-        return pre
+        return [...pre, ...vueComponentOptions[cur]]
       }, [])
     }
     candidateOptions = [...new Set(candidateOptions.concat(custom))]
@@ -91,7 +87,7 @@ module.exports = {
           context.report({
             node: id,
             loc: id.loc,
-            message: `'{{name}}' may be a typo, which is similar to vue component option '{{option}}'.`,
+            message: `'{{name}}' may be a typo, which is similar to option [{{option}}].`,
             data: {
               name,
               option: potentialTypoList.map(({ option }) => option).join(',')
diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-potential-property-typo.js
index 9d872e022..d8c35a054 100644
--- a/tests/lib/rules/no-potential-property-typo.js
+++ b/tests/lib/rules/no-potential-property-typo.js
@@ -32,6 +32,30 @@ tester.run('no-potential-property-typo', rule, {
       }
       </script>
       `
+    },
+    {
+
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+      }
+      </script>
+      `.trim(),
+      options: [{ presets: ['vue'] }]
+    },
+    // test if give preset and the potentialTypoList length is zero, just for 100% test cover
+    {
+
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data() {}
+      }
+      </script>
+      `.trim(),
+      options: [{ presets: ['vue'] }]
     }
     // give me some code that won't trigger a warning
   ],
@@ -48,7 +72,7 @@ export default {
       `.trim(),
       errors: [
         {
-          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          message: "'dat' may be a typo, which is similar to option [data].",
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -64,7 +88,7 @@ export default {
           ]
         },
         {
-          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          message: `'method' may be a typo, which is similar to option [methods].`,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -95,7 +119,7 @@ export default {
       `.trim(),
       errors: [
         {
-          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          message: "'dat' may be a typo, which is similar to option [data].",
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -111,7 +135,7 @@ export default {
           ]
         },
         {
-          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          message: `'method' may be a typo, which is similar to option [methods].`,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -143,7 +167,7 @@ export default {
       `.trim(),
       errors: [
         {
-          message: "'dat' may be a typo, which is similar to vue component option 'data'.",
+          message: "'dat' may be a typo, which is similar to option [data].",
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -159,7 +183,7 @@ export default {
           ]
         },
         {
-          message: `'method' may be a typo, which is similar to vue component option 'methods'.`,
+          message: `'method' may be a typo, which is similar to option [methods].`,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -177,17 +201,45 @@ export default {
       ],
       options: [{ presets: ['vue'] }]
     },
-    // test if presets item is not a valid preset like 'react'?
+    // test multi suggestion
     {
 
       filename: 'test.vue',
       code: `
 <script>
 export default {
+  method: {}
 }
 </script>
       `.trim(),
-      options: [{ presets: ['react'] }]
+      errors: [
+        {
+          message: `'method' may be a typo, which is similar to option [methods,data].`,
+          suggestions: [
+            {
+              desc: `Replace property 'method' to 'methods'`,
+              output: `
+<script>
+export default {
+  methods: {}
+}
+</script>
+              `.trim()
+            },
+            {
+              desc: `Replace property 'method' to 'data'`,
+              output: `
+<script>
+export default {
+  data: {}
+}
+</script>
+              `.trim()
+            }
+          ]
+        }
+      ],
+      options: [{ custom: ['data', 'methods'], threshold: 10 }]
     }
   ]
 })

From 82f2dee4ff68b3ebe3c1ca162915be92e5ee61d3 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Wed, 11 Mar 2020 11:19:14 +0800
Subject: [PATCH 07/21] test: menual indentation

---
 tests/lib/rules/no-potential-property-typo.js | 138 +++++++++---------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-potential-property-typo.js
index d8c35a054..8594191c4 100644
--- a/tests/lib/rules/no-potential-property-typo.js
+++ b/tests/lib/rules/no-potential-property-typo.js
@@ -63,12 +63,12 @@ tester.run('no-potential-property-typo', rule, {
     {
       filename: 'test.vue',
       code: `
-<script>
-export default {
-  dat: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        method: {}
+      }
+      </script>
       `.trim(),
       errors: [
         {
@@ -77,12 +77,12 @@ export default {
             {
               desc: `Replace property 'dat' to 'data'`,
               output: `
-<script>
-export default {
-  data: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        data: {},
+        method: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -93,12 +93,12 @@ export default {
             {
               desc: `Replace property 'method' to 'methods'`,
               output: `
-<script>
-export default {
-  dat: {},
-  methods: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        methods: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -110,12 +110,12 @@ export default {
     {
       filename: 'test.vue',
       code: `
-<script>
-export default {
-  dat: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        method: {}
+      }
+      </script>
       `.trim(),
       errors: [
         {
@@ -124,12 +124,12 @@ export default {
             {
               desc: `Replace property 'dat' to 'data'`,
               output: `
-<script>
-export default {
-  data: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        data: {},
+        method: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -140,12 +140,12 @@ export default {
             {
               desc: `Replace property 'method' to 'methods'`,
               output: `
-<script>
-export default {
-  dat: {},
-  methods: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        methods: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -158,12 +158,12 @@ export default {
 
       filename: 'test.vue',
       code: `
-<script>
-export default {
-  dat: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        method: {}
+      }
+      </script>
       `.trim(),
       errors: [
         {
@@ -172,12 +172,12 @@ export default {
             {
               desc: `Replace property 'dat' to 'data'`,
               output: `
-<script>
-export default {
-  data: {},
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        data: {},
+        method: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -188,12 +188,12 @@ export default {
             {
               desc: `Replace property 'method' to 'methods'`,
               output: `
-<script>
-export default {
-  dat: {},
-  methods: {}
-}
-</script>
+      <script>
+      export default {
+        dat: {},
+        methods: {}
+      }
+      </script>
               `.trim()
             }
           ]
@@ -206,11 +206,11 @@ export default {
 
       filename: 'test.vue',
       code: `
-<script>
-export default {
-  method: {}
-}
-</script>
+      <script>
+      export default {
+        method: {}
+      }
+      </script>
       `.trim(),
       errors: [
         {
@@ -219,21 +219,21 @@ export default {
             {
               desc: `Replace property 'method' to 'methods'`,
               output: `
-<script>
-export default {
-  methods: {}
-}
-</script>
+      <script>
+      export default {
+        methods: {}
+      }
+      </script>
               `.trim()
             },
             {
               desc: `Replace property 'method' to 'data'`,
               output: `
-<script>
-export default {
-  data: {}
-}
-</script>
+      <script>
+      export default {
+        data: {}
+      }
+      </script>
               `.trim()
             }
           ]

From d0a57387c742d049766099ecf1d2a8b9322253a9 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Wed, 11 Mar 2020 11:31:32 +0800
Subject: [PATCH 08/21] =?UTF-8?q?style:=20remove=20todo=20comment=20that?=
 =?UTF-8?q?=20have=20been=20done=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rules/no-potential-property-typo.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-potential-property-typo.js
index 75abe02ef..1794be0c5 100644
--- a/lib/rules/no-potential-property-typo.js
+++ b/lib/rules/no-potential-property-typo.js
@@ -72,7 +72,6 @@ module.exports = {
         p => p.type === 'Property' && p.key.type === 'Identifier'
       )
       if (!componentInstanceOptions.length) {
-        // TODO: test cover
         return {}
       }
       componentInstanceOptions.forEach(option => {
@@ -80,7 +79,6 @@ module.exports = {
         const name = id.name
         const potentialTypoList = candidateOptions
           .map(o => ({ option: o, distance: utils.editDistance(o, name) }))
-          // TODO: test cover
           .filter(({ distance }) => distance <= threshold && distance > 0)
           .sort((a, b) => a.distance - b.distance)
         if (potentialTypoList.length) {

From 1db57b1b21595737f407957eb9ca48b32affd4c8 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Thu, 12 Mar 2020 15:11:20 +0800
Subject: [PATCH 09/21] fix: change rule name -> no-unknown-component-options

---
 docs/rules/README.md                                      | 2 +-
 ...l-property-typo.md => no-unknown-component-options.md} | 8 ++++----
 lib/configs/essential.js                                  | 2 +-
 lib/index.js                                              | 2 +-
 ...l-property-typo.js => no-unknown-component-options.js} | 2 +-
 ...l-property-typo.js => no-unknown-component-options.js} | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)
 rename docs/rules/{no-potential-property-typo.md => no-unknown-component-options.md} (84%)
 rename lib/rules/{no-potential-property-typo.js => no-unknown-component-options.js} (97%)
 rename tests/lib/rules/{no-potential-property-typo.js => no-unknown-component-options.js} (97%)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index ce00a14ce..65fadc252 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -42,12 +42,12 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-potential-property-typo](./no-potential-property-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unknown-component-options](./no-unknown-component-options.md) | disallow a potential typo in your component property |  |
 | [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
 | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
diff --git a/docs/rules/no-potential-property-typo.md b/docs/rules/no-unknown-component-options.md
similarity index 84%
rename from docs/rules/no-potential-property-typo.md
rename to docs/rules/no-unknown-component-options.md
index ce2878532..0b2dee1a3 100644
--- a/docs/rules/no-potential-property-typo.md
+++ b/docs/rules/no-unknown-component-options.md
@@ -1,10 +1,10 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
-title: vue/no-potential-property-typo
+title: vue/no-unknown-component-options
 description: disallow a potential typo in your component property
 ---
-# vue/no-potential-property-typo
+# vue/no-unknown-component-options
 > disallow a potential typo in your component property
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -46,5 +46,5 @@ If there are other links that describe the issue this rule addresses, please inc
 
 ## :mag: Implementation
 
-- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-property-typo.js)
-- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-property-typo.js)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unknown-component-options.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unknown-component-options.js)
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index 23c9b1515..d5e0b6244 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -10,12 +10,12 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-parsing-error': 'error',
-    'vue/no-potential-property-typo': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',
     'vue/no-textarea-mustache': 'error',
+    'vue/no-unknown-component-options': 'error',
     'vue/no-unused-components': 'error',
     'vue/no-unused-vars': 'error',
     'vue/no-use-v-if-with-v-for': 'error',
diff --git a/lib/index.js b/lib/index.js
index 3180295e5..54da8f93d 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -48,7 +48,6 @@ module.exports = {
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
     'no-parsing-error': require('./rules/no-parsing-error'),
-    'no-potential-property-typo': require('./rules/no-potential-property-typo'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
     'no-reserved-keys': require('./rules/no-reserved-keys'),
     'no-restricted-syntax': require('./rules/no-restricted-syntax'),
@@ -59,6 +58,7 @@ module.exports = {
     'no-template-key': require('./rules/no-template-key'),
     'no-template-shadow': require('./rules/no-template-shadow'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
+    'no-unknown-component-options': require('./rules/no-unknown-component-options'),
     'no-unsupported-features': require('./rules/no-unsupported-features'),
     'no-unused-components': require('./rules/no-unused-components'),
     'no-unused-vars': require('./rules/no-unused-vars'),
diff --git a/lib/rules/no-potential-property-typo.js b/lib/rules/no-unknown-component-options.js
similarity index 97%
rename from lib/rules/no-potential-property-typo.js
rename to lib/rules/no-unknown-component-options.js
index 1794be0c5..8048a0ca2 100644
--- a/lib/rules/no-potential-property-typo.js
+++ b/lib/rules/no-unknown-component-options.js
@@ -17,7 +17,7 @@ module.exports = {
       description: 'disallow a potential typo in your component property',
       category: 'essential',
       recommended: false,
-      url: 'https://eslint.vuejs.org/rules/no-potential-property-typo.html'
+      url: 'https://eslint.vuejs.org/rules/no-unknown-component-options.html'
     },
     fixable: null,
     schema: [
diff --git a/tests/lib/rules/no-potential-property-typo.js b/tests/lib/rules/no-unknown-component-options.js
similarity index 97%
rename from tests/lib/rules/no-potential-property-typo.js
rename to tests/lib/rules/no-unknown-component-options.js
index 8594191c4..d286bc0b7 100644
--- a/tests/lib/rules/no-potential-property-typo.js
+++ b/tests/lib/rules/no-unknown-component-options.js
@@ -8,7 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-const rule = require('../../../lib/rules/no-potential-property-typo')
+const rule = require('../../../lib/rules/no-unknown-component-options')
 
 const RuleTester = require('eslint').RuleTester
 
@@ -20,7 +20,7 @@ const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
 })
-tester.run('no-potential-property-typo', rule, {
+tester.run('no-unknown-component-options', rule, {
   valid: [
     {
       filename: 'test.vue',

From b693c35a8cf2992b078823f9c4c56e48a7447e29 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Sun, 15 Mar 2020 21:35:38 +0800
Subject: [PATCH 10/21] feat: rename `no-unknow-component-options` ->
 `no-potential-component-options-typo`

---
 docs/rules/README.md                          |   2 +-
 .../no-potential-component-option-typo.md     | 160 ++++++++++++++++++
 docs/rules/no-unknown-component-options.md    |   8 +-
 lib/configs/essential.js                      |   2 +-
 lib/index.js                                  |   2 +-
 ... => no-potential-component-option-typo.js} |   4 +-
 ... => no-potential-component-option-typo.js} |   4 +-
 7 files changed, 171 insertions(+), 11 deletions(-)
 create mode 100644 docs/rules/no-potential-component-option-typo.md
 rename lib/rules/{no-unknown-component-options.js => no-potential-component-option-typo.js} (96%)
 rename tests/lib/rules/{no-unknown-component-options.js => no-potential-component-option-typo.js} (97%)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index acd86a54d..9344aaf8c 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -151,12 +151,12 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
+| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
-| [vue/no-unknown-component-options](./no-unknown-component-options.md) | disallow a potential typo in your component property |  |
 | [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
 | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
diff --git a/docs/rules/no-potential-component-option-typo.md b/docs/rules/no-potential-component-option-typo.md
new file mode 100644
index 000000000..f50bb8c37
--- /dev/null
+++ b/docs/rules/no-potential-component-option-typo.md
@@ -0,0 +1,160 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-potential-component-option-typo
+description: disallow a potential typo in your component property
+---
+# vue/no-potential-component-option-typo
+> disallow a potential typo in your component property
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+## :book: Rule Details
+
+This rule reports components that haven't been used in the template.
+
+<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <the-modal>
+      <component is="TheInput" />
+      <component :is="'TheDropdown'" />
+      <TheButton>CTA</TheButton>
+    </the-modal>
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+  import TheModal from 'components/TheModal.vue'
+  import TheInput from 'components/TheInput.vue'
+  import TheDropdown from 'components/TheDropdown.vue'
+
+  export default {
+    components: {
+      TheButton,
+      TheModal,
+      TheInput,
+      TheDropdown,
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <TheModal />
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+  import TheModal from 'components/TheModal.vue'
+
+  export default {
+    components: {
+      TheButton, // Unused component
+      'the-modal': TheModal // Unused component
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+::: warning Note
+Components registered under `PascalCase` or `camelCase` names have may be called however you like, except using `snake_case`. Otherwise, they will need to be called directly under the specified name.
+:::
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-unused-components": ["error", {
+    "ignoreWhenBindingPresent": true
+  }]
+}
+```
+
+- `ignoreWhenBindingPresent` ... suppresses all errors if binding has been detected in the template
+    default `true`
+
+### `ignoreWhenBindingPresent: false`
+
+<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <TheButton v-if="" />
+    <TheSelect v-else-if="" />
+    <TheInput v-else="" />
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+  import TheSelect from 'components/TheSelect.vue'
+  import TheInput from 'components/TheInput.vue'
+
+  export default {
+    components: {
+      TheButton,
+      TheSelect,
+      TheInput,
+    },
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <component :is="computedComponent" />
+  </div>
+</template>
+
+<script>
+  import TheButton from 'components/TheButton.vue'
+  import TheSelect from 'components/TheSelect.vue'
+  import TheInput from 'components/TheInput.vue'
+
+  export default {
+    components: {
+      TheButton, // <- not used
+      TheSelect, // <- not used
+      TheInput, // <- not used
+    },
+    computed: {
+      computedComponent() {
+      }
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-component-option-typo.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-component-option-typo.js)
diff --git a/docs/rules/no-unknown-component-options.md b/docs/rules/no-unknown-component-options.md
index 0b2dee1a3..db5de66a1 100644
--- a/docs/rules/no-unknown-component-options.md
+++ b/docs/rules/no-unknown-component-options.md
@@ -1,10 +1,10 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
-title: vue/no-unknown-component-options
+title: vue/no-potential-component-option-typo
 description: disallow a potential typo in your component property
 ---
-# vue/no-unknown-component-options
+# vue/no-potential-component-option-typo
 > disallow a potential typo in your component property
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -46,5 +46,5 @@ If there are other links that describe the issue this rule addresses, please inc
 
 ## :mag: Implementation
 
-- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unknown-component-options.js)
-- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unknown-component-options.js)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-component-option-typo.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-component-option-typo.js)
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index 7339eefb5..cc6ac6bf7 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -12,12 +12,12 @@ module.exports = {
     'vue/no-duplicate-attributes': 'error',
     'vue/no-multiple-template-root': 'error',
     'vue/no-parsing-error': 'error',
+    'vue/no-potential-component-option-typo': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',
     'vue/no-textarea-mustache': 'error',
-    'vue/no-unknown-component-options': 'error',
     'vue/no-unused-components': 'error',
     'vue/no-unused-vars': 'error',
     'vue/no-use-v-if-with-v-for': 'error',
diff --git a/lib/index.js b/lib/index.js
index c1c2431d2..565e4277a 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -53,6 +53,7 @@ module.exports = {
     'no-multi-spaces': require('./rules/no-multi-spaces'),
     'no-multiple-template-root': require('./rules/no-multiple-template-root'),
     'no-parsing-error': require('./rules/no-parsing-error'),
+    'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
     'no-ref-as-operand': require('./rules/no-ref-as-operand'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
     'no-reserved-keys': require('./rules/no-reserved-keys'),
@@ -65,7 +66,6 @@ module.exports = {
     'no-template-key': require('./rules/no-template-key'),
     'no-template-shadow': require('./rules/no-template-shadow'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
-    'no-unknown-component-options': require('./rules/no-unknown-component-options'),
     'no-unsupported-features': require('./rules/no-unsupported-features'),
     'no-unused-components': require('./rules/no-unused-components'),
     'no-unused-vars': require('./rules/no-unused-vars'),
diff --git a/lib/rules/no-unknown-component-options.js b/lib/rules/no-potential-component-option-typo.js
similarity index 96%
rename from lib/rules/no-unknown-component-options.js
rename to lib/rules/no-potential-component-option-typo.js
index 8048a0ca2..cc9aff67d 100644
--- a/lib/rules/no-unknown-component-options.js
+++ b/lib/rules/no-potential-component-option-typo.js
@@ -15,9 +15,9 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'disallow a potential typo in your component property',
-      category: 'essential',
+      categories: ['essential'],
       recommended: false,
-      url: 'https://eslint.vuejs.org/rules/no-unknown-component-options.html'
+      url: 'https://eslint.vuejs.org/rules/no-potential-component-option-typo.html'
     },
     fixable: null,
     schema: [
diff --git a/tests/lib/rules/no-unknown-component-options.js b/tests/lib/rules/no-potential-component-option-typo.js
similarity index 97%
rename from tests/lib/rules/no-unknown-component-options.js
rename to tests/lib/rules/no-potential-component-option-typo.js
index d286bc0b7..1c7e9aea3 100644
--- a/tests/lib/rules/no-unknown-component-options.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -8,7 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-const rule = require('../../../lib/rules/no-unknown-component-options')
+const rule = require('../../../lib/rules/no-potential-component-option-typo')
 
 const RuleTester = require('eslint').RuleTester
 
@@ -20,7 +20,7 @@ const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
 })
-tester.run('no-unknown-component-options', rule, {
+tester.run('no-potential-component-option-typo', rule, {
   valid: [
     {
       filename: 'test.vue',

From 705fdfd872c23fd40aa512af99ead74866ec44d4 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Sun, 15 Mar 2020 21:40:54 +0800
Subject: [PATCH 11/21] feat: remove unnecessary readme

---
 docs/rules/no-unknown-component-options.md | 50 ----------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 docs/rules/no-unknown-component-options.md

diff --git a/docs/rules/no-unknown-component-options.md b/docs/rules/no-unknown-component-options.md
deleted file mode 100644
index db5de66a1..000000000
--- a/docs/rules/no-unknown-component-options.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-pageClass: rule-details
-sidebarDepth: 0
-title: vue/no-potential-component-option-typo
-description: disallow a potential typo in your component property
----
-# vue/no-potential-component-option-typo
-> disallow a potential typo in your component property
-
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-
-Please describe the origin of the rule here.
-
-
-## Rule Details
-
-This rule aims to...
-
-Examples of **incorrect** code for this rule:
-
-```js
-
-// fill me in
-
-```
-
-Examples of **correct** code for this rule:
-
-```js
-
-// fill me in
-
-```
-
-### Options
-
-If there are any options, describe them here. Otherwise, delete this section.
-
-## When Not To Use It
-
-Give a short description of when it would be appropriate to turn off this rule.
-
-## Further Reading
-
-If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.
-
-## :mag: Implementation
-
-- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-component-option-typo.js)
-- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-component-option-typo.js)

From 0806addab672d76541e82e283788fbe30b5fb35b Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Sun, 15 Mar 2020 21:53:45 +0800
Subject: [PATCH 12/21] feat: revert lib/utils/index.js

---
 lib/utils/index.js | 187 +++++++++++++++------------------------------
 1 file changed, 61 insertions(+), 126 deletions(-)

diff --git a/lib/utils/index.js b/lib/utils/index.js
index e2d65efb2..574c02f0d 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -72,15 +72,11 @@ module.exports = {
     if (context.parserServices.defineTemplateBodyVisitor == null) {
       context.report({
         loc: { line: 1, column: 0 },
-        message:
-          'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error'
+        message: 'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error'
       })
       return {}
     }
-    return context.parserServices.defineTemplateBodyVisitor(
-      templateBodyVisitor,
-      scriptVisitor
-    )
+    return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
   },
 
   /**
@@ -112,8 +108,7 @@ module.exports = {
           delete handlers.Program
         }
         if (handlers['Program:exit']) {
-          handlers["VElement[parent.type!='VElement']:exit"] =
-            handlers['Program:exit']
+          handlers["VElement[parent.type!='VElement']:exit"] = handlers['Program:exit']
           delete handlers['Program:exit']
         }
 
@@ -126,12 +121,8 @@ module.exports = {
               original(...args)
             }
           }
-          handlers['VDirectiveKey > VExpressionContainer'] = () => {
-            withinDynamicArguments = true
-          }
-          handlers['VDirectiveKey > VExpressionContainer:exit'] = () => {
-            withinDynamicArguments = false
-          }
+          handlers['VDirectiveKey > VExpressionContainer'] = () => { withinDynamicArguments = true }
+          handlers['VDirectiveKey > VExpressionContainer:exit'] = () => { withinDynamicArguments = false }
         }
 
         // Apply the handlers to templates.
@@ -141,9 +132,7 @@ module.exports = {
       meta: Object.assign({}, coreRule.meta, {
         docs: Object.assign({}, coreRule.meta.docs, {
           category,
-          url: `https://eslint.vuejs.org/rules/${path.basename(
-            coreRule.meta.docs.url || ''
-          )}.html`
+          url: `https://eslint.vuejs.org/rules/${path.basename(coreRule.meta.docs.url || '')}.html`
         })
       })
     }
@@ -230,11 +219,13 @@ module.exports = {
    */
   getAttribute (node, name, value) {
     assert(node && node.type === 'VElement')
-    return node.startTag.attributes.find(
-      a =>
-        !a.directive &&
-        a.key.name === name &&
-        (value === undefined || (a.value != null && a.value.value === value))
+    return node.startTag.attributes.find(a =>
+      !a.directive &&
+      a.key.name === name &&
+      (
+        value === undefined ||
+        (a.value != null && a.value.value === value)
+      )
     )
   },
 
@@ -247,12 +238,10 @@ module.exports = {
    */
   getDirective (node, name, argument) {
     assert(node && node.type === 'VElement')
-    return node.startTag.attributes.find(
-      a =>
-        a.directive &&
-        a.key.name.name === name &&
-        (argument === undefined ||
-          (a.key.argument && a.key.argument.name) === argument)
+    return node.startTag.attributes.find(a =>
+      a.directive &&
+      a.key.name.name === name &&
+      (argument === undefined || (a.key.argument && a.key.argument.name) === argument)
     )
   },
 
@@ -262,17 +251,15 @@ module.exports = {
    * @returns {Array} Array of ASTNodes
    */
   getRegisteredComponents (componentObject) {
-    const componentsNode = componentObject.properties.find(
-      p =>
+    const componentsNode = componentObject.properties
+      .find(p =>
         p.type === 'Property' &&
         p.key.type === 'Identifier' &&
         p.key.name === 'components' &&
         p.value.type === 'ObjectExpression'
-    )
+      )
 
-    if (!componentsNode) {
-      return []
-    }
+    if (!componentsNode) { return [] }
 
     return componentsNode.value.properties
       .filter(p => p.type === 'Property')
@@ -294,10 +281,9 @@ module.exports = {
     const prev = this.prevSibling(node)
     return (
       prev != null &&
-      prev.startTag.attributes.some(
-        a =>
-          a.directive &&
-          (a.key.name.name === 'if' || a.key.name.name === 'else-if')
+      prev.startTag.attributes.some(a =>
+        a.directive &&
+        (a.key.name.name === 'if' || a.key.name.name === 'else-if')
       )
     )
   },
@@ -311,8 +297,7 @@ module.exports = {
     assert(node && node.type === 'VElement')
 
     return (
-      (this.isHtmlElementNode(node) &&
-        !this.isHtmlWellKnownElementName(node.rawName)) ||
+      (this.isHtmlElementNode(node) && !this.isHtmlWellKnownElementName(node.rawName)) ||
       this.hasAttribute(node, 'is') ||
       this.hasDirective(node, 'bind', 'is')
     )
@@ -425,14 +410,13 @@ module.exports = {
    * @return {(ComponentArrayProp | ComponentObjectProp)[]} Array of component props in format: [{key?: String, value?: ASTNode, node: ASTNod}]
    */
   getComponentProps (componentObject) {
-    const propsNode = componentObject.properties.find(
-      p =>
+    const propsNode = componentObject.properties
+      .find(p =>
         p.type === 'Property' &&
         p.key.type === 'Identifier' &&
         p.key.name === 'props' &&
-        (p.value.type === 'ObjectExpression' ||
-          p.value.type === 'ArrayExpression')
-    )
+        (p.value.type === 'ObjectExpression' || p.value.type === 'ArrayExpression')
+      )
 
     if (!propsNode) {
       return []
@@ -445,9 +429,7 @@ module.exports = {
         .filter(prop => prop.type === 'Property')
         .map(prop => {
           return {
-            key: prop.key,
-            value: unwrapTypes(prop.value),
-            node: prop,
+            key: prop.key, value: unwrapTypes(prop.value), node: prop,
             propName: getStaticPropertyName(prop)
           }
         })
@@ -455,16 +437,8 @@ module.exports = {
       props = propsNode.value.elements
         .filter(prop => prop)
         .map(prop => {
-          const key =
-            prop.type === 'Literal' && typeof prop.value === 'string'
-              ? prop
-              : null
-          return {
-            key,
-            value: null,
-            node: prop,
-            propName: key != null ? prop.value : null
-          }
+          const key = prop.type === 'Literal' && typeof prop.value === 'string' ? prop : null
+          return { key, value: null, node: prop, propName: key != null ? prop.value : null }
         })
     }
 
@@ -477,17 +451,15 @@ module.exports = {
    * @return {Array} Array of computed properties in format: [{key: String, value: ASTNode}]
    */
   getComputedProperties (componentObject) {
-    const computedPropertiesNode = componentObject.properties.find(
-      p =>
+    const computedPropertiesNode = componentObject.properties
+      .find(p =>
         p.type === 'Property' &&
         p.key.type === 'Identifier' &&
         p.key.name === 'computed' &&
         p.value.type === 'ObjectExpression'
-    )
+      )
 
-    if (!computedPropertiesNode) {
-      return []
-    }
+    if (!computedPropertiesNode) { return [] }
 
     return computedPropertiesNode.value.properties
       .filter(cp => cp.type === 'Property')
@@ -499,12 +471,11 @@ module.exports = {
           value = cp.value.body
         } else if (cp.value.type === 'ObjectExpression') {
           value = cp.value.properties
-            .filter(
-              p =>
-                p.type === 'Property' &&
-                p.key.type === 'Identifier' &&
-                p.key.name === 'get' &&
-                p.value.type === 'FunctionExpression'
+            .filter(p =>
+              p.type === 'Property' &&
+              p.key.type === 'Identifier' &&
+              p.key.name === 'get' &&
+              p.value.type === 'FunctionExpression'
             )
             .map(p => p.value.body)[0]
         }
@@ -526,11 +497,9 @@ module.exports = {
    * @returns {boolean}
    */
   isVueComponentFile (node, path) {
-    return (
-      this.isVueFile(path) &&
+    return this.isVueFile(path) &&
       node.type === 'ExportDefaultDeclaration' &&
       node.declaration.type === 'ObjectExpression'
-    )
   },
 
   /**
@@ -561,7 +530,8 @@ module.exports = {
           // for Vue.js 3.x
           // app.component('xxx', {}) || app.mixin({})
           const isFullVueComponent =
-            ['component', 'mixin'].includes(propName) && isObjectArgument(node)
+            ['component', 'mixin'].includes(propName) &&
+            isObjectArgument(node)
 
           return isFullVueComponent
         }
@@ -586,10 +556,8 @@ module.exports = {
     return false
 
     function isObjectArgument (node) {
-      return (
-        node.arguments.length > 0 &&
+      return node.arguments.length > 0 &&
         unwrapTypes(node.arguments.slice(-1)[0]).type === 'ObjectExpression'
-      )
     }
   },
 
@@ -601,13 +569,11 @@ module.exports = {
    */
   isVueInstance (node) {
     const callee = node.callee
-    return (
-      node.type === 'NewExpression' &&
+    return node.type === 'NewExpression' &&
       callee.type === 'Identifier' &&
       callee.name === 'Vue' &&
       node.arguments.length &&
       unwrapTypes(node.arguments[0]).type === 'ObjectExpression'
-    )
   },
 
   /**
@@ -648,41 +614,28 @@ module.exports = {
     const filePath = context.getFilename()
     const sourceCode = context.getSourceCode()
     const _this = this
-    const componentComments = sourceCode
-      .getAllComments()
-      .filter(comment => /@vue\/component/g.test(comment.value))
+    const componentComments = sourceCode.getAllComments().filter(comment => /@vue\/component/g.test(comment.value))
     const foundNodes = []
 
-    const isDuplicateNode = node => {
-      if (foundNodes.some(el => el.loc.start.line === node.loc.start.line)) { return true }
+    const isDuplicateNode = (node) => {
+      if (foundNodes.some(el => el.loc.start.line === node.loc.start.line)) return true
       foundNodes.push(node)
       return false
     }
 
     return {
       'ObjectExpression:exit' (node) {
-        if (
-          !componentComments.some(
-            el => el.loc.end.line === node.loc.start.line - 1
-          ) ||
-          isDuplicateNode(node)
-        ) { return }
+        if (!componentComments.some(el => el.loc.end.line === node.loc.start.line - 1) || isDuplicateNode(node)) return
         cb(node)
       },
       'ExportDefaultDeclaration:exit' (node) {
         // export default {} in .vue || .jsx
-        if (
-          !_this.isVueComponentFile(node, filePath) ||
-          isDuplicateNode(node.declaration)
-        ) { return }
+        if (!_this.isVueComponentFile(node, filePath) || isDuplicateNode(node.declaration)) return
         cb(node.declaration)
       },
       'CallExpression:exit' (node) {
         // Vue.component('xxx', {}) || component('xxx', {})
-        if (
-          !_this.isVueComponent(node) ||
-          isDuplicateNode(node.arguments.slice(-1)[0])
-        ) { return }
+        if (!_this.isVueComponent(node) || isDuplicateNode(node.arguments.slice(-1)[0])) return
         cb(unwrapTypes(node.arguments.slice(-1)[0]))
       }
     }
@@ -695,19 +648,17 @@ module.exports = {
    */
   executeOnCallVueComponent (_context, cb) {
     return {
-      "CallExpression > MemberExpression > Identifier[name='component']": node => {
+      "CallExpression > MemberExpression > Identifier[name='component']": (node) => {
         const callExpr = node.parent.parent
         const callee = callExpr.callee
 
         if (callee.type === 'MemberExpression') {
           const calleeObject = unwrapTypes(callee.object)
 
-          if (
-            calleeObject.type === 'Identifier' &&
+          if (calleeObject.type === 'Identifier' &&
             // calleeObject.name === 'Vue' && // Any names can be used in Vue.js 3.x. e.g. app.component()
             callee.property === node &&
-            callExpr.arguments.length >= 1
-          ) {
+            callExpr.arguments.length >= 1) {
             cb(callExpr)
           }
         }
@@ -720,9 +671,7 @@ module.exports = {
    * @param {Set} groups Name of parent group
    */
   * iterateProperties (node, groups) {
-    const nodes = node.properties.filter(
-      p => p.type === 'Property' && groups.has(getStaticPropertyName(p.key))
-    )
+    const nodes = node.properties.filter(p => p.type === 'Property' && groups.has(getStaticPropertyName(p.key)))
     for (const item of nodes) {
       const name = getStaticPropertyName(item.key)
       if (!name) continue
@@ -780,11 +729,7 @@ module.exports = {
     assert(node.type === 'FunctionExpression')
     if (node.body.type === 'BlockStatement') {
       for (const item of node.body.body) {
-        if (
-          item.type === 'ReturnStatement' &&
-          item.argument &&
-          item.argument.type === 'ObjectExpression'
-        ) {
+        if (item.type === 'ReturnStatement' && item.argument && item.argument.type === 'ObjectExpression') {
           yield * this.iterateObjectExpression(item.argument, groupName)
         }
       }
@@ -800,11 +745,7 @@ module.exports = {
     assert(node.type === 'ArrowFunctionExpression')
     if (node.body.type === 'BlockStatement') {
       for (const item of node.body.body) {
-        if (
-          item.type === 'ReturnStatement' &&
-          item.argument &&
-          item.argument.type === 'ObjectExpression'
-        ) {
+        if (item.type === 'ReturnStatement' && item.argument && item.argument.type === 'ObjectExpression') {
           yield * this.iterateObjectExpression(item.argument, groupName)
         }
       }
@@ -887,9 +828,7 @@ module.exports = {
     if (body == null || body.errors == null) {
       return
     }
-    return body.errors.some(
-      error => typeof error.code === 'string' && error.code.startsWith('eof-')
-    )
+    return body.errors.some(error => typeof error.code === 'string' && error.code.startsWith('eof-'))
   },
 
   /**
@@ -926,11 +865,9 @@ module.exports = {
       parsedCallee.push('this')
     }
 
-    return parsedCallee
-      .reverse()
-      .join('.')
-      .replace(/\.\[/g, '[')
+    return parsedCallee.reverse().join('.').replace(/\.\[/g, '[')
   },
+
   /**
    * return two string editdistance
    * @param {string} a string a to compare
@@ -963,7 +900,6 @@ module.exports = {
     }
     return dp[alen][blen]
   },
-
   /**
    * Unwrap typescript types like "X as F"
    * @template T
@@ -972,7 +908,6 @@ module.exports = {
    */
   unwrapTypes
 }
-
 /**
 * Unwrap typescript types like "X as F"
 * @template T

From 3ee86c817bb4543ce9a555cbc9ba3dae8dc45c4a Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Mon, 16 Mar 2020 14:02:38 +0800
Subject: [PATCH 13/21] docs: update readme

---
 .../no-potential-component-option-typo.md     | 197 +++++++-----------
 1 file changed, 80 insertions(+), 117 deletions(-)

diff --git a/docs/rules/no-potential-component-option-typo.md b/docs/rules/no-potential-component-option-typo.md
index f50bb8c37..23ce77897 100644
--- a/docs/rules/no-potential-component-option-typo.md
+++ b/docs/rules/no-potential-component-option-typo.md
@@ -11,149 +11,112 @@ description: disallow a potential typo in your component property
 
 ## :book: Rule Details
 
-This rule reports components that haven't been used in the template.
+This Rule disallow a potential typo in your component options
 
-<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
-
-```vue
-<!-- ✓ GOOD -->
-<template>
-  <div>
-    <h2>Lorem ipsum</h2>
-    <the-modal>
-      <component is="TheInput" />
-      <component :is="'TheDropdown'" />
-      <TheButton>CTA</TheButton>
-    </the-modal>
-  </div>
-</template>
-
-<script>
-  import TheButton from 'components/TheButton.vue'
-  import TheModal from 'components/TheModal.vue'
-  import TheInput from 'components/TheInput.vue'
-  import TheDropdown from 'components/TheDropdown.vue'
-
-  export default {
-    components: {
-      TheButton,
-      TheModal,
-      TheInput,
-      TheDropdown,
-    }
-  }
-</script>
+**Here is the config**
+```js
+{'vue/no-potential-component-option-typo': ['error', {presets: ['all'], custom: ['test']}]}
 ```
 
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+<eslint-code-block :rules="{'vue/no-potential-component-option-typo': ['error', {presets: ['all'], custom: ['test']}]}">
 
 ```vue
-<!-- ✗ BAD -->
-<template>
-  <div>
-    <h2>Lorem ipsum</h2>
-    <TheModal />
-  </div>
-</template>
-
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheModal from 'components/TheModal.vue'
-
-  export default {
-    components: {
-      TheButton, // Unused component
-      'the-modal': TheModal // Unused component
-    }
+export default {
+  /* ✓ GOOD */
+  props: {
+    
+  },
+  /* × BAD */
+  method: {
+
+  },
+  /* ✓ GOOD */
+  data: {
+    
+  },
+  /* × BAD */
+  beforeRouteEnteR() {
+
+  },
+  /* × BAD due to custom option 'test'*/
+  testt: {
+
   }
+}
 </script>
 ```
 
 </eslint-code-block>
 
-::: warning Note
-Components registered under `PascalCase` or `camelCase` names have may be called however you like, except using `snake_case`. Otherwise, they will need to be called directly under the specified name.
-:::
-
-## :wrench: Options
+> we use editdistance to compare two string similarity, threshold is an option to control upper bound of editdistance to report
 
-```json
-{
-  "vue/no-unused-components": ["error", {
-    "ignoreWhenBindingPresent": true
-  }]
-}
+**Here is the another example about config option `threshold`**
+```js
+{'vue/no-potential-component-option-typo': ['error', {presets: ['vue', 'nuxt'], threshold: 5}]}
 ```
 
-- `ignoreWhenBindingPresent` ... suppresses all errors if binding has been detected in the template
-    default `true`
-
-### `ignoreWhenBindingPresent: false`
-
-<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+<eslint-code-block :rules="{'vue/no-potential-component-option-typo': ['error', {presets: ['vue', 'nuxt'], threshold: 5}]}">
 
 ```vue
-<!-- ✓ GOOD -->
-<template>
-  <div>
-    <h2>Lorem ipsum</h2>
-    <TheButton v-if="" />
-    <TheSelect v-else-if="" />
-    <TheInput v-else="" />
-  </div>
-</template>
-
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheSelect from 'components/TheSelect.vue'
-  import TheInput from 'components/TheInput.vue'
-
-  export default {
-    components: {
-      TheButton,
-      TheSelect,
-      TheInput,
-    },
+export default {
+  /* ✓ BAD, due to threshold is 5 */
+  props: {
+    
+  },
+  /* ✓ BAD, due to threshold is 5 */
+  method: {
+
+  },
+  /* ✓ BAD, due to threshold is 5 */
+  data: {
+    
+  },
+  /* × GOOD, due to we don't choose vue-router preset or add a custom option */
+  beforeRouteEnteR() {
+
   }
+}
 </script>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
-
-```vue
-<!-- ✗ BAD -->
-<template>
-  <div>
-    <h2>Lorem ipsum</h2>
-    <component :is="computedComponent" />
-  </div>
-</template>
-
-<script>
-  import TheButton from 'components/TheButton.vue'
-  import TheSelect from 'components/TheSelect.vue'
-  import TheInput from 'components/TheInput.vue'
-
-  export default {
-    components: {
-      TheButton, // <- not used
-      TheSelect, // <- not used
-      TheInput, // <- not used
-    },
-    computed: {
-      computedComponent() {
+## :wrench: Options
+```js
+{
+    "vue/no-unsed-vars": [{
+      presets: {
+        type: 'array',
+        items: {
+          type: 'string',
+          enum: ['all', 'vue', 'vue-router', 'nuxt']
+        },
+        uniqueItems: true,
+        minItems: 0
+      },
+      custom: {
+        type: 'array',
+        minItems: 0,
+        items: { type: 'string' },
+        uniqueItems: true
+      },
+      threshold: {
+        type: 'number',
+        'minimum': 1
       }
-    }
-  }
-</script>
+    }]
+}
 ```
-
-</eslint-code-block>
-
+- `presets` ... `enum type`, contains several common vue component option set, `['all']` is the same as `['vue', 'vue-router', 'nuxt']`. **default** `[]`
+- `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`
+## :rocket: Suggestion
+- We provide all the possible component option that editdistance between your vue component option and configuration options is greater than 0 and lessEqual than threshold
+
+## :books: Further reading
+- [Edit_distance](https://en.wikipedia.org/wiki/Edit_distance)
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-component-option-typo.js)

From e15f41df02029088295b916a98c1c919604168db Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 7 Apr 2020 18:05:34 +0800
Subject: [PATCH 14/21] feat: set categories to undefined

---
 docs/rules/README.md                             | 2 +-
 docs/rules/no-potential-component-option-typo.md | 2 --
 lib/configs/essential.js                         | 1 -
 lib/rules/no-potential-component-option-typo.js  | 2 +-
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 9344aaf8c..45fad1ea6 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -151,7 +151,6 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
@@ -270,6 +269,7 @@ For example:
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace |  |
+| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax |  |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
diff --git a/docs/rules/no-potential-component-option-typo.md b/docs/rules/no-potential-component-option-typo.md
index 23ce77897..91256a7d0 100644
--- a/docs/rules/no-potential-component-option-typo.md
+++ b/docs/rules/no-potential-component-option-typo.md
@@ -7,8 +7,6 @@ description: disallow a potential typo in your component property
 # vue/no-potential-component-option-typo
 > disallow a potential typo in your component property
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-
 ## :book: Rule Details
 
 This Rule disallow a potential typo in your component options
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index cc6ac6bf7..21335f197 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -12,7 +12,6 @@ module.exports = {
     'vue/no-duplicate-attributes': 'error',
     'vue/no-multiple-template-root': 'error',
     'vue/no-parsing-error': 'error',
-    'vue/no-potential-component-option-typo': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
diff --git a/lib/rules/no-potential-component-option-typo.js b/lib/rules/no-potential-component-option-typo.js
index cc9aff67d..a3670e013 100644
--- a/lib/rules/no-potential-component-option-typo.js
+++ b/lib/rules/no-potential-component-option-typo.js
@@ -15,7 +15,7 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'disallow a potential typo in your component property',
-      categories: ['essential'],
+      categories: undefined,
       recommended: false,
       url: 'https://eslint.vuejs.org/rules/no-potential-component-option-typo.html'
     },

From a2f00576a1870faa521b952d8099c765f79fe01e Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 7 Apr 2020 19:34:02 +0800
Subject: [PATCH 15/21] test: add test case

---
 .../no-potential-component-option-typo.js     | 119 ++++++++++++++----
 1 file changed, 92 insertions(+), 27 deletions(-)

diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index 1c7e9aea3..e27282be7 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -41,7 +41,7 @@ tester.run('no-potential-component-option-typo', rule, {
       export default {
       }
       </script>
-      `.trim(),
+      `,
       options: [{ presets: ['vue'] }]
     },
     // test if give preset and the potentialTypoList length is zero, just for 100% test cover
@@ -54,10 +54,23 @@ tester.run('no-potential-component-option-typo', rule, {
         data() {}
       }
       </script>
-      `.trim(),
+      `,
       options: [{ presets: ['vue'] }]
+    },
+    // multi preset that won't report
+    {
+
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data() {},
+        beforeRouteEnter() {}
+      }
+      </script>
+      `,
+      options: [{ presets: ['vue', 'vue-router'] }]
     }
-    // give me some code that won't trigger a warning
   ],
   invalid: [
     {
@@ -68,8 +81,7 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         method: {}
       }
-      </script>
-      `.trim(),
+      </script>`,
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
@@ -82,8 +94,7 @@ tester.run('no-potential-component-option-typo', rule, {
         data: {},
         method: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         },
@@ -98,8 +109,7 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         methods: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         }
@@ -115,8 +125,7 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         method: {}
       }
-      </script>
-      `.trim(),
+      </script>`,
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
@@ -129,8 +138,7 @@ tester.run('no-potential-component-option-typo', rule, {
         data: {},
         method: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         },
@@ -145,8 +153,7 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         methods: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         }
@@ -163,8 +170,7 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         method: {}
       }
-      </script>
-      `.trim(),
+      </script>`,
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
@@ -177,8 +183,7 @@ tester.run('no-potential-component-option-typo', rule, {
         data: {},
         method: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         },
@@ -193,14 +198,76 @@ tester.run('no-potential-component-option-typo', rule, {
         dat: {},
         methods: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         }
       ],
       options: [{ presets: ['vue'] }]
     },
+    // multi preset report typo
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        dat: {},
+        beforeRouteEntr,
+        method: {}
+      }
+      </script>`,
+      errors: [
+        {
+          message: "'dat' may be a typo, which is similar to option [data].",
+          suggestions: [
+            {
+              desc: `Replace property 'dat' to 'data'`,
+              output: `
+      <script>
+      export default {
+        data: {},
+        beforeRouteEntr,
+        method: {}
+      }
+      </script>`
+            }
+          ]
+        },
+        {
+          message: "'beforeRouteEntr' may be a typo, which is similar to option [beforeRouteEnter].",
+          suggestions: [
+            {
+              desc: `Replace property 'beforeRouteEntr' to 'beforeRouteEnter'`,
+              output: `
+      <script>
+      export default {
+        dat: {},
+        beforeRouteEnter,
+        method: {}
+      }
+      </script>`
+            }
+          ]
+        },
+        {
+          message: `'method' may be a typo, which is similar to option [methods].`,
+          suggestions: [
+            {
+              desc: `Replace property 'method' to 'methods'`,
+              output: `
+      <script>
+      export default {
+        dat: {},
+        beforeRouteEntr,
+        methods: {}
+      }
+      </script>`
+            }
+          ]
+        }
+      ],
+      options: [{ presets: ['vue', 'vue-router'] }]
+    },
     // test multi suggestion
     {
 
@@ -210,8 +277,7 @@ tester.run('no-potential-component-option-typo', rule, {
       export default {
         method: {}
       }
-      </script>
-      `.trim(),
+      </script>`,
       errors: [
         {
           message: `'method' may be a typo, which is similar to option [methods,data].`,
@@ -223,8 +289,7 @@ tester.run('no-potential-component-option-typo', rule, {
       export default {
         methods: {}
       }
-      </script>
-              `.trim()
+      </script>`
             },
             {
               desc: `Replace property 'method' to 'data'`,
@@ -233,13 +298,13 @@ tester.run('no-potential-component-option-typo', rule, {
       export default {
         data: {}
       }
-      </script>
-              `.trim()
+      </script>`
             }
           ]
         }
       ],
       options: [{ custom: ['data', 'methods'], threshold: 10 }]
     }
+
   ]
 })

From d0756407865c6d2669da7fe6ccd061cc3b6cdf67 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 7 Apr 2020 19:42:17 +0800
Subject: [PATCH 16/21] test: add test case

---
 .../no-potential-component-option-typo.js     |  2 +-
 .../no-potential-component-option-typo.js     | 41 +++++++++++++++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/lib/rules/no-potential-component-option-typo.js b/lib/rules/no-potential-component-option-typo.js
index a3670e013..b09052257 100644
--- a/lib/rules/no-potential-component-option-typo.js
+++ b/lib/rules/no-potential-component-option-typo.js
@@ -63,7 +63,7 @@ module.exports = {
         return [...pre, ...vueComponentOptions[cur]]
       }, [])
     }
-    candidateOptions = [...new Set(candidateOptions.concat(custom))]
+    candidateOptions = [...new Set([...candidateOptions, ...custom])]
     if (!candidateOptions.length) {
       return {}
     }
diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index e27282be7..ac7b2829d 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -70,6 +70,19 @@ tester.run('no-potential-component-option-typo', rule, {
       </script>
       `,
       options: [{ presets: ['vue', 'vue-router'] }]
+    },
+    //  test custom option that is not available in the presets
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        custom: {},
+        foo: {}
+      }
+      </script>
+      `,
+      options: [{ custom: ['custom', 'foo'] }]
     }
   ],
   invalid: [
@@ -117,13 +130,15 @@ tester.run('no-potential-component-option-typo', rule, {
       options: [{ custom: ['data', 'methods'] }]
     },
     // test if user define custom rule is duplicate with presets
+    //  test custom option that is not available in the presets
     {
       filename: 'test.vue',
       code: `
       <script>
       export default {
         dat: {},
-        method: {}
+        method: {},
+        custo: {}
       }
       </script>`,
       errors: [
@@ -136,7 +151,8 @@ tester.run('no-potential-component-option-typo', rule, {
       <script>
       export default {
         data: {},
-        method: {}
+        method: {},
+        custo: {}
       }
       </script>`
             }
@@ -151,14 +167,31 @@ tester.run('no-potential-component-option-typo', rule, {
       <script>
       export default {
         dat: {},
-        methods: {}
+        methods: {},
+        custo: {}
+      }
+      </script>`
+            }
+          ]
+        },
+        {
+          message: `'custo' may be a typo, which is similar to option [custom].`,
+          suggestions: [
+            {
+              desc: `Replace property 'custo' to 'custom'`,
+              output: `
+      <script>
+      export default {
+        dat: {},
+        method: {},
+        custom: {}
       }
       </script>`
             }
           ]
         }
       ],
-      options: [{ custom: ['data', 'methods'], presets: ['all'] }]
+      options: [{ custom: ['data', 'methods', 'custom', 'foo'], presets: ['all'] }]
     },
     // test if report correctly, only have preset option
     {

From 6c95217100d25fdb6ea87220179b1aea76acd5e6 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Tue, 7 Apr 2020 20:05:48 +0800
Subject: [PATCH 17/21] test: add vue preset as default preset, abcde and abcd
 test case

---
 lib/rules/no-potential-component-option-typo.js | 16 ++++++++++------
 .../rules/no-potential-component-option-typo.js | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/lib/rules/no-potential-component-option-typo.js b/lib/rules/no-potential-component-option-typo.js
index b09052257..13d18f57e 100644
--- a/lib/rules/no-potential-component-option-typo.js
+++ b/lib/rules/no-potential-component-option-typo.js
@@ -51,9 +51,9 @@ module.exports = {
   create: function (context) {
     const option = context.options[0] || {}
     const custom = option['custom'] || []
-    const presets = option['presets'] || []
+    const presets = option['presets'] || ['vue']
     const threshold = option['threshold'] || 1
-    let candidateOptions = []
+    let candidateOptions
     if (presets.includes('all')) {
       candidateOptions = Object.keys(vueComponentOptions).reduce((pre, cur) => {
         return [...pre, ...vueComponentOptions[cur]]
@@ -63,8 +63,9 @@ module.exports = {
         return [...pre, ...vueComponentOptions[cur]]
       }, [])
     }
-    candidateOptions = [...new Set([...candidateOptions, ...custom])]
-    if (!candidateOptions.length) {
+    const candidateOptionSet = new Set([...candidateOptions, ...custom])
+    const candidateOptionList = [...candidateOptionSet]
+    if (!candidateOptionList.length) {
       return {}
     }
     return utils.executeOnVue(context, obj => {
@@ -77,9 +78,12 @@ module.exports = {
       componentInstanceOptions.forEach(option => {
         const id = option.key
         const name = id.name
-        const potentialTypoList = candidateOptions
+        if (candidateOptionSet.has(name)) {
+          return
+        }
+        const potentialTypoList = candidateOptionList
           .map(o => ({ option: o, distance: utils.editDistance(o, name) }))
-          .filter(({ distance }) => distance <= threshold && distance > 0)
+          .filter(({ distance, option }) => distance <= threshold && distance > 0)
           .sort((a, b) => a.distance - b.distance)
         if (potentialTypoList.length) {
           context.report({
diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index ac7b2829d..dc8800f02 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -31,7 +31,8 @@ tester.run('no-potential-component-option-typo', rule, {
         method: {}
       }
       </script>
-      `
+      `,
+      options: [{ presets: [] }]
     },
     {
 
@@ -83,6 +84,18 @@ tester.run('no-potential-component-option-typo', rule, {
       </script>
       `,
       options: [{ custom: ['custom', 'foo'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        abcde: {},
+        abcd: {}
+      }
+      </script>
+      `,
+      options: [{ custom: ['abcde', 'abcd'] }]
     }
   ],
   invalid: [
@@ -336,7 +349,7 @@ tester.run('no-potential-component-option-typo', rule, {
           ]
         }
       ],
-      options: [{ custom: ['data', 'methods'], threshold: 10 }]
+      options: [{ custom: ['data', 'methods'], threshold: 10, presets: [] }]
     }
 
   ]

From 126ba01fae18dcdfc0f23931eac78a05b70c36d4 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Wed, 8 Apr 2020 19:43:29 +0800
Subject: [PATCH 18/21] test: udpate test

---
 .../no-potential-component-option-typo.js     | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index dc8800f02..28ecd0c70 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -32,6 +32,7 @@ tester.run('no-potential-component-option-typo', rule, {
       }
       </script>
       `,
+      // because vue preset is include by default, set the presets to empty
       options: [{ presets: [] }]
     },
     {
@@ -96,6 +97,19 @@ tester.run('no-potential-component-option-typo', rule, {
       </script>
       `,
       options: [{ custom: ['abcde', 'abcd'] }]
+    },
+    // valid test case set custom and threshold
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        custom: {},
+        fooooo: {}
+      }
+      </script>
+      `,
+      options: [{ custom: ['custom', 'foo'], threshold: 2 }]
     }
   ],
   invalid: [
@@ -111,6 +125,8 @@ tester.run('no-potential-component-option-typo', rule, {
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
+          line: 4,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -126,6 +142,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: `'method' may be a typo, which is similar to option [methods].`,
+          line: 5,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -157,6 +175,8 @@ tester.run('no-potential-component-option-typo', rule, {
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
+          line: 4,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -173,6 +193,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: `'method' may be a typo, which is similar to option [methods].`,
+          line: 5,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -189,6 +211,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: `'custo' may be a typo, which is similar to option [custom].`,
+          line: 6,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'custo' to 'custom'`,
@@ -220,6 +244,8 @@ tester.run('no-potential-component-option-typo', rule, {
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
+          line: 4,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -235,6 +261,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: `'method' may be a typo, which is similar to option [methods].`,
+          line: 5,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -265,6 +293,8 @@ tester.run('no-potential-component-option-typo', rule, {
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
+          line: 4,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -281,6 +311,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: "'beforeRouteEntr' may be a typo, which is similar to option [beforeRouteEnter].",
+          line: 5,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'beforeRouteEntr' to 'beforeRouteEnter'`,
@@ -297,6 +329,8 @@ tester.run('no-potential-component-option-typo', rule, {
         },
         {
           message: `'method' may be a typo, which is similar to option [methods].`,
+          line: 6,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -327,6 +361,8 @@ tester.run('no-potential-component-option-typo', rule, {
       errors: [
         {
           message: `'method' may be a typo, which is similar to option [methods,data].`,
+          line: 4,
+          column: 9,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,

From aa38664f72851bcebfb412bbce0d823bb08f99fb Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Fri, 15 May 2020 16:28:35 +0800
Subject: [PATCH 19/21] test: all valid options

---
 .../index.vue                                 | 55 +++++++++++++++++++
 .../no-potential-component-option-typo.js     | 29 +++++++---
 2 files changed, 76 insertions(+), 8 deletions(-)
 create mode 100644 tests/fixtures/no-potential-component-option-typo/index.vue

diff --git a/tests/fixtures/no-potential-component-option-typo/index.vue b/tests/fixtures/no-potential-component-option-typo/index.vue
new file mode 100644
index 000000000..ad54a211e
--- /dev/null
+++ b/tests/fixtures/no-potential-component-option-typo/index.vue
@@ -0,0 +1,55 @@
+<script>
+export default {
+  asyncData: {},
+  fetch: {},
+  head: {},
+  key: {},
+  layout: {},
+  loading: {},
+  middleware: {},
+  scrollToTop: {},
+  transition: {},
+  validate: {},
+  watchQuery: {},
+  beforeRouteEnter: {},
+  beforeRouteUpdate: {},
+  beforeRouteLeave: {},
+  data() {},
+  props: {},
+  propsData: {},
+  computed: {},
+  methods: {},
+  watch: {},
+  el: {},
+  template: {},
+  render() {},
+  renderError() {},
+  staticRenderFns: {},
+  beforeCreate: {},
+  created: {},
+  beforeDestroy: {},
+  destroyed: {},
+  beforeMount: {},
+  mounted: {},
+  beforeUpdate: {},
+  updated: {},
+  activated: {},
+  deactivated: {},
+  errorCaptured: {},
+  serverPrefetch: {},
+  directives: {},
+  components: {},
+  transitions: {},
+  filters: {},
+  provide: {},
+  inject: {},
+  model: {},
+  parent: {},
+  mixins: {},
+  name: {},
+  extends: {},
+  delimiters: {},
+  comments: {},
+  inheritAttrs: {},
+};
+</script>
diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index 28ecd0c70..d7bc03c89 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -20,6 +20,17 @@ const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
 })
+const path = require('path')
+const fs = require('fs')
+const VueComponentJsonCheckVuePath = path.resolve(
+  __dirname,
+  '../../fixtures/no-potential-component-option-typo/index.vue'
+)
+const VueComponentJsonCheckVue = fs.readFileSync(
+  VueComponentJsonCheckVuePath,
+  'utf8'
+)
+
 tester.run('no-potential-component-option-typo', rule, {
   valid: [
     {
@@ -36,7 +47,6 @@ tester.run('no-potential-component-option-typo', rule, {
       options: [{ presets: [] }]
     },
     {
-
       filename: 'test.vue',
       code: `
       <script>
@@ -48,7 +58,6 @@ tester.run('no-potential-component-option-typo', rule, {
     },
     // test if give preset and the potentialTypoList length is zero, just for 100% test cover
     {
-
       filename: 'test.vue',
       code: `
       <script>
@@ -61,7 +70,6 @@ tester.run('no-potential-component-option-typo', rule, {
     },
     // multi preset that won't report
     {
-
       filename: 'test.vue',
       code: `
       <script>
@@ -110,6 +118,11 @@ tester.run('no-potential-component-option-typo', rule, {
       </script>
       `,
       options: [{ custom: ['custom', 'foo'], threshold: 2 }]
+    },
+    {
+      filename: 'test.vue',
+      code: VueComponentJsonCheckVue,
+      options: [{ presets: ['all'] }]
     }
   ],
   invalid: [
@@ -228,11 +241,12 @@ tester.run('no-potential-component-option-typo', rule, {
           ]
         }
       ],
-      options: [{ custom: ['data', 'methods', 'custom', 'foo'], presets: ['all'] }]
+      options: [
+        { custom: ['data', 'methods', 'custom', 'foo'], presets: ['all'] }
+      ]
     },
     // test if report correctly, only have preset option
     {
-
       filename: 'test.vue',
       code: `
       <script>
@@ -310,7 +324,8 @@ tester.run('no-potential-component-option-typo', rule, {
           ]
         },
         {
-          message: "'beforeRouteEntr' may be a typo, which is similar to option [beforeRouteEnter].",
+          message:
+            "'beforeRouteEntr' may be a typo, which is similar to option [beforeRouteEnter].",
           line: 5,
           column: 9,
           suggestions: [
@@ -350,7 +365,6 @@ tester.run('no-potential-component-option-typo', rule, {
     },
     // test multi suggestion
     {
-
       filename: 'test.vue',
       code: `
       <script>
@@ -387,6 +401,5 @@ tester.run('no-potential-component-option-typo', rule, {
       ],
       options: [{ custom: ['data', 'methods'], threshold: 10, presets: [] }]
     }
-
   ]
 })

From c5f2ac78d0f11d862c00ca805e03cd45b8b2cf05 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Fri, 15 May 2020 16:29:27 +0800
Subject: [PATCH 20/21] improvement: comment

---
 tests/lib/rules/no-potential-component-option-typo.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index d7bc03c89..4c4c41c9d 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -119,6 +119,7 @@ tester.run('no-potential-component-option-typo', rule, {
       `,
       options: [{ custom: ['custom', 'foo'], threshold: 2 }]
     },
+    // test all valid vue options
     {
       filename: 'test.vue',
       code: VueComponentJsonCheckVue,

From 324e3e5be0933c7324e52cd03a24069b94f586f4 Mon Sep 17 00:00:00 2001
From: IWANABETHATGUY <974153916@qq.com>
Date: Mon, 18 May 2020 10:33:57 +0800
Subject: [PATCH 21/21] test: inline test

---
 .../index.vue                                 | 55 ---------------
 .../no-potential-component-option-typo.js     | 68 ++++++++++++++++---
 2 files changed, 57 insertions(+), 66 deletions(-)
 delete mode 100644 tests/fixtures/no-potential-component-option-typo/index.vue

diff --git a/tests/fixtures/no-potential-component-option-typo/index.vue b/tests/fixtures/no-potential-component-option-typo/index.vue
deleted file mode 100644
index ad54a211e..000000000
--- a/tests/fixtures/no-potential-component-option-typo/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-export default {
-  asyncData: {},
-  fetch: {},
-  head: {},
-  key: {},
-  layout: {},
-  loading: {},
-  middleware: {},
-  scrollToTop: {},
-  transition: {},
-  validate: {},
-  watchQuery: {},
-  beforeRouteEnter: {},
-  beforeRouteUpdate: {},
-  beforeRouteLeave: {},
-  data() {},
-  props: {},
-  propsData: {},
-  computed: {},
-  methods: {},
-  watch: {},
-  el: {},
-  template: {},
-  render() {},
-  renderError() {},
-  staticRenderFns: {},
-  beforeCreate: {},
-  created: {},
-  beforeDestroy: {},
-  destroyed: {},
-  beforeMount: {},
-  mounted: {},
-  beforeUpdate: {},
-  updated: {},
-  activated: {},
-  deactivated: {},
-  errorCaptured: {},
-  serverPrefetch: {},
-  directives: {},
-  components: {},
-  transitions: {},
-  filters: {},
-  provide: {},
-  inject: {},
-  model: {},
-  parent: {},
-  mixins: {},
-  name: {},
-  extends: {},
-  delimiters: {},
-  comments: {},
-  inheritAttrs: {},
-};
-</script>
diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index 4c4c41c9d..12f8ed04e 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -20,16 +20,6 @@ const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
 })
-const path = require('path')
-const fs = require('fs')
-const VueComponentJsonCheckVuePath = path.resolve(
-  __dirname,
-  '../../fixtures/no-potential-component-option-typo/index.vue'
-)
-const VueComponentJsonCheckVue = fs.readFileSync(
-  VueComponentJsonCheckVuePath,
-  'utf8'
-)
 
 tester.run('no-potential-component-option-typo', rule, {
   valid: [
@@ -122,7 +112,63 @@ tester.run('no-potential-component-option-typo', rule, {
     // test all valid vue options
     {
       filename: 'test.vue',
-      code: VueComponentJsonCheckVue,
+      code: `
+      <script>
+      export default {
+        asyncData: {},
+        fetch: {},
+        head: {},
+        key: {},
+        layout: {},
+        loading: {},
+        middleware: {},
+        scrollToTop: {},
+        transition: {},
+        validate: {},
+        watchQuery: {},
+        beforeRouteEnter: {},
+        beforeRouteUpdate: {},
+        beforeRouteLeave: {},
+        data() {},
+        props: {},
+        propsData: {},
+        computed: {},
+        methods: {},
+        watch: {},
+        el: {},
+        template: {},
+        render() {},
+        renderError() {},
+        staticRenderFns: {},
+        beforeCreate: {},
+        created: {},
+        beforeDestroy: {},
+        destroyed: {},
+        beforeMount: {},
+        mounted: {},
+        beforeUpdate: {},
+        updated: {},
+        activated: {},
+        deactivated: {},
+        errorCaptured: {},
+        serverPrefetch: {},
+        directives: {},
+        components: {},
+        transitions: {},
+        filters: {},
+        provide: {},
+        inject: {},
+        model: {},
+        parent: {},
+        mixins: {},
+        name: {},
+        extends: {},
+        delimiters: {},
+        comments: {},
+        inheritAttrs: {},
+      }; 
+      </script>
+      `,
       options: [{ presets: ['all'] }]
     }
   ],