Simple Computed Properties
Checks if any computed properties are bigger than 5 lines.
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-computed-properties
❓ Why it's good to follow this rule?
- Simple Responsibility: Shorter computed properties have a single responsibility and can be really focused.
- Readability: Shorter computed properties are easier to read and understand.
- Maintainability: Shorter computed properties are easier to maintain and refactor.
- Performance: Shorter computed properties are faster to compute.
- Consistency: Shorter computed properties are consistent with the naming of files and folders.
- Debugging: Shorter computed properties are easier to debug.
- Testing: Shorter computed properties are easier to test.
😱 Examples of code for which this rule will throw a warning
WARNING
The following code contains computed properties that are too large, making them harder to read and maintain.
vue
<!-- Incorrect: Computed property exceeds 5 lines -->
<script setup>
const total = computed(() => {
let total = 0
for (let i = 0; i < items.value.length; i++) {
total += items.value[i].price
}
for (let i = 0; i < items.value.length; i++) {
total += items.value[i].price
}
for (let i = 0; i < items.value.length; i++) {
total += items.value[i].price
}
return total
})
</script>
🤩 How to fix it?
TIP
Refactor large computed properties into smaller, more manageable ones. This improves readability and maintainability.
vue
<!-- Correct: Computed properties are simplified and concise -->
<script setup>
const total = computed(() => {
return items.value.reduce((sum, item) => sum + item.price, 0)
})
const isWeekend = computed(() => today.getDay() === 0 || today.getDay() === 6)
</script>
🛠 How to override?
The default max computed length for this rule is 5.
You can override through the new override
option in .config/vue-mess-detector.json
⬇️
json
{
"override": {
"maxComputedLength": 10
}
}