Automatically picking up js errors in vscode

Question

Using VS Code and I keep hitting little snags in my JS workflow, example below:

In the following code theres an teeny error (highlighted).

module.exports = {
elems: {
    accordions: document.querySelectorAll('ul.m_accordion')
},
init: function() {
    this.render();
}, 
render: function() {
    if (!this.moduleValid()) {
        return;
    }
    this.attachListeners(this.elems.accordions);
}, 
moduleValid: function() {
    return this.elems.**accordion**.length > 0;
}, 
attachListeners: function (accordions) {
    for(var i = 0; i < accordions.length; i++){
        console.log(this);
    }
}
}

Renamed a variable, missed one, webpacked up and (understandably) broke in browser, little debugging and its all working. Larger files though it becomes a bit of a pain. However it'd be great if those errors were picked up and shown in VSCode.

For referance and to show you what I see heres a small screenshot of the same js code, in the vs code with the error visible, but 'invisible'

(Ignore my little scribble - purely to draw the eye to my woe)

Answer 1

You can try using ESLint extension: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint is meant to check your javascript for syntactical errors, also forces you to write your script in a specific manner which you can configure. Eg you can force every developer to avoid writing JSON in single line etc.

You can configure the rules using .eslintrc file in root of your application. Check https://eslint.org/docs/user-guide/configuring . Following is an example of a .eslintrc file

OR

If you want absolute type checking and compilation benefits like C# or JAVA then use TypeScript .