Cannot fix eslint rule on indenting case statements in switch statement

Question

Here is a screenshot of my sublime text window showing the eslint error being thrown for the switch / case statement. I want to have to indent 4 spaces, as the code shows.

and here are 4 different attempts to try to allow for an indent of 4 spaces, via modifications in the .eslintrc file in my react app. I googled for a solution and saw suggestions to add both switchCase and indentSwitchCase, but my .eslintrc rules are all - spaced, not camelcase, so I added all 4 rules in an effort to remove the error from sublime text but no luck... what am i doing wrong ?!?!

EDIT: this is a React / MERN app and im using sublime text as my editor. Let me know if i can share anything else from my .eslintrc file to help!

EDIT 2: I tried this:

"indent": ["error", 4, {SwitchCase: 1}]

...but this is an invalid rule for indent. How do I add an option object to the indent rule without getting an error?

Answer 1

I just saw that you made an edit ("EDIT 2") to your answer.

Anyway I wanted to advise you exactly that option:

"indent": ["error", 4, { "SwitchCase": 1 }]

Why do you consider it "an invalid rule for indent"?

According to the docs, it is the correct way to set the desired indent for switch statements.

"SwitchCase" (default: 0) enforces indentation level for case clauses in switch statements.

The docs provide also [four examples]:

• Indent of 2 spaces with SwitchCase set to 0 will not indent case clauses with respect to switch statements.
• Indent of 2 spaces with SwitchCase set to 1 will indent case clauses with 2 spaces with respect to switch statements.
• Indent of 2 spaces with SwitchCase set to 2 will indent case clauses with 4 spaces with respect to switch statements.
• Indent of tab with SwitchCase set to 2 will indent case clauses with 2 tabs with respect to switch statements.

They are just examples, the fact that your target option object is not listed doesn't mean that it is not correct. And indeed it seems to be correct: ESLint Demo.

Your use case is actually included in the docs of the version 2.0.0 (no anchor to link directly, sorry, it it the last code block of the document):

/*eslint indent: [2, 4, {"SwitchCase": 1}]*/

switch(a){
    case "a":
        break;
    case "b":
        break;
}

Answer 2

In a typescript code-base, using TypeScript ESLint's @typescript-eslint/indent can solve the problem.

{
  // note you must disable the base rule as it can report incorrect errors
  "indent": "off",
  "@typescript-eslint/indent": ["error"]
}

In the following example, ESLint's indent rule is causing errors in a typescript file.