Recently I started to use the ESlint plugin @wordpress/eslint-plugin/recommended for developing a WP plugin.
The plugin works, but the linter is not happy with it. I rather use vanilla JS than jQuery, and usually replace jQuery’s $.ready() with the code below:
document.addEventListener('readystatechange', (event) => {
if (event.target.readyState === 'complete') {
...
}
});
ESlint says:
Avoid using (add|remove)EventListener with globals. Use ownerDocument or ownerDocument.defaultView on a node ref instead.eslint(@wordpress/no-global-event-listener)
I’m somewhat confused what I’m supposed to change here. This is even an example on developer.mozilla.org.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You can probably ignore the rule. A (very) quick search revealed the GitHub PR where this rule was added, and it is only intended for use in React components (emphasis mine):
It’s only meant for React components. Not sure if there’s a way to
make it more specific…
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0