寻求TypeScript/Babel/ESLint插件正确处理case块变量

先明确现象：在switch的case分支里声明变量后，确实能在其他case分支中引用——编译阶段可能通过，但运行时会因环境不同抛出错误或返回undefined，比如示例代码中调用processBranch(2)时，text未定义就会报错。

function processBranch(num) {
  switch (num) {
    case 1:
      const text = "hello";
      console.log("First branch:", text);
      break;
    case 2:
      console.log("Second branch:", text);
      break;
  }
}

processBranch(1); // 正常输出
processBranch(2); // 运行时错误：text is not defined

ESLint的no-case-declarations规则会一刀切警告所有case内的变量声明，但其实仅在当前case块内使用变量是完全安全的，下面分三种工具给出解决方案：

1. TypeScript 编译选项 #

TypeScript的控制流分析默认会检测到跨case引用未定义变量的问题，直接在编译阶段报错，从根源阻止这类错误。

如果想让每个case分支拥有独立的块级作用域，避免变量泄漏，只需要给case分支加上花括号{}，TypeScript会认可这种写法，且不会报错：

function processBranch(num: number) {
  switch (num) {
    case 1: {
      const text = "hello";
      console.log("First branch:", text);
      break;
    }
    case 2: {
      console.log("Second branch: default");
      break;
    }
  }
}

此时如果在case2中引用case1的text，TypeScript会直接编译报错，无需额外配置。

2. ESLint 规则配置 #

可以修改no-case-declarations规则的配置，允许在case内的块级作用域中声明变量，仅当直接在case分支下（无块级作用域）声明变量时触发警告。

在ESLint配置文件中添加：

{
  "rules": {
    "no-case-declarations": ["error", { "allow": "block" }]
  }
}

这样，当你在case分支内用{}包裹变量声明时，不会触发警告；如果直接在case下声明变量（可能导致跨case泄漏），才会触发规则提示，完美区分安全和不安全的用法。

3. Babel 相关方案 #

Babel本身是转译工具，不会主动检测作用域问题，但可以配合ESLint使用@babel/eslint-parser，让ESLint能够正确解析Babel扩展的语法，同时应用上面提到的ESLint规则配置，实现同样的效果。

如果需要通过Babel强制块级作用域，也可以使用一些插件，但更推荐配合ESLint的规则来规范代码写法，从编码阶段避免问题。

内容的提问来源于stack exchange，提问作者kajacx