使用 ESLint 或 Prettier 为 JS 开关案例实施花括号

Posted 2023-02-21

【中文标题】使用 ESLint 或 Prettier 为 JS 开关案例实施花括号

【英文标题】：Enforce curly braces for JS switch-cases with ESLint or Prettier

【发布时间】：2021-10-22 15:16:35

【问题描述】：

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

我尝试将 ESLint 规则 curly 设置为 "all"，但它并没有考虑到我的无卷曲开关盒。

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

示例

错误：

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;
  

【参考方案1】：

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

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

【参考方案2】：

以下 eslint 自定义规则 repo 中的 switch-braces 规则似乎是您正在寻找的规则： https://github.com/justinanastos/eslint-plugin-justinanastos/blob/master/docs/rules/switch-braces.md

你可以试一试。

【参考方案3】：

你可以试试'no-restricted-syntax' rule 这样的selector。

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

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

如果您的解析器支持:has，您可以尝试这个，但它可能会出现误报：由于:has 目前似乎不允许子（相对）选择器，后代非块@987654326 @nodes 可能会抛出。

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