ESLint: Enforce that class methods utilize this (class-methods-use-this)

1

Inside a Stimulus controller, I have a method like this to prevent submitting the form when the Return key is pressed:

keypress(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
  }
}

The javascript linter is complaining

Enforce that class methods utilize this (class-methods-use-this)

If a class method does not use this , it can sometimes be made into a static function. If you do convert the method into a static function, instances of the class that call that particular method have to be converted to a static call as well ( MyClass.callStaticMethod() )
…
This rule is aimed to flag class methods that do not use this .

It’s easy enough to disable the linter for this particular method. But I am wondering if there’s a better way that I’m missing.

1 Like
2

It’s easy enough to disable the linter for this particular method.

I’d go the other direction and delete that rule from your .eslintrc :grimacing:

But I am wondering if there’s a better way that I’m missing.

This would appease your linter, but is undeniably worse:

export default class extends Controller {
  static keypress(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
    }
  }

  keypress(event) {
    this.constructor.keypress(event);
  }
}
3

:golfing_man: Another not-recommended not-better way:

export default class extends Controller {
  get keypress() {
    return keypress;
  }
}

function keypress(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
  }
}
4

I would do that but my client is passionately in love with his lint config.

LOL, thanks for these ideas. I’m glad to know I’m not out in left field.

5

Also, consider renaming your keypress() method to describe the outcome instead of just repeating the event name.

Avoid action names that simply repeat the event’s name, such as click , onClick , or handleClick:

<button data-action="click->profile#click">Don't</button>

Instead, name your action methods based on what will happen when they’re called:

<button data-action="click->profile#showDialog">Do</button>

This will help you reason about the behavior of a block of HTML without having to look at the controller source.

↝ https://stimulusjs.org/reference/actions#naming-conventions

1 Like