解決 Unexpectedlexicaldeclarationincaseblock的問題

哩个啷个波發表於2024-11-04
BloC

親測可用，若有疑問請私信

使用新版的 es-lint 的時候掃描舊的專案，發現報了

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

這麼一個錯誤提示

當時很奇怪，就去查了一下文件，發現中文文件中解釋比較簡單

該規則禁止詞法宣告 (let、const、function 和 class) 出現在 case或default 子句中。

幾番實驗後，其實歸根結底是程式碼作用域的問題：

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

從而限制上述問題的發生

相關文章