`jsx-handler-names` not working 🤔

[mkosir]

Not sure what I'm doing wrong but no matter how I set/enable jsx-handler-names rule in my projects (Nextjs) it doesn't seem to be working at all 🤔 Any idea what to check?

"extends": [
    "plugin:react/recommended",
...
"rules": {
    "react/jsx-handler-names": "error",
...

[ljharb]

Can you provide some example code that you expect to be warned, but isn't?

[mkosir]

Hey @ljharb, with create-next-app I initialized an empty project and added jsx-handler-names lint rule to it. If you run npm run lint linting will succeed without errors, with example component where linting should fail. Could it be that this rule only works with (old) class based React components, but don't see it being mentioned in the docs 🤔

[ljharb]

@mkosir instead of just "react/jsx-handler-names": "error", try "react/jsx-handler-names": ["error", { checkLocalVariables: true }] - with that setting, i'm able to see the expected errors.

Closing, but will reopen if that doesn't solve your problem.

[mkosir]

Thx @ljharb wouldn't figure it out. Maybe only one caveat worth mentioning in the docs would be that props should not be destructed as it needs onClick={prop.onPropCallback} to work, since onClick={onPropCallback} will not be detected.

[ljharb]

Props should always be destructured; it’s just that this rule’s defaults are waiting for a semver-major release to change.

[mkosir]

Props should always be destructured

Not following completely 🤔

I updated the test repo mentioned above, if you try to run npm run lint linting fails on this line (destructed callback prop onClick={onShouldLint}), but it shouldn't. Where if we don't destruct props (onClick={props.onShouldLint}), lint rule works as expected.

[ljharb]

Yes, I understand. The takeaway is that the jsx-handler-names rule should always be used with the checkLocalVariables option, it's just that this plugin can't change the default without it being a breaking change.

[mkosir]

Yep it make sense to change rule defaults 👍 Thx for clarification on this one, unfortunately I wont be enabling this (otherwise awesome) rule, since props destructing is must have.

[ljharb]

Again, you can enable it with the checkLocalNames option, and it will work just fine with destructuring.

[mkosir]

you can enable it with the checkLocalNames option

You probably ment checkLocalVariables 🤔 ? If thats the case I have already enabled it and as mentioned lint fails (but it shouldn't)

[ljharb]

Yes, it should; handlers must start with “handle” - starting with “on” is for prop names.

[mkosir]

Hm but onShouldLint is a prop name just destructed. Anyhow I just feel I own you a 🍺 IRL for the discussion I'm putting you through 😄

[ljharb]

ah, i see what you mean. You’d want to rename the prop while destructuring it.