Parsing error: Unexpected token = eslint because of the airbnb style configuration in React-Redux project about linters-config

[MauricioRobayo]

You are using the experimental public class fields syntax, which is a proposal in stage 3, not yet in the language.

As you notice, you are able to use it because you are using Babel which will transform it for you. That's why ESLint complains, I don't think it is an Airbnb styleguide issue, is just that it is not in the language yet, and you have to use the babel-eslint parser to avoid the issue with ESLint.

The way to do it using ES6 classes is documented on the React docs.

You have to bind your class methods on the constructor, something like this:

export class Searchform extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }

-   onChange = event => {
+   onChange(event) {
    // ...
  }

-   onChange = event => {
+   onSubmit(event) {
    // ...
  }

You can check here the difference between the experimental feature and the ES6 classes.

That solved the issue, however other linting errors raised instead, being "destructuring assignment" the most annoying.

It would be great if you guys remove the Airbnb style from the official linting files. Personally, I work with "eslint-recommended" along with prettier and resulting code is beautifully.

Don't take wrong, but for me projects from Microverse are really frustrating most of the time because of the linting style implemented which causes hours of time used in fixing linting errors instead of learning something more productive.

Thank you for your suppor @MauricioRobayo!