Unexpected aliasing of ‘this’ to local variable.eslint@typescript-eslint/no-this-alias)

代码仓库的提交Git上添加了代码规则校验ESlint，有关eslint的相关介绍可参考：Webpack 项目添加 eslint 实现代码检测功能。在提交代码的时候出现报错信息：

其原因是默认在eslint中存在如下配置：

// .eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/no-this-alias": "error"
  }
};

官方说明如下：

为其分配一个变量而不是正确使用箭头lambdas可能是ES6之前的实践或没有很好地管理范围的症状。

Assigning a variable to this instead of properly using arrow lambdas may be a symptom of pre-ES6 practices or not managing scope well.

解决方法

知道了问题的原因所在，就方便对于问题的解决了。我的思路是有两个解决方式，无非就是我们常说的：解决提出的问题又或者是解决提出问题的人。

1、解决问题提出者

这种就简单了，直接从源头上解决，直接在当前项目的eslint配置文件中将这个规则删除，若是继承规则，就在配置文件中覆写规则，替换错误等级，如下：

// .eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/no-this-alias": "off" // 或者改成warn
  }
};

2、解决问题本身

个人体长这种方式，这个问题本身就是为了防止出现this指向混乱引入的规则，出现这种报错也就是我们的代码本身的规范存在问题，修改函数为箭头函数，去除this的变量赋值分配，如下：

function ActivitiModdleExtension(eventBus) {
-  let that = this // older
  eventBus.on(
    'property.clone',
-    functoin(context) {
+    (context) => {
      const newElement = context.newElement
      const propDescriptor = context.propertyDescriptor
-      that.canCloneProperty(newElement, propDescriptor)
+      this.canCloneProperty(newElement, propDescriptor)
    },
  )
}