110

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.

enter image description here

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 ?!?!

enter image description here

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?

Canovice
  • 9,012
  • 22
  • 93
  • 211
  • 3
    Not an answer to the question, but in *many* cases, objects indexed by options work as well or better than `switch` statements, and are more concise and less error-prone. I think this is one of them. eg `const options = { fg2PtPct: 'fg2PtAtt', fg3PtPct: 'fg3PtAtt', ... }; const sortColY = options[selectedYState.value];` – CertainPerformance Oct 29 '18 at 23:26
  • yes you're probably right, esp in this case. I do have other switch cases that are more involved than simply assigning a variable name though – Canovice Oct 29 '18 at 23:28
  • 2
    `"indent": ["error", 4, {"SwitchCase": 1}]` - valid json syntax, instead of `"indent": ["error", 4, {SwitchCase: 1}]` - invalid json syntax – Shl Aug 28 '19 at 05:36

2 Answers2

201

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;
}
agm1984
  • 15,500
  • 6
  • 89
  • 113
David
  • 6,695
  • 3
  • 29
  • 46
  • 3
    looks like the error thrown was due to not removing the incorrect rules i placed elsewhere in the .eslintrc file - you are correct that this is now working. Thanks! – Canovice Oct 30 '18 at 00:58
  • 1
    The eslintrc.js that was automagically generated for me has `indent: ["error", "tab"]` How do I implement `SwitchCase`? – Native Coder Nov 06 '20 at 19:05
  • 1
    indent: [ 'error', 'tab', { "SwitchCase": 1 } ], – Rimon Fedyuk Jul 05 '21 at 18:44
  • 1
    Eslint is "wrong" because the default should be switchCase: 1. The current default is unreadable, and breaks continuity with indentation in all other block statements. – user2867288 Mar 30 '23 at 01:32
9

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.

ESLint indent rule error in a switch statement - Expected indentation of 4 spaces but found 6

Hyunbin
  • 423
  • 4
  • 6