Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rule vue/v-on-handler-style default auto fix will bring breaking change into code #2538

Open
heggria opened this issue Aug 29, 2024 · 5 comments · May be fixed by #2539
Open

Rule vue/v-on-handler-style default auto fix will bring breaking change into code #2538

heggria opened this issue Aug 29, 2024 · 5 comments · May be fixed by #2539

Comments

@heggria
Copy link

heggria commented Aug 29, 2024

What rule do you want to change?

vue/v-on-handler-style

Does this change cause the rule to produce more or fewer warnings?

More

How will the change be implemented? (New option, new default behavior, etc.)?

What does the rule currently do for this code?

In the current default configuration, such as vue/v-on-handler-style: 'warn', the rule will apply the following formatting by default:

// before - variant 1
<div @click="()=>changeFunc()" />

// before - variant 2
<div @click="changeFunc()" />

// after
<div @click="changeFunc" />

When the first argument of changeFunc is not an event and can be undefined, this auto-fix may lead to a breaking change in the code logic. This is because using @click="changeFunc" will pass the event object to changeFunc by default, causing logic errors in the subsequent code.

What will the rule do after it's changed?

By default, the rule will no longer automatically fix the following two types of v-on syntax:

// type 1
<div @click="()=>changeFunc()" />

// type 2
<div @click="changeFunc()" />
@heggria heggria changed the title Rule vue/v-on-handler-style default auto fix will bring breaking change into code Rule vue/v-on-handler-style default auto fix will bring breaking change into code Aug 29, 2024
@FloEdelmann
Copy link
Member

FloEdelmann commented Aug 29, 2024

I guess changing the fix to a suggestion that has to be manually applied makes sense here. PRs welcome for that!

@ota-meshi
Copy link
Member

I believe this rule will stop unsafe auto-fixes if the method is specific and the number of arguments is known.

https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJyVj70OwiAQx1+F3NQmJU0cG9o4+RRdCJyKUmg4IJqm7y5VYxxcHO/u9/+4BZTXCB2IiNNsZcRhdIwJbTLbK2vUtR+hwowu1v2gztKd8JCcquoRWPuD/Qt5A6L9ChekgpkjI4xpLvOxcNF4x76cZc2W0a2b8kUXDhoIySJBt0BO2Co/TaU11yZgMcjlyV3zvFzoxhMh8SwDfbaZe8dLhLYYOMW73QTr+gDseWL3

But it seems to do an unsafe auto-fix if it can't find the method.
I think we should fix that.

@heggria
Copy link
Author

heggria commented Sep 3, 2024

I believe this rule will stop unsafe auto-fixes if the method is specific and the number of arguments is known.

https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJyVj70OwiAQx1+F3NQmJU0cG9o4+RRdCJyKUmg4IJqm7y5VYxxcHO/u9/+4BZTXCB2IiNNsZcRhdIwJbTLbK2vUtR+hwowu1v2gztKd8JCcquoRWPuD/Qt5A6L9ChekgpkjI4xpLvOxcNF4x76cZc2W0a2b8kUXDhoIySJBt0BO2Co/TaU11yZgMcjlyV3zvFzoxhMh8SwDfbaZe8dLhLYYOMW73QTr+gDseWL3

But it seems to do an unsafe auto-fix if it can't find the method. I think we should fix that.

@ota-meshi Thank you for your response. Based on my understanding, a better approach to improve the current code would be as follows:

  • If the method definition does not exist, avoid automatic fixing and provide suggestions instead.
  • If the method definition does exist, check whether the method has parameters.
    • If it does have parameters, avoid automatic fixing and provide suggestions instead.
    • If it doesn't have parameters, proceed with the automatic fix.

Please let me know if I've misunderstood anything. Thanks again!

@jacekkarczmarczyk
Copy link

There was a similar issue a while ago #1345

@ota-meshi
Copy link
Member

If it does have parameters, avoid automatic fixing and provide suggestions instead.

I think it could probably be auto-fixed if the number of arguments and parameters matched.

<template>
  <MyButton @click="(a) => fn1(a)" />
  <MyButton @click="(a, b) => fn2(a, b)" />

  <!-- Can't auto-fix -->
  <MyButton @click="(a) => fn2(a)" />
</template>
<script setup>
function fn1(a) {}
function fn2(a, b) {}
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants