使用 ESLint 或 Prettier 为 JS switch-case 强制使用花括号

Question

我想在 JS 中为 switch-case 强制使用大括号，可能使用 ESLint 或 Prettier。您知道任何相关的配置吗？如果不知道，还有其他的 linting 或格式化工具吗？

我尝试将 ESLint 规则

curly

设置为

"all"

，但它并没有抱怨我的无卷曲开关盒。

有一个 switch-case ESLint 插件，但我在它的文档中没有找到这样的规则，在它的源代码中也没有。

示例

错误：

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

正确：

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

Answer 1

以下 eslint 自定义规则存储库中的

switch-braces

规则似乎就是您正在寻找的规则： https://github.com/justinanastos/eslint-plugin-justinanastos/blob/master/docs/rules/switch-braces.md

你可以尝试一下。

Answer 2

您可以使用这样的选择器尝试'无限制语法'规则。

使用详细输出（案例的每个非块子级都报告为错误）：

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

如果您的解析器支持

:has

，您可以尝试这个，但它可能会出现误报：因为子（相对）选择器当前似乎在

:has

中是不允许的，后代非块

.consequent

节点可能会抛出。

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

Answer 3

*这适用于没有插件的 eslint。

curly

规则不适用于 switch case 中的块。不幸的是，没有好的规则可以满足您的需要。您可以在此处建议规则（或编辑为卷曲规则）https://github.com/eslint/eslint/issues。

Answer 4

如果您使用unicorn（我个人可以推荐），则有一条规则：https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/switch-case -大括号.md