So I have noticed sometimes WebStorm does not show proper suggestions with JavaScript and even underlines valid code as wrong. In this case, the missed suggestion happens with this code:

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();
        }
    }

});

The problem is in required[0].parentNode.classList.add("highlight") WebStorm underlines .classlist as wrong. In fact when I type required[0].parentNode. it does not suggest classList as an option. I checked it with VS Code and VS Code does make that suggestion.

Does anybody know why and how to fix it, so that WebStorm gives me correct suggestions in this case?

I was expecting to show .classList as an option as VS Code does but it is not doing it. I like WebStorm a lot more, but this has happened before in the past, making me think I am doing something wrong.