Fixing eslint no-invalid-this error for fat arrow class methods

Was looking for some time for how to fix the error

error Unexpected ‘this’ no-invalid-this

when you are eslinting your js / jsx files.

Thanks to Lynn «Кофеман» this is how you can do it:

• npm install these 2 guys: babel-eslint and eslint-plugin-babel
• in .eslintrc add plugins: ['babel']
• and use installed parser: 'babel-eslint'
• then you should switch rules:

"no-invalid-this": 0,
"babel/no-invalid-this": 1

Now you can write this kind of stuff and not get shouted at:

class MyDuperClass {
  onClick = () => {
    this.doSomeStuff();
  }
}

Links:

• https://github.com/eslint/eslint/issues/4683#issuecomment-284146481
• https://github.com/eslint/eslint/issues/7565
• discussing the fat arrow methods pattern https://twitter.com/rauschma/status/937832318177366016