Tell us about your environment
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.
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
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,
scopevariable name into exception.