feat: add fixable, no more error when unused variable with prefix _ (#…

…1070)

* feat: add fixable, no more error when unused variable with prefix _

implement proposal #1058

feat #1058

* fix: make fix optional,add varIgnorePattern

* feat: change varIgnorepattern to ignorePattern, add test, update readme

* docs: update doc

docs/rules/no-unused-vars.md

@@ -33,8 +33,16 @@ This rule report variable definitions of v-for directives or scope attributes if
 
 ## :wrench: Options
 
-Nothing.
-
+```js
+{
+    "vue/no-unsed-vars": [{
+        "ignorePattern": '^_',
+    }]
+}
+```
+- `ignorePattern` ... disables reporting when your definitions of v-for directives or scope attributes match your ignorePattern Regular expression. default `null`, will ignore nothing
+## :rocket: Suggestion
+- When your ignorePattern set to `^_`, we could provide a suggestion which add a prefix`_` to your variable and no more eslint error
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-vars.js)

lib/rules/no-unused-vars.js

@@ -19,25 +19,50 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-unused-vars.html'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        'type': 'object',
+        'properties': {
+          'ignorePattern': {
+            'type': 'string'
+          }
+        },
+        'additionalProperties': false
+      }
+    ]
   },
 
   create (context) {
+    const option = context.options[0] || { }
+    const pattern = option['ignorePattern']
+    let regExp = null
+    if (pattern) {
+      regExp = new RegExp(pattern, 'u')
+    }
     return utils.defineTemplateBodyVisitor(context, {
       VElement (node) {
         const variables = node.variables
 
         for (
           let i = variables.length - 1;
-          i >= 0 && !variables[i].references.length;
+          // eslint-disable-next-line no-unmodified-loop-condition
+          i >= 0 && !variables[i].references.length && (regExp === null || !regExp.test(variables[i].id.name));
           i--
         ) {
           const variable = variables[i]
           context.report({
             node: variable.id,
             loc: variable.id.loc,
             message: `'{{name}}' is defined but never used.`,
-            data: variable.id
+            data: variable.id,
+            suggest: pattern === '^_' ? [
+              {
+                desc: `Replace the ${variable.id.name} with _${variable.id.name}`,
+                fix: function (fixer) {
+                  return fixer.replaceText(variable.id, `_${variable.id.name}`)
+                }
+              }
+            ] : []
           })
         }
       }

tests/lib/rules/no-unused-vars.js

@@ -52,6 +52,18 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template><div v-for="x in foo" :[x]></div></template>'
+    },
+    {
+      code: '<template><div v-for="_ in foo" ></div></template>',
+      options: [{ ignorePattern: '^_' }]
+    },
+    {
+      code: '<template><div v-for="ignorei in foo" ></div></template>',
+      options: [{ ignorePattern: '^ignore' }]
+    },
+    {
+      code: '<template><div v-for="thisisignore in foo" ></div></template>',
+      options: [{ ignorePattern: 'ignore$' }]
     }
   ],
   invalid: [
@@ -82,6 +94,7 @@ tester.run('no-unused-vars', rule, {
     {
       code: '<template><div v-for="(a, b, c) in foo"></div></template>',
       errors: ["'a' is defined but never used.", "'b' is defined but never used.", "'c' is defined but never used."]
+
     },
     {
       code: '<template><div v-for="(a, b, c) in foo">{{a}}</div></template>',
@@ -97,7 +110,33 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template><div v-for="x in items">{{value | x}}</div></template>',
+      errors: [{
+        message: "'x' is defined but never used.",
+        suggestions: [{
+          desc: 'Replace the x with _x',
+          output: '<template><div v-for="_x in items">{{value | x}}</div></template>'
+        }]
+      }],
+      options: [{ ignorePattern: '^_' }]
+    },
+    {
+      code: '<template><div v-for="x in items">{{value}}</div></template>',
+      options: [{ ignorePattern: 'ignore$' }],
       errors: ["'x' is defined but never used."]
+    },
+    {
+      code: '<template><span slot-scope="props"></span></template>',
+      errors: ["'props' is defined but never used."],
+      options: [{ ignorePattern: '^ignore' }]
+    },
+    {
+      code: '<template><span><template scope="props"></template></span></template>',
+      errors: ["'props' is defined but never used."],
+      options: [{ ignorePattern: '^ignore' }]
+    },
+    {
+      code: '<template><div v-for="_i in foo" ></div></template>',
+      errors: ["'_i' is defined but never used."]
     }
   ]
 })