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 Proposal: Validate "emits" section #1787

Open
iliubinskii opened this issue Feb 2, 2022 · 5 comments
Open

Rule Proposal: Validate "emits" section #1787

iliubinskii opened this issue Feb 2, 2022 · 5 comments

Comments

@iliubinskii
Copy link

iliubinskii commented Feb 2, 2022

Please describe what the rule should do:

This rule proposal is based on this issue:
vuejs/core#5343

It should ensure that emits section does not break vue component typing.

What category should the rule belong to?

Warns about a potential error (problem)

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

Valid:

export default defineComponent({
  name: "Sample",
  emits: {
    event1(this: undefined): boolean { return true; },
    event2: (): boolean => { return true; },
    event3: function(this: undefined): boolean { … }
  },

Invalid:

export default defineComponent({
  name: "Sample",
  emits: {
    event(): boolean { return true; },
    event: function(): boolean { … }
  },
@FloEdelmann
Copy link
Member

Makes sense. I'd suggest vue/prefer-emits-arrow-function as a rule name. Arrow functions work in both TypeScript and JavaScript, and the preview docs section linked here recommend using them. So I wouldn't bother with the first style (event1(this: undefined) …).

@iliubinskii
Copy link
Author

iliubinskii commented Feb 3, 2022

So I wouldn't bother with the first style (event1(this: undefined) …).

The first notation (event1(this: undefined)) can be useful to avoid conflict with ESLint core rule object-shorthand. So, I would keep it.

@FloEdelmann
Copy link
Member

FloEdelmann commented Feb 3, 2022

Makes sense. I think the rule should indeed be called vue/prefer-emits-arrow-function and work like this:

Don't report arrow functions or functions (shorthand or longhand) with an explicit this parameter typed to undefined. Report all other functions (shorthand or longhand).

For an autofix, first detect if there is already type information (either only look at the function return type, or detect TypeScript usage in general somehow).

  • If there isn't, provide an autofix to turn it into an arrow function. We can't be compatible with the object-shorthand rule then.
  • If there is, don't provide an autofix, but two suggestions:
    1. Turn into arrow function
    2. Add explicit undefined type for this parameter

I guess that event: function(): boolean { … } will also be invalid? EDIT: Yes it is.

@iliubinskii

This comment was marked as resolved.

@FloEdelmann

This comment was marked as resolved.

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

No branches or pull requests

2 participants