Enforce curly braces for JS switch-cases with ESLint or Prettier

Viewed 1036

I'd like to enforce curly braces for switch-cases in JS, possibly with ESLint or Prettier. Do you know of any related config, or if not that, then any other linting or formatting tool?

I tried the ESLint rule curly set to "all", but it didn't compain about my curly-less switch-cases.

There is a switch-case ESLint plugin, but I haven't found such a rule in its doc, neither in its source code.

Example

Wrong:

switch (foo) {
  case "bar":
    return 1;
  case "baz":
    return 2;
  default:
    return 0;
}

Correct:

switch (foo) {
  case "bar": {
    return 1;
  }
  case "baz": {
    return 2;
  }
  default: {
    return 0;
  }
}
3 Answers

You can try 'no-restricted-syntax' rule with such selector.

With verbose output (each non-block child of a case is reported as error):

    'no-restricted-syntax': ['error',
      {
        'selector': 'SwitchCase > *.consequent[type!="BlockStatement"]',
        'message': 'Switch cases without blocks are disallowed.'
      },
    ],

If :has is supported by your parser, you can try this one, but it can have false-positive reports: since child (relative) selectors currently seem to be disallowed in :has, descendant non-block .consequent nodes may throw.

    'no-restricted-syntax': ['error',
      {
        'selector': 'SwitchCase:has(*.consequent[type!="BlockStatement"])',
        'message': 'Switch cases without blocks are disallowed.'
      },
    ],

*This applies to eslint without plugins.

The curly rule does not apply to blocks in switch cases. Unfortunately there is no good rule that does what you need. You can suggest the rule (or edit to curly rule) here https://github.com/eslint/eslint/issues.

Related