Search code examples
javascriptswitch-statementwarningsjslintadobe-brackets

Why is JSLint warning me about my switch-case statement being incorrectly formatted?


In Adobe Brackets, I am getting warnings from JSLint when writing strict code ['use strict'] that my switch case statement is incorrectly formatted:
eg. Expected 'case' at column #, not column #

If I move everything inside the switch statement back back one "tab" JSLint is happy.
But, Adobe Brackets (And Similar Code Applications) wants to indent the case statements, and even when using Code Beautify it also formats the code to have an indent before the case statement.

  • When using strict code, is what JSLint is suggesting really the proper way of to format the switch-case statements?
  • Is there a way to fix/make JSLint in Adobe Brackets so it thinks this indentation is correct? (I would like to stick to not hacking up the JSLint Code)
  • Why would Editors format the switch-case statement this way if strict code does not want you to do that?
  • Am I really just doing something wrong here?
  • Is this just a downside of JSLint and is there a way to avoid using the switch-case statement then altogether thus in the process also making JSLint happy?
  • Should I really just stop using JSLint altogether? And Switch to something else?

This Code is nested in a for loop:

switch (curButton.button.innerText.toLowerCase()) {
    case this.Part1.Button.ButtonText.toLowerCase():
        this.Part1.Button.ButtonText = curButton.button.innerText;
        this.Part1.Button.Element = curButton.button;
        this.Part1.Button.CurrentClass = curButton.button.className;
        console.log(smgData.PodCast.Parts.Part1.Button);
        break;
    case this.Part2.Button.ButtonText.toLowerCase():
        this.Part2.Button.ButtonText = curButton.button.innerText;
        this.Part2.Button.Element = curButton.button;
        this.Part2.Button.CurrentClass = curButton.button.className;
        console.log(smgData.PodCast.Parts.Part2.Button);
        break;
    case this.Part3.Button.ButtonText.toLowerCase():
        this.Part3.Button.ButtonText = curButton.button.innerText;
        this.Part3.Button.Element = curButton.button;
        this.Part2.Button.CurrentClass = curButton.button.className;
        console.log(smgData.PodCast.Parts.Part3.Button);
        break;
}

Here is some basic code that will reproduce this on https://www.jslint.com/

function abcd() {
    var a;
    var b;
    switch (a) {
        case 1:
            a=b;
            break;
        case 2:
            b=a;
            break;
    }
}

JSLint Warnings


Solution

  • This sounds like a problem with JSLint.

    It's not exactly what you were asking, but one way to re-formulate the code and avoid switch entirely (and thus the problems JSLint has with switch) is to .find the Part whose ButtonText matches. Then use bracket notation to look up the button on the this:

    const currentText = curButton.button.innerText.toLowerCase();
    const matchingPart = ['Part1', 'Part2', 'Part3']
        .find(part => currentText === this[part].Button.ButtonText.toLowerCase());
    if (matchingPart) {
        const { button } = this[matchingPart];
        button.ButtonText = curButton.button.innerText;
        button.Element = curButton.button;
        button.CurrentClass = curButton.button.className;
        console.log(smgData.PodCast.Parts[matchingPart].Button);
    }
    

    If you can control the shape of the this object, it would probably be easier if the Parts were an array, instead of 3 different properties. Then, you could .find over that array, instead of hard-coding the 3 Part properties.

    I'd consider the code above to be perfectly fine, but to make it pass all of JSLint's (IMO - opinionated and not-so-good) rules, it'd have to be

    const currentText = curButton.button.innerText.toLowerCase();
    const props = ["Part1", "Part2", "Part3"];
    const matchingPart = props.find(function(part) {
        return currentText === this[part].Button.ButtonText.toLowerCase();
    });
    if (matchingPart) {
        const { button } = this[matchingPart];
        button.ButtonText = curButton.button.innerText;
        button.Element = curButton.button;
        button.CurrentClass = curButton.button.className;
        console.log(smgData.PodCast.Parts[matchingPart].Button);
    }