Así que he notado que a veces WebStorm no muestra las sugerencias adecuadas con JavaScript e incluso subraya el código válido como incorrecto. En este caso, la sugerencia perdida ocurre con este código:
document.addEventListener("DOMContentLoaded", () =\> { //Get form and required fields const form = document.querySelector("#mainForm"); const required = document.querySelectorAll(".required"); form.addEventListener('submit', validateForm); //Add Listener to submit form function validateForm(e) { //Check if title is blank if (required[0].value === "" || required[0].value == null) { required[0].parentNode.classList.add("highlight"); //Add to parent required[0].classList.add("highlight"); //Add to child e.preventDefault(); } //Check if checkbox is checked if (!required[2].checked || required[2].value == null) { required[2].parentNode.classList.add("highlight"); //Highlight parent (box) e.preventDefault(); } } }); El problema está en required[0].parentNode.classList.add("highlight") WebStorm subraya .classlist como incorrecto. De hecho, cuando required[0].parentNode. no sugiere classList como una opción. Lo verifiqué con VS Code y VS Code hace esa sugerencia.
¿Alguien sabe por qué y cómo solucionarlo, para que WebStorm me dé sugerencias correctas en este caso?
Esperaba mostrar .classList como una opción como lo hace VS Code, pero no lo está haciendo. Me gusta mucho más WebStorm, pero esto ha sucedido antes en el pasado, lo que me hace pensar que estoy haciendo algo mal.
El problema se produce porque no se conoce el tipo exacto de required[0].parentNode (no se puede recuperar de forma estática) y la propiedad classList no existe en el tipo ParentNode . Debe informar al IDE cuál es el tipo real del elemento (usando anotaciones JSdoc, por ejemplo)