foad / eslint-plugin-listeners

ESLint plugin for preventing memory leaks around event listeners

eslint-plugin-listeners

This project aims to provide formatting rules to prevent memory leaks around event listeners

Installation

You'll first need to install ESLint:

$ yarn add eslint --dev

Next, install eslint-plugin-listeners:

$ yarn add eslint-plugin-listeners --dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-listeners globally.

Usage

Add listeners to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["listeners"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "listeners/no-missing-remove-event-listener": "error",
    "listeners/matching-remove-event-listener": "error",
    "listeners/no-inline-function-event-listener": "error"
  }
}

or

You can use our "recommended" settings which enables most of the rules for you

{
  "extends": ["plugin:listeners/recommended"]
}

We also support a "strict" settings which enables all of the rules for you

{
  "extends": ["plugin:listeners/strict"]
}

Rule Documentation

• no-missing-remove-event-listener
• matching-remove-event-listener
• no-inline-function-event-listener

Credits

This package is based off of https://github.com/tipsi/eslint-plugin-tipsi

eslint-plugin-listeners's Issues

Mismatched useCapture flag not reported

I just installed your plugin due to finding a devious bug where I had an addEventListener call with the useCapture argument set to true, and a removeEventListener call without the flag. This doesn't actually remove it, see MDN.

In other words, the following code is not flagged as a problem right now, and it probably should be:

private startListening() {
  const useCapture = true;
  document.addEventListener("mousemove", this.onMouseMove, useCapture);
}

private stopListening() {
  document.removeEventListener("mousemove", this.onMouseMove);
}

`no-inline-function-event-listener` false-positive with `once`

I believe doing:

element.addEventListener('click', () => console.log('clicked'), { once: true });

Is OK because of once: true so perhaps the rule should ignore these cases?