Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure ESLint for using e.g. event.target and element.parentNode?

Edit: I didn't realize the error messages are not even coming from ESLint but from something called [js] in Visual Studio Code. I'd delete the question but it might help others also mistaking the [js] output for ESLint. Still curious to learn what sort of process this [js] thing is.

I have been presented with the task to define a project-wide .eslintrc.js file to make sure the team's code meets common standards.

Running ESLint using preset eslint:recommended gives me the following error message

The property "parentNode" does not exist for the type "EventTarget".

This is the piece of code in question:

window.addEventListener('keydown', event => {
  const currentTag = event.target.parentNode.tagName;
  /* ... */
})

I understand that there can be event.targets that are not HTMLElements, but how am I supposed to code - or configure ESLint - so this line no longer produces ESLint errors? We are planning on making our build fail as long as ESLint reports any errors, so this must be addressed.

A second line of code that causes a similar error:

document.activeElement.click();

results in ESLint erroring

The property "click" does not exist for the type "Element".

3rd example:

const rows = this.childNodes[1].querySelectorAll('tr');

throws

The property "querySelectorAll" does not exist for the type "Node & ChildNode".

Note: Please do not suggest the use of flow or Typescript, the code will remain pure ES6 (which I understand ESLint is for).

like image 811
connexo Avatar asked Nov 08 '22 07:11

connexo


1 Answers

As per OP the code contains // @ts-check as first line

Thus it's pretty clear that this has nothing to do with separate eslint, but is caused by internal VSCode linter

The easiest way to enable type checking in a JavaScript file is by adding // @ts-check to the top of a file.

like image 55
Karen Grigoryan Avatar answered Nov 14 '22 21:11

Karen Grigoryan