vue/no-side-effects-in-computed-properties Correctness
What it does
Disallow side effects in computed properties.
Why is this bad?
It is considered a very bad practice to introduce side effects inside computed properties. It makes the code unpredictable and hard to understand.
Examples
Examples of incorrect code for this rule:
vue
<script>
export default {
computed: {
fullName() {
this.firstName = "lorem"; // side effect
return `${this.firstName} ${this.lastName}`;
},
},
};
</script>Examples of correct code for this rule:
vue
<script>
export default {
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
};
</script>How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/no-side-effects-in-computed-properties": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/no-side-effects-in-computed-properties": "error",
},
});bash
oxlint --deny vue/no-side-effects-in-computed-properties --vue-pluginVersion
This rule was added in vnext.