解决 Unexpected lexical declaration in case block 的问题

PrinciplesMan

已于 2022-05-19 10:57:41 修改

阅读量1.5w

点赞数 13

分类专栏： # Vue2.0 文章标签： javascript 前端开发语言

于 2021-08-08 19:37:21 首次发布

原文链接：https://cloud.tencent.com/developer/article/1650690

版权

Vue2.0 专栏收录该内容

239 篇文章

订阅专栏

本文介绍了在使用ESLint新版本时遇到的`no-case-declarations`错误，该错误源于在switch语句的case或default子句中使用了词法声明。通过示例代码，作者解释了这实际上是代码作用域问题，即使case块未被执行，其内的变量仍可能影响其他case。为避免此问题，ESLint建议使用花括号明确代码块的作用域。这个规则有助于防止因作用域不当导致的意外行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

亲测可用，若有疑问请私信

使用新版的 es-lint 的时候扫描旧的项目，发现报了

Unexpected lexical declaration in case block(no-case-declarations)

这么一个错误提示

当时很奇怪，就去查了一下文档，发现中文文档中解释比较简单

该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中。

no-case-declarations - Rules - ESLint中文

几番实验后，其实归根结底是代码作用域的问题：

switch (2) {
  case 1:
    function f () {console.log('Wanna a girl friend !')}
    break
  case 2:
    f() // 会输出：Wanna a girl friend !
    break
}

switch (1) {
  case 1:
    let foo = 1
    break
  case 2:
    let foo = 2
    console.log(foo) // 会报错：Uncaught SyntaxError: Identifier 'foo' has already been declared
    break
}

如上实验可知，就算switch 逻辑没有走到 case 1 的代码块，由于作用域提升，会导致case 1 影响到case 2

所以，eslint 会对这种情况做校验，现在必须使用花括号将代码块确定具体的作用域

switch (1) {
  case 1: {
    // do something
    break
  }
}

从而限制上述问题的发生