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

Question

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

Bimetallic

Answer 1

The switch-braces rule in the following eslint custom rules repo seems to be the one you are looking for: https://github.com/justinanastos/eslint-plugin-justinanastos/blob/master/docs/rules/switch-braces.md

You can give it a try.

Azotize

Answer 2

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.'
      },
    ],

Cele

Answer 3

*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.

Matchlock

Answer 4

If you're using unicorn (which I personally can recommend), there is a rule for that:

ESLint Plugin Unicorn - Rule: "Switch case braces": https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/switch-case-braces.md

It's also in the "recommended" preset since v44: https://github.com/sindresorhus/eslint-plugin-unicorn/releases/tag/v44.0.0

So, it will automatically be applied, if you have in your .eslintrc.json something like:

"plugins": ["@typescript-eslint", ... "unicorn"],
"extends": [ ... "plugin:unicorn/recommended"],

Endor