Eslint-plugin-vue: vue/no-unused-vars needs configuration options similar to eslint/no-unused-vars

Created on 19 Dec 2017  路  8Comments  路  Source: vuejs/eslint-plugin-vue

Tell us about your environment

  • ESLint Version: v4.13.1
  • eslint-plugin-vue Version: eslint-plugin-vue@^4.0.0-beta.2
  • Node Version: v8.4.0

Please show your full configuration:

{
    "env": {
        "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1
            }
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double",
            {
                "avoidEscape": true,
                "allowTemplateLiterals": true
            }
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-console": [
            "off"
        ],
        "no-unused-vars": [
            "error",
            {
                "args": "after-used",
                "argsIgnorePattern": "^_"
            }
        ],
        "vue/html-self-closing": "off",
        "vue/html-indent": [
            "error", 
            4
        ],
        "vue/max-attributes-per-line": "off",
        "vue/order-in-components": "off"
    }
}

What did you do? Please include the actual source code causing the issue.

<template>
<div id="app">
      <div v-for="(thing, key, index) in things" :key="thing.id" :class="{ 'every-other': index % 2 === 0 }">
        {{ thing.id }} - {{ index }}
      </div>
</div>
</template>
<style>
.every-other {
  background-color: red;
}

div {
  width: 100px;
}
</style>
<script>
new Vue({
  el: '#app',
  data: () => ({
    things:  {
      thing1: { id: "thing 1" },
      thing2: { id: "thing 2" },
      thing3: { id: "thing 3" },
      thing4: { id: "thing 4" },
      thing5: { id: "thing 5" },
      thing6: { id: "thing 6" }
    }
  })
})
</script>

What did you expect to happen?
v-for supports optional 2nd and 3rd params, and it's not unexpected that the 2nd param would be unused. eslint/no-unused-vars allows for configurations that take this into account, such as in my config:

        "no-unused-vars": [
            "error",
            {
                "args": "after-used",
                "argsIgnorePattern": "^_"
            }
        ],

What actually happened? Please include the actual, raw output from ESLint.
The 'key' variable is unused and therefore causes an error.
[eslint-plugin-vue] [vue/no-unused-vars] 'key' is defined but never used.

accepted proposition enhancement work in progress

Most helpful comment

When I work with Element UI, they have template with scope that I never use, but Element will not work without it. So I need options to put at least, scope variable name into exception.

<template slot="header" slot-scope="scope">
    Custom header, never touches the scope.
</template>

All 8 comments

Hey @Phlow2001. Thanks for posting this proposition. I very much agree with you, it's a valid point. Though I think that for the sake of Vue DSL it should be enough if we only implement "after-used" and make this a default behaviour of this rule. So we would simply ignore all properties but last. What do you think?

I think that's reasonable. If someone has a valid need for more they can submit an issue at that point.

Cool, then I'm going to work on this now :)

When I work with Element UI, they have template with scope that I never use, but Element will not work without it. So I need options to put at least, scope variable name into exception.

<template slot="header" slot-scope="scope">
    Custom header, never touches the scope.
</template>

I agree with @sangdth -- running into this same issue with slot-scope.

@sangdth , @rachel-flux
I got the same issue with slot-scope

Now i disabled this rule with using {} instead scope
<template slot="HEAD_Status" slot-scope="{}"> </template>

"no-unused-vars": [ "error", { "args": "after-used", "argsIgnorePattern": "^_" } ],
but Currently, only "off", "warn", "error" are supported,can't support RegExp. Or I didn't use it correctly

Hi.

We plan to add option to vue/no-unused-vars rule.

https://github.com/vuejs/eslint-plugin-vue/pull/1070/files#diff-771e0befcf053e5a67a7c1c6ca67956e

Was this page helpful?
0 / 5 - 0 ratings

Related issues

deangoku picture deangoku  路  4Comments

lichnow picture lichnow  路  3Comments

filipalacerda picture filipalacerda  路  4Comments

gluons picture gluons  路  4Comments

casprwang picture casprwang  路  4Comments