JS Class Fields Proposal Stage 3 Update, BabelJS, and Airbnb's JS Style Guide

In case you haven’t heard the news, Daniel Ehrenberg and Jeff Morrison’s ESnext class features for JavaScript proposal was moved from stage-2 to stage-3.

Yes.

This is especially great news for anyone who has been using BabelJS’s transform-class-properties plugin, as we no longer have to worry about the proposal dropping and the crises of conscious that would haunt us as we debate brining our React components back in line with standards.

If you are unfamilar with React and ES6+ class properties, check out this fantastic article noting some of the highlights.

tl;dr - we go from this:

	const MyComponent = React.createClass({
		propTypes: {...},
		getDefaultProps: function() {
			return {...}
		},
		getInitialState: function() {
			return {...}
		},
		render: function () {...},
	})

to this:

	const MyComponent = class extends React.Component {
  		static propTypes = {...}
	  	static defaultProps = {...}
		state = {...}
		render() {...}
	}

However, even as we all eagerly await BabelJS’s maintainers to move transform-class-properties from the stage-2 to stage-3 preset, if you are using Airbnb’s JavaScript Style Guide, you will have to wait a little longer until your linter stops yelling at you for using class properties.

Jordan Harband, dev at Airbnb, states that we can use the new feature

“as soon as eslint core supports it - sadly they aren’t likely to do so until stage 4.”.

Bummer.

If, like me, you simply cannot write React components without the new JS class properties, but rely on Jordan and team rest of the team at Airbnb to keep your JS in check, have no fear - a workaround does exist.

Simply add the babel-eslint parser - this allows you to use all valid Babel code, even that which might not be supported by ESLint.

Once installed, updated your .eslintrc file with the new parser:

{
  "extends": "airbnb",
  "parser": "babel-eslint"
}

Happy JavaScripting.