Enforce style of passing an event or part of an event to a method

[leonheess]

Please describe what the rule should do: In Vue you can use test($event.detail) as well as event => test(event.detail) to achieve the same thing. 1. should be preferred.

1. test($event.detail)

<Component
  @click="test($event.detail)"
/>

2. event => test(event.detail)

<Component
  @click="event => test(event.detail)"
/>

What category should the rule belong to? [X] Enforces code style (layout) [ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<Component
  @click="event => test(event.detail)"
/>

<Component
  @click="({ detail }) => test(detail)"
/>

[ota-meshi]

Thank you for the rule proposal! I think it would be even better if the options allowed the user to choose the style they prefer.

[FloEdelmann]

Instead of a separate rule, it could maybe be a new option for vue/v-on-function-call.

[FloEdelmann]

This was implemented as the new vue/v-on-handler-style rule in #2009.

[leonheess]

Doesn't seem to work:

'vue/v-on-handler-style': ['error', ['method', 'inline']]

[ota-meshi]

I think you should use the following option:

'vue/v-on-handler-style': ['error', 'inline']

https://eslint.vuejs.org/rules/v-on-handler-style.html#inline

[leonheess]

@ota-meshi But then it will complain about @click="function" which is preferred if no arguments are needed 😞

[ota-meshi]

I'm not sure. I thought you prefer the inline format. Isn't it?

[leonheess]

@ota-meshi I want it to be as short as possible so if no parentheses are needed, none should be used.

[ota-meshi]

I'm not sure which style you prefer. Could you please open a new issue as a feature request for the v-on-handler-style rule and detail your preferred style?