Cannot fix eslint rule on indenting case statements in switch statement

JavascriptReactjsEslintLinter

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCanoviceView Question on Stackoverflow
Solution 1 - JavascriptDavidView Answer on Stackoverflow
Solution 2 - JavascriptHyunbinView Answer on Stackoverflow