A plugin to strict keep the style of using JSX in Vue3 project.

Rules

• prefer-effect
• prefer-render-in-setup
• no-this-in-setup
• no-getCurrentInstance
• component-nam

Each Rule

prefer-effect

When using composition API, mostly you will not need to use lifecyle methods. Or maybe you should just use effects to preform actions.

You may want to fetch data when component mounted:

onMounted(() => {
    fetchData(props.id)
})

This will rise a problem, how to fetch data when props.id updated. So you may face two situations:

• the props.id never change
• you have to watch props.id to fetch data again

So the best pratice is:

watchEffect(() => {
    fetchData(props.id)
})

Whenever props.id changed, fetchData invoked. If props.id never changed, then the effect will peform only once.