Rule proposal: `prefer-class-fields`

[MrHen]

There is a superior pattern for class field declarations that can declutter constructors (often making them totally unnecessary.) The feature is still considered experimental but it works out of the box with babel.

Fail:

class Foo {
  constructor() {
    this.foo = 'foo';
  }
}

Pass:

class Foo {
  foo = 'foo';
}

---

IssueHunt Summary

frsgit has been rewarded.

Backers (Total: $30.00)

• fregante ($30.00)

Submitted pull Requests

• #2512 Add prefer-class-fields rule

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[sindresorhus]

Sounds good, but I think we should wait until ESLint supports class fields.

---

Should it also handle:

class Foo {
  constructor() {
    this._foo = 'foo';
  }
}

to

class Foo {
  #foo = 'foo';
}

?

[MrHen]

I think a rule for private fields would be awesome, yeah. I don't think we can realistically auto-fix those, however, because people abuse _foo access too regularly and it would very quickly break code.

[sindresorhus]

So you think private fields should be a separate rule?

---

I don't think we can realistically auto-fix those, however, because people abuse _foo access too regularly and it would very quickly break code.

👍

[MrHen]

Yeah. As a general principle, I prefer rules to be have the smallest reasonable scope.

In this case, I can also see why a team might want to convert to class fields because of the fixer but not want to enable the private fields rule right away because they'd have to move a bunch of code around.

[sindresorhus]

Issue for private class fields: #979

[sindresorhus]

Does ESLint support class fields yet?

[fregante]

Does ESLint support class fields yet?

It does now

This rule would be pretty useful on Error constructors like:

class MyError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "MyError";
  }
}

👇

class MyError extends Error {
  name = "MyError"
}

[sindresorhus]

This is accepted.

[jimmywarting]

bump