vue/no-unused-properties
disallow unused properties
📖 Rule Details
This rule is aimed at eliminating unused properties.
Note
This rule cannot check for use of properties by other components (e.g. mixins, property access via $refs) and use in places where the scope cannot be determined. Some access to properties might be implied, for example accessing data or computed via a variable such as this[varName]. In this case, the default is to assume all properties, methods, etc. are 'used'. See the unreferencedOptions for a more strict interpretation of 'use' in these cases.
<!-- ✓ GOOD -->
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
<!-- ✗ BAD (`count` property not used) -->
<template>
<div>{{ cnt }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
🔧 Options
json
{
"vue/no-unused-properties": ["error", {
"groups": ["props"],
"deepData": false,
"ignorePublicMembers": false,
"unreferencedOptions": []
}]
}groups(string[]) Array of groups to search for properties. Default is["props"]. The value of the array is some of the following strings:"props""data""computed""methods""setup"
deepData(boolean) Iftrue, the object of the property defined indatawill be searched deeply. Default isfalse. Include"data"ingroupsto use this option.ignorePublicMembers(boolean) Iftrue, members marked with a JSDoc/** @public */tag will be ignored. Default isfalse.unreferencedOptions(string[]) Array of access methods that should be interpreted as leaving properties unreferenced. Currently, two such methods are available:unknownMemberAsUnreferenced, andreturnAsUnreferenced. See examples below.
"groups": ["props", "data"]
<!-- ✓ GOOD -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.count = 2
}
}
</script>
<!-- ✗ BAD (`count` data not used) -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.cnt = 2
}
}
</script>
{ "groups": ["props", "data"], "deepData": true }
<template>
<Foo :param="state.used">
</template>
<script>
export default {
data() {
return {
state: {
/* ✓ GOOD */
used: null,
/* ✗ BAD (`state.unused` data not used) */
unused: null
}
}
}
}
</script>
"groups": ["props", "computed"]
<!-- ✓ GOOD -->
<template>
<p>{{ reversedMessage }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
<!-- ✗ BAD (`reversedMessage` computed property not used) -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
{ "groups": ["props", "methods"], "ignorePublicMembers": true }
<!-- ✓ GOOD -->
<template>
<button @click="usedInTemplate()" />
</template>
<script>
export default {
methods: {
/* ✓ GOOD */
usedInTemplate() {},
/* ✓ GOOD */
/** @public */
publicMethod() {},
/* ✗ BAD */
unusedMethod() {}
}
}
</script>
{ "groups": ["computed"], "unreferencedOptions": ["unknownMemberAsUnreferenced"] }
<template></template>
<script>
export default {
computed: {
one() {
return 1
},
two() {
return 2
}
},
methods: {
handler() {
/* ✓ GOOD - explicit access to computed */
const a = this.one
const i = 'two'
/* ✗ BAD - unknown access via a variable, two will be reported as unreferenced */
return this[i]
},
}
}
</script>
{ "groups": ["computed"], "unreferencedOptions": ["returnAsUnreferenced"] }
<template></template>
<script>
export default {
computed: {
one() {
return 1
},
two() {
return 2
}
},
methods: {
handler() {
/* ✓ GOOD - explicit access to computed */
const a = this.one
/* ✗ BAD - any property could be accessed by returning `this`, but two will still be reported as unreferenced */
return this
},
}
}
</script>
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0