ESLint数组解构删除列表项时标记变量未使用的原因及优雅解法问询

为什么ESLint会抛出no-unused-vars错误 #

no-unused-vars规则的默认检测逻辑非常直接：只要是通过任何方式声明的变量（函数形参、let/const声明、解构赋值产生的变量），如果在后续作用域中从来没有被读取过，就会被标记为未使用。
你代码里的item，是解构时放在数组第一个位置的占位——你写这个位置的唯一目的，就是把数组第一个元素的值接住、然后丢掉，好让后面的剩余运算符能收集到剩下的元素。整个过程中你从来没有读过这个item的值，完全符合规则对“未使用变量”的判定。哪怕它参与了解构的流程，只要没有实际的读取操作，就会触发报错。

不需要抑制注释、不需要全局关规则的优雅解决方案 #

• 方案1：用数组解构原生的省略语法，彻底消掉多余占位变量
  数组解构根本不需要给每个要跳过的位置命名变量，只要对应位置留空、保留逗号，就可以跳过该位置的值。改造后的代码完全保留原有删除首个元素的逻辑：

  remove() {
    // 第一个位置留空，仅将数组剩余部分收集赋值给this.list
    [, ...this.list] = this.list
  }
  

  这种写法是JS语言本身设计就支持的标准用法，没有任何多余的变量声明，ESLint自然不会触发报错。顺带一提，你原代码remove(item)里的形参item从始至终也没有被逻辑使用（解构操作会直接把this.list的首元素覆盖到这个变量上，和传入的参数值无关），完全可以去掉。

• 方案2：开启规则内置的解构场景适配配置
  no-unused-vars规则从设计之初就考虑到了这种解构占位的场景，内置了ignoreRestSiblings配置项。开启这个选项后，ESLint会自动识别：当解构语句使用了剩余运算符时，位于剩余运算符之前、仅用于位置匹配的解构变量，就算没有被读取，也不会判定为未使用。
  这种方式完全不需要修改原有业务代码，也不需要逐行加注释抑制报错，是规则层面的原生适配，非常适合不想调整现有代码写法的场景。

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